Make topnav mobile-friendly

jacobpalm · Jun 22, 2024 · 6723e11 · 6723e11
1 parent a435431
commit 6723e11
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -26,27 +26,41 @@
     <div class="w3-content">
         <a href="{{ site.baseURL }}" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile sitetitle">{{ site.name }}</a>
         <div class="topnav-right">
-            <a href="{{ site.baseURL }}/index.html#about" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile">About</a>
-            <a href="{{ site.baseURL }}/index.html#screens" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile">Screenshots</a>
-            <a href="{{ site.baseURL }}/index.html#downloads" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile">Download</a>
-            <a href="{{ site.baseURL }}/blog/" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile">Blog</a>
-            <a href="{{ site.baseURL }}/archive.html" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile">Archive</a>
+            <a href="{{ site.baseURL }}/index.html#about" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile w3-hide-small">About</a>
+            <a href="{{ site.baseURL }}/index.html#screens" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile w3-hide-small">Screenshots</a>
+            <a href="{{ site.baseURL }}/index.html#downloads" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile w3-hide-small">Download</a>
+            <a href="{{ site.baseURL }}/blog/" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile w3-hide-small">Blog</a>
+            <a href="{{ site.baseURL }}/archive.html" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile w3-hide-small">Archive</a>
+            <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="toggleMenu()">&#9776;</a>
+
+            <div id="mobilemenu" class="w3-hide w3-hide-large w3-hide-medium">
+                <a href="{{ site.baseURL }}/index.html#about" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile">About</a>
+                <a href="{{ site.baseURL }}/index.html#screens" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile">Screenshots</a>
+                <a href="{{ site.baseURL }}/index.html#downloads" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile">Download</a>
+                <a href="{{ site.baseURL }}/blog/" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile">Blog</a>
+                <a href="{{ site.baseURL }}/archive.html" class="w3-bar-item w3-button w3-padding-large w3-hover-white w3-mobile">Archive</a>
+            </div>
         </div>
     </div>
 </div>
 
+
+
+
+
+
 <!-- Content -->
 {{ content }}
 
 <!-- Footer -->
 <footer class="w3-container">  
     <div class="w3-content">
-        <div class="w3-third w3-padding-32">
+        <div class="w3-third w3-padding-large">
             <h5>The Author</h5>
             <p>Developed by <a href="https://jacobpalm.dk">Jacob Palm</a>, a Danish IT-professional and hobby developer. Former maintainer of JacobPalm.dk GUI Reviews, one of the largest QB GUI sites at its time.
             </p>
         </div>
-        <div class="w3-third w3-padding-32">
+        <div class="w3-third w3-padding-large">
             <h5>Interesting Links</h5>
             <p>
                 <a href="https://dosprograms.info.tt/apps.htm" target="_blank">Interesting DOS programs</a><br/>
@@ -58,12 +72,24 @@ <h5>Interesting Links</h5>
                 <a href="http://theguiblog.com/review?id=1" target="_blank">The GUI Blog</a>
             </p>
         </div>
-        <div class="w3-third w3-padding-32">
+        <div class="w3-third w3-padding-large">
             <h5>About Costa</h5>
             <p>Costa is a small and lightweight GUI (Graphical User Interface) for MS-DOS compatible systems, provided to you free of charge. Site &copy; 2004-{{ 'now' | date: "%Y" }} by <a href="https://github.com/jacobpalm">Jacob Palm</a>, software released under the MIT License.</p>
         </div>
     </div>
 </footer>
 
+<!-- Menu code -->
+<script>
+    function toggleMenu() {
+        var x = document.getElementById("mobilemenu");
+        if (x.className.indexOf("w3-show") == -1) {
+            x.className += " w3-show";
+        } else { 
+            x.className = x.className.replace(" w3-show", "");
+        }
+    }
+</script>
+
 </body>
 </html>
diff --git a/assets/custom.css b/assets/custom.css
@@ -20,7 +20,6 @@ h6 {
 
 body {
     font-size: 16px;
-    font-weight: 400;
     -webkit-font-smoothing: antialiased;
 }
 
@@ -44,10 +43,6 @@ footer h5 {
     text-transform: uppercase;
 }
 
-footer div.w3-padding-32 {
-    padding: 32px;
-}
-
 .w3-button {
     width: auto;
 }