75ab40a4e7
WHAT WAS DONE: Created mobile-responsive.css with fixes for all mobile layout issues observed in testing on actual mobile device. MOBILE FIXES (up to 768px): - All 2-column and 3-column grids stack vertically - Font sizes reduced (h1: 2.5rem, h2: 2rem, h3: 1.5rem) - Excessive padding reduced (100px → 40px, 80px → 40px, etc.) - Footer columns stack vertically instead of side-by-side overflow - Fire/Frost path cards stack on mobile - Why Firefrost cards (Security/Community/Legacy) stack - Buttons sized appropriately for mobile (15px 30px) - Images constrained to 100% width - Horizontal overflow prevented TABLET FIXES (769px - 1024px): - 3-column grids become 2-column - Moderate padding reduction - Font size optimization INTEGRATION: - Added to head.njk so it applies to all pages site-wide - Uses media queries with !important to override inline styles - Targets specific style patterns from our inline-styled pages TESTING: Based on actual mobile screenshots showing: - Fire/Frost cards cutting off (Image 4) - Why Firefrost cards side-overflow (Image 3) - Footer 3-column overflow (Images 1-2) STATUS: Ready for mobile testing after deploy Signed-off-by: Claude (Chronicler #56) <claude@firefrostgaming.com>
Firefrost Gaming 11ty Website - Test Migration
Created: April 2, 2026
Purpose: 2-hour test of Ghost CMS → 11ty static site migration
Status: Ready to build and test
🚀 Quick Start
On Ghost VPS (as architect):
# Navigate to the test directory
cd /path/to/firefrost-operations-manual/website-11ty-test
# Install dependencies
npm install
# Build the site
npx @11ty/eleventy
# Serve locally for testing
npx @11ty/eleventy --serve
The site will be available at http://localhost:8080
📁 Project Structure
website-11ty-test/
├── _includes/
│ ├── layouts/
│ │ └── base.njk # Master layout
│ ├── head.njk # <head> partial with Fire/Frost branding
│ └── footer.njk # Footer with all links
├── src/
│ └── css/
│ └── firefrost.css # Minimal Fire/Frost/Arcane styles
├── assets/
│ └── images/ # (empty for now - add images here)
├── _site/ # Build output (created after npm run build)
├── .eleventy.js # 11ty config (CRITICAL for CSS/images)
├── package.json # Dependencies
├── index.njk # Homepage
└── README.md # This file
🔧 Configuration
Critical .eleventy.js Config
The .eleventy.js file contains critical passthrough copy settings from Gemini:
eleventyConfig.addPassthroughCopy("src/css");
eleventyConfig.addPassthroughCopy("assets");
Without this, CSS and images won't copy to the build!
✅ What's Included
- ✅ Complete layout system (master + head + footer)
- ✅ Homepage with hero and path sections
- ✅ Fire/Frost/Arcane branding colors
- ✅ Responsive footer grid
- ✅ All social links from Ghost
- ✅ Clean URLs (no .html extensions)
🎯 Test Checklist
Phase 1: Build (10 min)
- npm install runs successfully
- npx @11ty/eleventy builds without errors
- _site directory created with files
Phase 2: Local Test (10 min)
- Site loads at localhost:8080
- Fire/Frost branding visible
- Footer displays correctly
- All links work
- Mobile responsive (test with browser dev tools)
Phase 3: Deploy Test (20 min)
- Push to Git repo
- Connect Cloudflare Pages
- Set build command:
npx @11ty/eleventy - Set output directory:
_site - Set NODE_VERSION environment variable:
20 - Deploy to test.firefrostgaming.com
Phase 4: Evaluate (20 min)
- Compare to Ghost site visually
- Test all CTAs and links
- Check mobile responsive
- Verify Fire/Frost branding intact
🛑 Abort Criteria (From Gemini)
Pull the plug if:
- 15+ minutes fighting build errors
- Need to rewrite CSS to match Ghost
- Mobile navigation breaks and can't fix in 10 minutes
📋 Next Steps (If Test Succeeds)
-
Port remaining 6 pages:
- About
- Servers
- Subscribe
- Contact
- Terms
- Privacy
-
Download images from Ghost to /assets/images/
-
Set up Formspree for contact form
-
Add basic SEO meta tags
-
Deploy to production
-
Spin down Ghost
🔗 Resources
- 11ty Docs: https://www.11ty.dev/docs/
- Cloudflare Pages: https://pages.cloudflare.com/
- Formspree: https://formspree.io/
- Gemini Consultation: docs/planning/gemini-consultations/ghost-vs-static-website-2026-04-02.md
Fire + Frost + Foundation = Where Love Builds Legacy 🔥❄️⚡