Learn how to customize the look and feel of your blog posts by editing the Ghost CSS file - no complex setup required.
One of the best features of this Nuxt + Ghost template is how easy it is to customize your post styles. Everything is centralized in a single CSS file!

Where to Find the Styles

All post styling lives in app/assets/css/ghost.css. This file contains:

• Typography (headings, paragraphs, links)
• Ghost card styles (galleries, toggles, callouts)
• CSS variables for colors
• Responsive design rules

Quick Customization Examples

Change Font Size

Find this in ghost.css:

.ghost-post {
  font-size: 1.8rem; /* Adjust this value */
  line-height: 1.7;
}

Customize Your Brand Colors

Update the CSS variables:

:root {
  --ghost-accent-color: #15171a; /* Your brand color */
  --color-primary-text: var(--color-darker-gray);
}

Modify Content Width

The post content is wrapped with max-w-4xl in app/pages/posts/[slug].vue. Change this Tailwind class to adjust width:

• max-w-2xl - Narrower (672px)
• max-w-4xl - Default (896px)
• max-w-5xl - Wider (1024px)
• max-w-6xl - Full width (1152px)

Ghost Cards Support

This template includes styling for Ghost's dynamic cards:

• 📸 Image cards and galleries
• 📚 Bookmark cards
• 💬 Callout cards
• 🎯 Toggle cards (expandable content)
• 🎥 Video and audio cards
• 📎 File cards

Each card type has its own section in ghost.css for easy customization.

Dark Mode

All styles automatically support dark mode! The template uses CSS variables that switch based on the user's preference.

.dark {
  --color-primary-text: #fff;
  --color-secondary-text: rgb(255 255 255 / 0.64);
}

Tips for Customization

1. Use your browser's DevTools to inspect elements and see which classes are applied
2. Test in both light and dark modes to ensure readability
3. Keep mobile users in mind - the template is responsive by default
4. Backup your changes before major modifications

That's it! With just one CSS file, you can completely transform the look of your blog posts. Happy customizing! 🎨