Improvements to responsiveness on menu and index page

README.md

@@ -23,7 +23,7 @@ To contribute to this project, use the contact form at E2C.how to request edit a
 - **Custom CSS styling** with E2C yellow branding (#F4D03F)
 
 ### Content Types
-- **Case Studies** (`/content/case-studies/`) - 24 case studies with logos and descriptions
+- **Case Studies** (`/content/case-studies/`) - Case studies with logos and descriptions
 - **Legal Snippets** (`/content/legal-snippets/`) - Legal documents and frameworks
 - **Resources** (`/content/resources/`) - Media, education, and primer content
 - **Main Pages** - Homepage, contact, add-your-story with integrated forms

layouts/_default/baseof.html

@@ -51,7 +51,7 @@
             padding: 16px 0;
             position: sticky;
             top: 0;
-            z-index: 100;
+            z-index: 1001;
             min-height: 80px;
         }
         
@@ -108,6 +108,66 @@
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         }
         
+        .mobile-menu-toggle {
+            display: none;
+            flex-direction: column;
+            background: rgba(255, 255, 255, 0.9);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 8px;
+            padding: 8px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            backdrop-filter: blur(8px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            gap: 4px;
+        }
+        
+        .mobile-menu-toggle:hover {
+            background: var(--e2c-yellow);
+            border-color: var(--e2c-yellow);
+        }
+        
+        .hamburger-line {
+            width: 20px;
+            height: 2px;
+            background: var(--text-primary);
+            transition: all 0.3s ease;
+            border-radius: 1px;
+        }
+        
+        .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
+            transform: rotate(45deg) translate(5px, 5px);
+        }
+        
+        .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
+            opacity: 0;
+        }
+        
+        .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
+            transform: rotate(-45deg) translate(7px, -6px);
+        }
+        
+        .mobile-menu-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.3);
+            z-index: 99;
+            transition: opacity 0.3s ease;
+        }
+        
+        .mobile-menu-overlay.active {
+            display: block;
+            opacity: 1;
+        }
+        
+        body.menu-open {
+            overflow: hidden;
+        }
+        
         main {
             padding: 48px 0;
             min-height: calc(100vh - 200px);
@@ -361,11 +421,17 @@
             margin: 2rem 0;
             display: grid;
             gap: 12px;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            grid-template-columns: repeat(3, 1fr);
             max-width: 800px;
             margin-left: auto;
             margin-right: auto;
         }
+        
+        @media (max-width: 900px) {
+            .intro-section ul {
+                grid-template-columns: 1fr;
+            }
+        }
 
         .intro-section ul li {
             background: var(--e2c-yellow);
@@ -567,15 +633,44 @@
         }
 
         @media (max-width: 768px) {
+            .mobile-menu-toggle {
+                display: flex;
+            }
+            
             .nav-links {
-                gap: 6px;
+                position: fixed;
-                flex-wrap: wrap;
+                top: 80px;
+                right: -100%;
+                width: 280px;
+                height: calc(100vh - 80px);
+                background: rgba(255, 255, 255, 0.98);
+                backdrop-filter: blur(12px);
+                border-left: 1px solid var(--border);
+                flex-direction: column;
+                gap: 0;
+                padding: 24px;
+                transition: right 0.3s ease;
+                z-index: 1002;
+                box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
+            }
+            
+            .nav-links.active {
+                right: 0;
+            }
+            
+            .nav-links li {
+                width: 100%;
+                margin-bottom: 16px;
             }
             
             .nav-links a {
-                padding: 6px 10px;
+                display: block;
-                font-size: 12px;
+                width: 100%;
-                border-radius: 16px;
+                padding: 16px 20px;
+                font-size: 16px;
+                border-radius: 12px;
+                text-align: center;
+                margin: 0;
             }
             
             .logo {
@@ -590,7 +685,11 @@
             
             .site-header {
                 padding: 8px 0;
-                min-height: 48px;
+                min-height: 64px;
+            }
+            
+            nav {
+                position: relative;
             }
             
             .hero h1 {
@@ -787,6 +886,11 @@
                 <a href="/" class="logo">
                     <img src="/img/yellow_e2c.png" alt="Exit to Community" />
                 </a>
+                <button class="mobile-menu-toggle" aria-label="Toggle mobile menu">
+                    <span class="hamburger-line"></span>
+                    <span class="hamburger-line"></span>
+                    <span class="hamburger-line"></span>
+                </button>
                 <ul class="nav-links">
                     <li><a href="/case-studies/">Case Studies</a></li>
                     <li><a href="/legal-snippets/">Legal Snippets</a></li>
@@ -797,6 +901,8 @@
         </div>
     </header>
 
+    <div class="mobile-menu-overlay"></div>
+
     <main>
         <div class="container">
             {{ block "main" . }}{{ end }}
@@ -837,5 +943,57 @@
             </div>
         </div>
     </footer>
+    
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+            const navLinks = document.querySelector('.nav-links');
+            const overlay = document.querySelector('.mobile-menu-overlay');
+            const body = document.body;
+            
+            function toggleMenu() {
+                const isActive = mobileMenuToggle.classList.contains('active');
+                
+                if (isActive) {
+                    mobileMenuToggle.classList.remove('active');
+                    navLinks.classList.remove('active');
+                    overlay.classList.remove('active');
+                    body.classList.remove('menu-open');
+                } else {
+                    mobileMenuToggle.classList.add('active');
+                    navLinks.classList.add('active');
+                    overlay.classList.add('active');
+                    body.classList.add('menu-open');
+                }
+            }
+            
+            function closeMenu() {
+                mobileMenuToggle.classList.remove('active');
+                navLinks.classList.remove('active');
+                overlay.classList.remove('active');
+                body.classList.remove('menu-open');
+            }
+            
+            if (mobileMenuToggle && navLinks && overlay) {
+                mobileMenuToggle.addEventListener('click', toggleMenu);
+                
+                // Close menu when clicking on overlay
+                overlay.addEventListener('click', closeMenu);
+                
+                // Close menu when clicking on a link
+                const navLinksItems = navLinks.querySelectorAll('a');
+                navLinksItems.forEach(link => {
+                    link.addEventListener('click', closeMenu);
+                });
+                
+                // Close menu on escape key
+                document.addEventListener('keydown', function(event) {
+                    if (event.key === 'Escape') {
+                        closeMenu();
+                    }
+                });
+            }
+        });
+    </script>
 </body>
 </html>