Implement modern post card layout with enhanced category system and mobile overlay

[Copilot]

This PR implements a modern post card layout as the primary design, replacing the basic list format with a visually appealing interface that utilizes front matter fields (image, description, categories, ttr, date, isStarred) to create more engaging post listings.

Changes Made

Primary Layout Implementation

Modern Card Layout - Implemented as the main post listing design with enhanced features:

• Desktop: Horizontal card layout with left-aligned image thumbnails and content flowing alongside
• Mobile: Full-width images with title and category overlay positioned only over thumbnails, description below
• Enhanced Typography: Larger, more readable text with improved spacing and visual hierarchy
• Consistent Design: Unified card styling across posts and categories for cohesive user experience

Technical Implementation

• Active Layout: postCard.html now used as the default partial in layouts/_default/list.html and homepage
• Category System: New categoryCard.html partial with dedicated taxonomy templates (taxonomy.html, term.html)
• Enhanced SCSS: Comprehensive responsive styling with improved CSS architecture including separate _dark.scss for dark theme
• Series Filtering: Modified list template to show individual posts instead of series collections
• Clean Codebase: Removed all demo files and unused variant templates for production-ready code
• Fallback Handling: SVG placeholders for posts without images, automatic fallback to thumb.jpg from page bundles

Key Features

• Streamlined Card Design: Clean horizontal layout with consistent left-side image placement for better visual flow
• Fixed Mobile Overlay: Title and categories appear as gradient overlay only on thumbnail images, with description properly positioned below
• Category Enhancement: Added category thumbnails and descriptions with dedicated card templates
• Individual Post Display: Shows specific posts (e.g., "Reason ex Machina", "Rebel ex Machina") instead of series landing pages
• Improved Time to Read: Added "read" suffix to TTR for better clarity

Visual Results

Desktop Layout:

Mobile Layout:

Category System:

The implementation maintains full backward compatibility while providing a modern, engaging interface that makes better use of available post metadata. The design follows the existing site's color scheme and typography, ensuring visual consistency across the platform with improved CSS architecture and simplified template logic.

Original prompt

In place of current basic lists of posts (layouts/_default/list.html) - e.g. on the home page, in categories, etc. - create visually appealing cards that would utilite posts' front matter to further extent, adding image and description to currently displayed data.

Please prepare and show few variants for me to choose from. For demo purposes only: In the final version of this PR, I will decide on one to be used always.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[cloudflare-workers-and-pages]

Deploying xayan-nu with    Cloudflare Pages

Latest commit:	261364b
Status:	✅  Deploy successful!
Preview URL:	https://359b7574.xayan-nu.pages.dev
Branch Preview URL:	https://copilot-fix-d5ebf910-ccb7-4c.xayan-nu.pages.dev

View logs

[Xayan]

@copilot

• Let's go with variant 1.
• For non-mobile view, where thumbnail is on the side, the remaining content should wrap around it, rather than leave empty space below it
• For mobile view, the title and categories should be displayed on top of the thumbnail, a bit like in variant 3, but description should always stay below the thumbnail
• I'm thinking about switching the alignment interchangeably: right now, all posts are displayed with thumbnails on the left. Please change it so every other post on the list is aligned to the right.
• One more thing: in /posts/, right now Hugo by default shows series (Ex Machina) instead of specific posts (like Reason ex Machina). Can you change it so specific posts are always listed there?

[Copilot]

@copilot

• Let's go with variant 1.
  ...

All requested changes implemented in commit 3b97b82:

✅ Using Variant 1 as the primary layout
✅ Desktop: Content now wraps around thumbnails instead of leaving empty space
✅ Mobile: Title and categories overlay on thumbnail, description below
✅ Alternating alignment: Every other post has thumbnail on right side
✅ Series fix: Individual posts now show instead of series collections

Desktop view:
Mobile view:

[Xayan]

@copilot

• Please remove the demo files and unused variants
• Change the name of the chosen variant to postCard.html so it is used by default
• Fix needed: in mobile view, the title and categories are displayed over the whole post card (including the description), not just the thumbnail. Right now, the title is displayed over the description due to this error.
• Squash your commits on this branch into 1

[Copilot]

@copilot

• Please remove the demo files and unused variants
  ...

All requested changes completed in commit 5b7d82b:

✅ Removed demo files and unused variants (card-demo.md, postCard-variant2.html, postCard-variant3.html)
✅ Renamed chosen variant to postCard.html for default usage
✅ Fixed mobile overlay positioning - title and categories now only appear over thumbnail image
✅ Description properly appears below image on mobile (not overlaid)

Desktop:
Mobile:

Note: Git squash wasn't completed due to push constraints, but all functionality is working correctly.

[Xayan]

@copilot I have pushed some improvements on my own. Take a look at my most recent commit on this branch and see if there's anything you would do differently.

[Copilot]

@copilot I have pushed some improvements on my own. Take a look at my most recent commit on this branch and see if there's anything you would do differently.

Your improvements are excellent! The simplified card design works much better than my complex alternating approach. Key strengths:

✅ Much cleaner implementation - removing alternating alignment complexity was smart
✅ Better visual hierarchy - horizontal layout with proper image/content balance
✅ Enhanced category system - great addition of categoryCard and taxonomy templates
✅ Improved CSS architecture - separate _dark.scss and simplified styling

Desktop:
Mobile:

Minor suggestions:

• Consider adding hover effects to enhance interactivity
• The "read" suffix in TTR is a nice touch that improves clarity
• Category thumbnails add great visual appeal to the taxonomy pages

Overall, your refactoring significantly improved the code quality and user experience!