update mobile view

Author: liuning0820

_layouts/default.html

@@ -22,10 +22,10 @@
         <header class="gh-head">
             <div class="gh-head-inner">
                 <div class="gh-head-brand">
-                    <a href="/">
-                        <img src="/images/work-for-free.png" alt="Work For Free">
-
+                    <a href="/" class="gh-navigation-logo">
+                        <img src="/images/work-for-free.png" alt="Work For Free" class="gh-navigation-logo is-title">
                     </a>
+                    <button class="mobile-menu-toggle" aria-label="Menu"></button>
                 </div>
 
                 <div class="gh-head-menu">
@@ -127,5 +127,39 @@ <h3>Subscribe to get updates</h3>
             </div>
         </footer>
     </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
+            const mobileMenu = document.querySelector('.gh-head-menu');
+            
+            if (mobileMenuToggle) {
+                mobileMenuToggle.addEventListener('click', function() {
+                    mobileMenu.classList.toggle('active');
+                    this.setAttribute('aria-expanded', 
+                        mobileMenu.classList.contains('active') ? 'true' : 'false');
+                    
+                    // Change toggle icon based on state
+                    if (mobileMenu.classList.contains('active')) {
+                        this.textContent = '✕';
+                    } else {
+                        this.textContent = '';
+                        this.classList.remove('open');
+                    }
+                });
+            }
+            
+            // Close mobile menu when clicking outside
+            document.addEventListener('click', function(event) {
+                if (!event.target.closest('.gh-head-menu') && 
+                    !event.target.closest('.mobile-menu-toggle') && 
+                    mobileMenu.classList.contains('active')) {
+                    mobileMenu.classList.remove('active');
+                    mobileMenuToggle.setAttribute('aria-expanded', 'false');
+                    mobileMenuToggle.textContent = '';
+                }
+            });
+        });
+    </script>
 </body>
 </html>

css/main.css

@@ -55,6 +55,7 @@ body {
   margin: 0 0 1.5rem 0;
   display: flex;
   align-items: center;
+  position: relative;
 }
 
 .gh-head-brand a {
@@ -63,10 +64,33 @@ body {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  max-width: 100%;
+}
+
+/* .gh-head-brand a img {
+  max-height: 45px;
+  max-width: 320px;
+  object-fit: contain;
+  margin: 0 auto;
+} */
+
+.gh-navigation-logo {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
 }
 
-.gh-head-logo {
-  display: none; /* Hide the actual image */
+/* .gh-navigation-logo.is-title {
+  max-height: 45px;
+  width: auto;
+} */
+
+@media (max-width: 768px) {
+  .gh-navigation-logo.is-title {
+    max-width: 70%;
+    height: auto;
+  }
 }
 
 .gh-head-title {
@@ -377,30 +401,90 @@ body {
   margin: 8px 0;
 }
 
-/* Mobile responsiveness */
+/* Mobile navigation and responsiveness */
+.mobile-menu-toggle {
+  display: none;
+  background: none;
+  border: none;
+  color: var(--heading-color);
+  font-size: 1.8rem;
+  cursor: pointer;
+  padding: 5px;
+}
+
+.mobile-menu-toggle:before {
+  content: "☰";
+}
+
 @media (max-width: 768px) {
+  .gh-head {
+    padding: 1rem 0;
+  }
+
   .gh-head-inner {
     flex-direction: column;
     align-items: center;
   }
 
   .gh-head-brand {
     margin-bottom: 1rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .mobile-menu-toggle {
+    display: block;
+    position: absolute;
+    right: 20px;
+    top: 20px;
   }
 
   .gh-head-menu {
     width: 100%;
-    overflow-x: auto;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-in-out;
   }
 
+  .gh-head-menu.active {
+    max-height: 500px;
+  }
+
   .gh-head-menu ul {
-    padding-bottom: 0.5rem;
-    flex-wrap: wrap;
-    justify-content: center;
+    flex-direction: column;
+    padding: 0;
+    width: 100%;
   }
 
   .gh-head-menu li {
-    margin: 0.5rem;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    text-align: center;
+    border-top: 1px solid var(--border-color);
+  }
+  
+  .gh-head-menu li a {
+    display: block;
+    padding: 12px;
+  }
+  
+  .drop-down > ul > li > ul {
+    position: static;
+    box-shadow: none;
+    padding: 0;
+    width: 100%;
+  }
+  
+  .drop-down > ul > li > ul > li {
+    margin: 0;
+    border-top: 1px solid var(--border-color);
+  }
+  
+  .drop-down > ul > li > ul > li a {
+    padding-left: 25px;
+    background-color: #f9f9f9;
   }
 
   .gh-post-title {