Add cover image support to blog posts

- Add cover_image front matter field to latest blog post
- Create sample SVG cover image for SeedFolder evolution post
- Update post.html layout to display cover images when present
- Add responsive CSS styles for cover images with mobile optimization
- Include hover effects and proper styling for desktop and mobile views

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: solrevdev

_layouts/post.html

@@ -4,6 +4,11 @@
 ---
 
 <div class="post">
+    {% if page.cover_image %}
+    <div class="post-cover-image">
+        <img src="{{ site.baseurl }}{{ page.cover_image }}" alt="{{ page.title }}" class="cover-image">
+    </div>
+    {% endif %}
     <h1 class="post-title">{{ page.title }}</h1>
     <span class="post-date">{{ page.date | date_to_string }}</span>
     {{ content }}

_posts/2025-08-20-evolving-seedfolder-with-github-copilot.md

@@ -3,6 +3,7 @@ layout: post
 title: Evolving SeedFolder with GitHub Copilot - From Personal Tool to Multi-Template System
 description: How GitHub Copilot helped transform a simple dotfile copier into a comprehensive project scaffolding tool with multiple templates and cross-platform support
 summary: How I used GitHub Copilot to evolve SeedFolder from a dotfile copier into a flexible, multi-template scaffolding tool with cross-platform support, better UX, and CI improvements.
+cover_image: /images/seedfolder-evolution-cover.svg
 tags:
 - dotnet-global-tools
 - github-copilot

images/seedfolder-evolution-cover.svg

@@ -22,3 +22,44 @@ kbd {
     word-break: inherit;
     word-wrap: inherit;
 }
+
+/* Cover image styles for blog posts */
+.post-cover-image {
+    margin-bottom: 2rem;
+    margin-top: -1rem; /* Pull up to reduce spacing */
+}
+
+.cover-image {
+    width: 100%;
+    height: auto;
+    max-height: 400px;
+    object-fit: cover;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transition: transform 0.3s ease;
+}
+
+.cover-image:hover {
+    transform: scale(1.02);
+}
+
+/* Responsive adjustments for mobile */
+@media (max-width: 768px) {
+    .post-cover-image {
+        margin-bottom: 1.5rem;
+        margin-left: -1rem;
+        margin-right: -1rem;
+    }
+
+    .cover-image {
+        border-radius: 0;
+        max-height: 250px;
+    }
+}
+
+/* Small mobile adjustments */
+@media (max-width: 480px) {
+    .cover-image {
+        max-height: 200px;
+    }
+}