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>
20 lines
539 B
Plaintext
20 lines
539 B
Plaintext
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ title }} | Firefrost Gaming</title>
|
|
<meta name="description" content="{{ description }}">
|
|
<link rel="stylesheet" href="/src/css/firefrost.css">
|
|
<link rel="stylesheet" href="/src/css/mobile-responsive.css">
|
|
|
|
<!-- Fire/Frost/Arcane Brand Colors -->
|
|
<style>
|
|
:root {
|
|
--fire: #FF6B35;
|
|
--frost: #4ECDC4;
|
|
--arcane: #A855F7;
|
|
--gold: #FFD700;
|
|
--dark: #0F0F1E;
|
|
}
|
|
</style>
|
|
</head>
|