docs: Add development documentation for cover images

- Create claude.md with cover image implementation notes
- Add GitHub Copilot instructions with local development guidelines
- Document image URL behavior during local development
- Include responsive design breakpoints and testing procedures
- Remove test file after validation

Key insight: Use localhost/127.0.0.1 domains for proper image display
during local development, as relative paths work with file:// protocol
but absolute paths fail without a running server.

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

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

Author: solrevdev

.github/copilot-instructions.md

@@ -0,0 +1,57 @@
+# GitHub Copilot Instructions
+
+## Project Overview
+This is a Jekyll-based static blog for solrevdev.com using the Hyde theme with custom modifications.
+
+## Key Development Guidelines
+
+### Blog Posts
+- Located in `_posts/` directory
+- Use Jekyll front matter with these fields:
+  - `layout: post`
+  - `title: [Post Title]`
+  - `description: [SEO description]`
+  - `summary: [Brief summary]`
+  - `cover_image: [/images/filename.ext]` (optional)
+  - `tags: [array of tags]`
+
+### Cover Images
+- Store in `/images/` directory
+- Use `cover_image: /images/filename.ext` in front matter
+- Supported formats: SVG (preferred), PNG, JPG
+- Recommended dimensions: 800x400px
+- Automatically responsive across desktop, tablet, and mobile
+
+### Local Development Image Issues
+**Important**: During local development, images may not display properly due to URL resolution:
+
+**Solutions**:
+1. **Use Jekyll server**: `bundle exec jekyll serve --host 127.0.0.1 --port 4000`
+2. **Use localhost domain**: `http://localhost:4000` or `http://127.0.0.1:4000`
+3. **Relative paths work**: with file:// protocol for testing
+
+**Don't use**:
+- Absolute paths (`/images/...`) with file:// protocol - will fail
+- localhost URLs without running Jekyll server
+
+### Styling
+- Custom styles in `public/css/custom.scss`
+- Uses SCSS with Jekyll compilation
+- Responsive breakpoints: 768px (tablet), 480px (mobile)
+- Cover images have hover effects and responsive sizing
+
+### File Structure
+```
+├── _posts/           # Blog posts
+├── _layouts/         # Jekyll layouts
+├── _includes/        # Jekyll includes
+├── public/css/       # SCSS stylesheets
+├── images/           # Blog post images
+├── claude.md         # Claude development notes
+└── .github/          # GitHub configuration
+```
+
+### Testing
+- Use `test-cover-image.html` for image URL testing
+- Test responsive design at 375px (mobile), 768px (tablet), 1200px+ (desktop)
+- Screenshots saved in `.playwright-mcp/` directory

.playwright-mcp/cover-image-test-desktop.png

@@ -0,0 +1,40 @@
+# Claude Development Notes
+
+## Blog Cover Images
+
+### Implementation
+- Added `cover_image` front matter field to blog posts
+- Updated `_layouts/post.html` to display cover images when present
+- Added responsive CSS styles in `public/css/custom.scss` for proper display across devices
+
+### Image URL Behavior During Local Development
+
+**Key Finding**: When developing locally, images sometimes do not display properly due to path resolution issues.
+
+**Working Solutions**:
+1. **Relative paths** (`./images/filename.svg`) - ✅ Works with file:// protocol
+2. **File protocol** (`file:///full/path/to/image`) - ✅ Works for local testing
+3. **Jekyll server** with localhost/127.0.0.1 - ✅ Works when Jekyll server is running
+
+**Non-working Solutions**:
+1. **Absolute paths** (`/images/filename.svg`) - ❌ Fails with file:// protocol
+2. **localhost URLs** without server - ❌ Connection refused when Jekyll isn't running
+3. **127.0.0.1 URLs** without server - ❌ Connection refused when Jekyll isn't running
+
+### Development Workflow
+For local development, either:
+1. Use Jekyll server: `bundle exec jekyll serve --host 127.0.0.1 --port 4000`
+2. Use relative paths in Jekyll templates with `{{ site.baseurl }}` prefix
+3. Test with file:// protocol using relative paths for quick validation
+
+### CSS Implementation
+- Responsive design with different max-heights for desktop (400px), tablet (250px), and mobile (200px)
+- Hover effects with subtle scale transform
+- Proper shadow and border-radius for visual appeal
+- Mobile-specific margin adjustments for better display
+
+### Cover Image Guidelines
+- Use SVG format for scalable graphics where possible
+- Recommended dimensions: 800x400px for optimal display
+- Include descriptive alt text for accessibility
+- Store images in `/images/` directory