Greymuzzle - Professional Journalism Theme for Ghost

Greymuzzle

Furry-centric investigative journalism, powered by Ghost & the Dope theme

Greymuzzle is a furry fandom-native newsroom focused on:

• Accountability in furry spaces
• Safety, anti-abuse, and anti-fascist reporting
• Labor, money, and power in the fandom
• Culture, history, and “greymuzzle” memory
• Artist profiles

Greymuzzle is:

• Anti-fascist
• Pro-survivor
• Pro-worker
• Explicitly queer-friendly and furry-centric

We expect all contributors to:

• Respect sources, including their boundaries and trauma
• Avoid harassment, dogpiling, or targeted hate
• Keep doxxable data and sensitive evidence out of Git and in secure channels
• A more formal Code of Conduct (e.g. Contributor Covenant) can be found in CODE_OF_CONDUCT.md.

Dope

A beautiful, accessible, and feature-rich Ghost theme designed specifically for investigative journalism in the furry community. Built on the foundation of the Dope theme with extensive enhancements for professional news reporting.

Live Site: https://greymuzzle.net

Features

🎨 Design & Accessibility

• Dark mode by default with light mode support and auto-switching based on system preferences
• WCAG AAA compliant color contrast ratios (7:1+ for normal text)
• Comprehensive accessibility features:
  • Skip to content links
  • Full keyboard navigation support
  • Screen reader optimized
  • Focus indicators
  • ARIA labels throughout
  • High contrast mode support
  • Reduced motion preferences respected

📰 Journalism-Specific Features

• Article type badges: Investigation, Breaking, Profile, Analysis, Update
• Multi-author collaboration bylines with fursona support for team investigations
• Enhanced bylines with author photos, bios, social links, and location
• Podcast episode embeds with platform support (Spotify, Apple, YouTube, custom audio)
• Reading progress bar for longform articles
• Table of contents (auto-generated from headings)
• Publication and update timestamps with clear visual distinction
• Source citations and footnotes support
• Correction and update notices with timestamps
• Content warnings for sensitive material with collapsible sections

🔍 Investigative Tools

• Whistleblower tip submission prominently featured in header and footer
• Secure submission messaging with encryption indicators
• Key findings boxes for investigation summaries
• Methodology sections for transparency
• Timeline components for chronological stories
• Interactive data visualizations: Comparison tables, bar charts, stat cards, progress indicators
• Investigation series tracker with progress tracking and article navigation
• Related investigations sidebar for contextual cross-referencing
• Data source attribution cards with verification badges
• Side-by-side comparisons and percentage breakdowns
• Breaking news alerts with dismissible banners and localStorage persistence
• Document comparison tool for side-by-side policy/document analysis with change highlighting

📝 Content Components

• Pull quotes with attribution
• Callout boxes (info, warning, important, tip)
• Sidenotes and margin notes
• Interview-style blockquotes
• Image credits and captions
• Spoiler/sensitive content toggles
• Drop caps for feature stories
• Section dividers with icons

🏠 Homepage Layout

• Featured story hero with large images and excerpts
• Top stories section with numbered sidebar
• Category-based organization with color coding
• Latest news list with thumbnails
• Newsletter signup call-to-action
• Load more functionality

⚡ Performance

• Lazy loading for images and content
• Font optimization with font-display: swap
• Content visibility hints for browser optimization
• Minimal repaints and efficient animations
• Mobile-first responsive design
• Print-optimized styles for article archiving

🎨 Customization Options

Configure in Ghost Admin → Settings → Design:

Typography:

• Title font: Modern sans-serif, Elegant serif, or Newspaper classic
• Body font: Modern sans-serif or Elegant serif

Display Options:

• Show/hide author information
• Show/hide reading time
• Show/hide related posts
• Show/hide publication dates
• Show/hide update dates
• Enable/disable table of contents
• Enable/disable reading progress bar

Journalism Features:

• Whistleblower tip link (customize URL)
• Color scheme: Dark mode, Light mode, or Auto

Installation

Quick Install

1. Download the latest release: greymuzzle.zip
2. Log into Ghost Admin → Settings → Design
3. Click "Upload theme" and select the zip file
4. Click "Activate"

From Source

# Clone the repository
git clone https://github.com/yourusername/greymuzzle.git
cd greymuzzle

# Install dependencies
npm install

# Build the theme
npm run zip

# Upload dist/greymuzzle.zip to Ghost

Development

Prerequisites

• Node.js 18+
• npm or yarn
• Ghost 5.0+ (compatible with 6.0)

Setup

# Install dependencies
npm install

# Run build & watch for changes
npm run dev

# Build for production
npm run zip

# Run Ghost theme validator
npm test

File Structure

greymuzzle/
├── assets/
│   └── css/
│       ├── general/           # Base styles, variables, accessibility
│       │   ├── vars.css       # Design system (colors, typography, spacing)
│       │   ├── accessibility.css
│       │   ├── fonts.css
│       │   └── performance.css
│       ├── journalism/        # Journalism-specific components
│       │   ├── components.css # Bylines, citations, callouts
│       │   └── longform.css   # TOC, timelines, key findings
│       ├── site/              # Site structure
│       │   ├── navigation.css # Header, footer, menus
│       │   ├── header.css
│       │   └── ...
│       └── blog/              # Content layouts
│           ├── homepage.css   # News layout, story grids
│           ├── post.css
│           └── ...
├── partials/                  # Reusable template components
├── default.hbs                # Main layout
├── index.hbs                  # Homepage
├── post.hbs                   # Article template
├── page.hbs                   # Static pages
└── package.json

Usage Guide

Setting Up Categories

Create tags in Ghost Admin for automatic styling:

• investigation → Gold badge
• breaking → Red badge with pulse animation
• profile → Mint green badge
• analysis → Purple badge
• update → Teal badge

Creating Investigative Articles

1. Create a new post
2. Add tag investigation as primary tag
3. The article will automatically include:
   • Investigation badge
   • Whistleblower CTA at bottom
   • Key findings box (add in content)
   • Source citations section

Adding Content Components

Use Ghost's content editor with HTML cards:

Pull Quote:

<div class="pullquote">
    Your compelling quote here
    <span class="pullquote-attribution">Source Name</span>
</div>

Callout Box:

<div class="callout callout-important">
    <div class="callout-title">Important</div>
    <p>Your important message here</p>
</div>

Key Findings:

<div class="key-findings">
    <h3 class="key-findings-title">Key Findings</h3>
    <ul>
        <li>Finding one</li>
        <li>Finding two</li>
        <li>Finding three</li>
    </ul>
</div>

Timeline:

<div class="timeline">
    <div class="timeline-item">
        <div class="timeline-date">Jan 2024</div>
        <div class="timeline-marker"></div>
        <div class="timeline-content">
            <div class="timeline-title">Event Title</div>
            <p>Event description</p>
        </div>
    </div>
</div>

Whistleblower Tips Page

1. Create a static page at /submit-tip
2. Add secure submission form or instructions
3. Configure link in theme settings: /submit-tip

Newsletter Integration

The homepage includes a newsletter signup section. Connect your Ghost newsletter in Settings → Memberships.

Multi-Author Bylines

The theme automatically displays all authors for multi-author articles with enhanced cards showing:

• Author photos and bios
• Social media links (website, Twitter)
• Location information
• Fursona species (if configured in author custom fields)

To add fursona information to an author, add custom fields:

• fursona_species: Species name (e.g., "wolf", "fox", "dragon")
• fursona_name: Character name

Podcast Embeds

Embed podcast episodes using the partial:

{{> podcast-embed
    platform="spotify"
    episode_id="your-episode-id"
    title="Episode Title"
    show="Your Podcast Name"
    description="Episode description"
    duration="45 min"
    spotify_url="https://..."
    apple_url="https://..."
}}

Supported platforms:

• spotify: Spotify embeds
• apple: Apple Podcasts
• youtube: YouTube videos
• custom: Custom HTML5 audio player with direct MP3 link

The component includes:

• Responsive podcast players
• Platform links (Spotify, Apple, Google, RSS)
• Optional transcript with toggle
• Mobile-optimized design

Data Visualizations

The theme includes comprehensive data visualization components for presenting investigative data:

Stat Card - Highlight key metrics:

{{> data-viz
    type="stat-card"
    value="47%"
    label="Increase in Reports"
    trend="up"
    context="Year over year"
    icon="📈"
}}

Comparison Table - Side-by-side data comparison:

{{> data-viz
    type="comparison-table"
    title="Convention Safety Measures"
    columns=tableColumns
    rows=tableData
    source="Public Records Request 2024"
}}

Bar Chart - CSS-based horizontal bar charts:

{{> data-viz
    type="bar-chart"
    title="Attendance by Convention"
    items=chartData
    source="Convention Reports"
}}

Progress Indicator - Track investigation completion:

{{> data-viz
    type="progress"
    label="Investigation Progress"
    percentage="73"
    status="ongoing"
}}

Data Source Card - Attribution with verification status:

{{> data-viz
    type="source-card"
    source="Public Records Request"
    date="2024-11-15"
    reliability="verified"
    description="Official safety reports"
    link="https://..."
}}

Metrics Grid - Display multiple key metrics:

{{> data-viz
    type="metrics-grid"
    title="Investigation Impact"
    metrics=metricsData
}}

Side-by-Side Comparison:

{{> data-viz
    type="side-by-side"
    title="Before vs After"
    leftTitle="Original Policy"
    leftContent=beforeContent
    rightTitle="Updated Policy"
    rightContent=afterContent
}}

Percentage Breakdown - Visual percentage distribution:

{{> data-viz
    type="percentage-breakdown"
    title="Report Categories"
    segments=segmentData
    source="2024 Annual Report"
}}

Investigation Series

Track multi-part investigative series with progress indicators and navigation:

{{> investigation-series
    series_name="Convention Safety Investigation"
    series_slug="convention-safety"
    current_part=2
    total_parts=5
    status="ongoing"
    description="A comprehensive investigation into safety practices"
    articles=seriesArticles
    previous_article=prevArticle
    next_article=nextArticle
}}

Features:

• Progress bar showing series completion
• Numbered list of all parts (published and upcoming)
• Key timeline events
• Previous/Next navigation
• Subscribe to updates option

Related Investigations

Link to related investigative coverage:

{{> related-investigations
    title="Related Coverage"
    investigations=relatedArticles
    view_all_url="/tag/investigation"
}}

Variants:

• Default: Full cards with images and excerpts
• Compact: class="compact-variant" - Smaller cards in rows
• Sidebar: class="sidebar-variant" - Sticky sidebar positioning

Breaking News Alerts

Display urgent breaking news banners at the top of the page:

{{> breaking-news-banner
    headline="Major Development in Convention Safety Investigation"
    url="/post/convention-safety-update"
    priority="urgent"
    timestamp="2025-11-24T10:00:00"
}}

Priority levels:

• urgent: Red, highly visible (breaking news, safety alerts)
• important: Orange, prominent (major updates)
• info: Blue, informational (general announcements)

Features:

• Dismissible with localStorage persistence (24-hour memory)
• Auto-dismiss after 30 seconds for info banners
• Smooth slide-down animation
• Accessible with ARIA live regions
• Adjusts page layout automatically

Document Comparison

Compare document versions side-by-side with change highlighting:

{{> document-compare
    title="Policy Comparison"
    left_title="Original Policy (2023)"
    left_content=originalPolicy
    right_title="Revised Policy (2024)"
    right_content=revisedPolicy
    changes_summary=changesList
    source="Public Records Request"
    verification="verified"
}}

Change highlighting:

• <mark class="added">new text</mark> - Green highlight for additions
• <mark class="removed">old text</mark> - Red strikethrough for deletions
• <mark class="modified">changed text</mark> - Yellow highlight for modifications

Features:

• Responsive side-by-side layout (stacks on mobile)
• Synchronized scrolling between documents
• Change summary with visual indicators
• Source attribution with verification badges
• Download links for original documents
• Print-optimized styles

Color System

Journalism Semantic Colors

• Investigation: #d4af37 (Gold) - In-depth reporting
• Breaking: #ff6b6b (Red) - Urgent news
• Update: #4ecdc4 (Teal) - Story updates
• Correction: #ffa94d (Orange) - Corrections
• Profile: #95e1d3 (Mint) - People features
• Analysis: #aa96da (Purple) - Opinion/analysis
• Whistleblower: #f38181 (Coral) - Tips/sources

Brand Colors

Customize in /assets/css/general/vars.css:

--brand-primary: #7c9ebd;   /* Links, accents */
--brand-secondary: #9b8fb5; /* Secondary elements */
--brand-tertiary: #8ba89f;  /* Tertiary elements */

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile browsers (iOS Safari 14+, Chrome Mobile)

Performance Targets

• Lighthouse Score: 95+ on mobile and desktop
• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1
• Time to Interactive: < 3.5s

Contributing

We welcome contributions! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test with npm test
5. Submit a pull request

Roadmap

• Multi-author collaboration bylines ✅
• Podcast episode embeds ✅
• Interactive data visualization templates ✅
• Investigation series tracker ✅
• Public database browser integration
• Advanced search with filters
• Comment moderation tools
• Species-themed category icons

Credits

• Base theme: Dope by Ghost
• Built for: Greymuzzle Investigative Journalism
• Fonts: Inter, Lora, Playfair Display

License

Copyright (c) 2025 Greymuzzle - Released under the MIT license.

Based on Dope theme - Copyright (c) 2013-2025 Ghost Foundation

Support

• Documentation: https://greymuzzle.net/theme-docs
• Issues: https://github.com/yourusername/greymuzzle/issues
• Community: https://greymuzzle.net/community

---

Made with 🐾 for the furry journalism community