Fully mobile optimized

Lmears · Nov 8, 2023 · ee89d60 · ee89d60
1 parent 8866b74
commit ee89d60
Show file tree

Hide file tree

Showing 8 changed files with 183 additions and 59 deletions.
diff --git a/about/index.html b/about/index.html
@@ -37,16 +37,17 @@
 <body class="bg-gray-800 text-gray-300">
     <div id="container">
         <nav>
+            <div id="hamburger-menu">&#9776;</div>
             <ul>
-                <li> <a href=".." id="homeLink">
+                <li> <a href=" .." id="homeLink">
                         <img src="../assets/images/home.png" alt="Home" class="home-logo">
                     </a>
                 </li>
-                <li><a href="./" class="font-bold">About</a></li>
-                <li><a href="../mastering/">Mastering</a></li>
-                <li><a href="../music/">Music</a></li>
-                <li><a href="../software/">Software</a></li>
-                <li><a href="../contact/">Contact</a></li>
+                <li><a href="./" class="selected"><span class="nav-link-text">About</span></a></li>
+                <li><a href="../mastering/"><span class="nav-link-text">Mastering</span></a></li>
+                <li><a href="../music/"><span class="nav-link-text">Music</span></a></li>
+                <li><a href="../software/"><span class="nav-link-text">Software</span></a></li>
+                <li><a href="../contact/"><span class="nav-link-text">Contact</span></a></li>
             </ul>
         </nav>
         <div id="content">
@@ -107,7 +108,8 @@ <h1 class="w-full text-5xl leading-tight px-4">About</h1>
                 <div class="padding-below-border"></div>
             </div>
         </div>
-        <script src="../assets/js/script.js" async></script>
+    </div>
+    <script src="../assets/js/script.js"></script>
 </body>
 
 </html>
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -51,8 +51,47 @@ h1 {
     min-width: 303.44px;
 }
 
+#hamburger-menu {
+    font-size: 36px;
+    /* Adjust size as needed */
+    cursor: pointer;
+    display: none;
+    /* Initially hidden */
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.625rem 1.25rem;
+    z-index: 1000;
+    /* Ensuring it's above other elements */
+    color: rgba(209, 213, 219);
+    /* Making sure it's visible, set a contrasting color if necessary */
+    /* background: rgba(0, 0, 0, 0.5); */
+    /* Optional: Adds a background to make it stand out */
+}
+
+#hamburger-menu:hover {
+    color: rgba(209, 213, 219, 0.75);
+}
+
 @media (max-width: 576px) {
 
+    #hamburger-menu {
+        display: block;
+        /* Show hamburger menu */
+    }
+
+    /* Ensure all links except the first are hidden */
+    nav ul li:not(:first-child) {
+        display: none;
+        /* Hide all links except the first one (home) */
+    }
+
+    /* Additional styles for when the menu is active */
+    nav.nav-active ul li:not(:first-child) {
+        display: block;
+        /* Show links */
+    }
+
     nav ul {
         display: flex;
         flex-direction: column !important;
@@ -64,6 +103,11 @@ h1 {
         padding-bottom: 3rem !important;
     }
 
+    .home-logo {
+        /* width: 80px !important; */
+        min-width: 80px !important;
+    }
+
     /* Other adjustments for mobile view */
 }
 
@@ -75,6 +119,7 @@ h1 {
 
     .home-logo {
         padding-bottom: 10px !important;
+        max-width: 48px;
         /* max-width: 48px; */
     }
 
@@ -97,7 +142,13 @@ h1 {
     }
 
     nav ul li {
-        padding: 0.125rem 0.5rem !important;
+        padding: 0.125rem 0rem !important;
+    }
+
+    .nav-link-text {
+        /* Set a fixed width suitable for your longest item */
+        text-align: center !important;
+        /* Center the text if that's what you want */
     }
 
     /* Other adjustments for mobile view */
@@ -122,19 +173,33 @@ nav ul li {
     padding: 0.625rem 1.25rem;
 }
 
+.nav-link-text {
+    display: block;
+    width: 92.22px;
+    /* Set a fixed width suitable for your longest item */
+    text-align: start;
+    /* Center the text if that's what you want */
+}
+
 nav ul li a {
     display: inline-block;
     text-decoration: none;
     color: inherit;
     font-weight: 100;
 }
 
+nav ul li a.selected .nav-link-text {
+    font-weight: bold;
+    text-indent: -1.5px;
+}
+
+
 nav ul li a:hover {
     color: rgba(209, 213, 219, 0.75);
 }
 
 .home-logo {
-    min-width: 48px;
+    /* min-width: 48px; */
     width: 80px;
     padding-bottom: 60px;
 }

diff --git a/assets/js/script.js b/assets/js/script.js
@@ -1,3 +1,5 @@
+console.log('Script is running');
+
 // Home image animation
 var homeLink = document.getElementById('homeLink');
 var homeLogo = document.querySelector('.home-logo');
@@ -36,33 +38,50 @@ homeLink.addEventListener('mouseup', function () {
 });
 
 
-
 // Lightbox modal
 var modal = document.getElementById("myModal");
 var img = document.querySelector('.modal-trigger');
 var modalImg = document.getElementById("img01");
-img.onclick = function () {
-    modal.style.display = "block";
-    modalImg.src = this.src;
-    captionText.innerHTML = this.alt;
-}
 
-var span = document.getElementsByClassName("close")[0];
+// Only set up the modal if the elements exist
+if (modal && img && modalImg) {
+    img.onclick = function () {
+        modal.style.display = "block";
+        modalImg.src = this.src;
+    }
 
-span.onclick = function () {
-    modal.style.display = "none";
-}
+    var span = document.getElementsByClassName("close")[0];
 
-window.onclick = function (event) {
-    if (event.target == modal) {
-        modal.style.display = "none";
+    if (span) {
+        span.onclick = function () {
+            modal.style.display = "none";
+        }
     }
-}
 
-document.onkeydown = function (event) {
-    if (event.key === "Escape") {
-        if (modal.style.display === "block") {
+    window.onclick = function (event) {
+        if (event.target == modal) {
             modal.style.display = "none";
         }
     }
+
+    document.onkeydown = function (event) {
+        if (event.key === "Escape") {
+            if (modal && modal.style.display === "block") {
+                modal.style.display = "none";
+            }
+        }
+    }
 }
+
+
+
+// Hamburger menu
+document.addEventListener('DOMContentLoaded', function () {
+    var hamburger = document.getElementById('hamburger-menu');
+    var nav = document.querySelector('nav');
+
+    hamburger.addEventListener('click', function () {
+        console.log('Hamburger clicked');
+        nav.classList.toggle('nav-active');
+    });
+});
diff --git a/contact/index.html b/contact/index.html
@@ -17,16 +17,17 @@
 <body class="bg-gray-800 text-gray-300">
     <div id="container">
         <nav>
+            <div id="hamburger-menu">&#9776;</div>
             <ul>
                 <li> <a href=".." id="homeLink">
                         <img src="../assets/images/home.png" alt="Home" class="home-logo">
                     </a>
                 </li>
-                <li><a href="../about/">About</a></li>
-                <li><a href="../mastering/">Mastering</a></li>
-                <li><a href="../music/">Music</a></li>
-                <li><a href="../software/">Software</a></li>
-                <li><a href="./" class="font-bold">Contact</a></li>
+                <li><a href="../about/"><span class="nav-link-text">About</span></a></li>
+                <li><a href="../mastering/"><span class="nav-link-text">Mastering</span></a></li>
+                <li><a href="../music/"><span class="nav-link-text">Music</span></a></li>
+                <li><a href="../software/"><span class="nav-link-text">Software</span></a></li>
+                <li><a href="./" class="selected"><span class="nav-link-text">Contact</span></a></li>
             </ul>
         </nav>
         <div id="content">
@@ -58,7 +59,7 @@ <h1 class="w-full text-5xl leading-tight px-4">Contact</h1>
             </div>
         </div>
     </div>
-    <script src="../assets/js/script.js" async></script>
+    <script src="../assets/js/script.js"></script>
 </body>
 
 </html>
diff --git a/index.html b/index.html
@@ -13,9 +13,42 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <link rel="stylesheet" href="./assets/css/styles.css">
     <style>
-        @media (max-width: 576px) {
+        @media (max-width: 750px) {
             nav {
-                padding-top: 9rem !important;
+                padding-top: 6rem !important;
+            }
+
+            #hamburger-menu {
+                display: block;
+                /* Show hamburger menu */
+            }
+
+            /* Ensure all links except the first are hidden */
+            nav ul li:not(:first-child) {
+                display: none;
+                /* Hide all links except the first one (home) */
+            }
+
+            /* Additional styles for when the menu is active */
+            nav.nav-active ul li:not(:first-child) {
+                display: block;
+                /* Show links */
+            }
+
+            nav ul {
+                display: flex;
+                flex-direction: column !important;
+                justify-content: space-around;
+                align-items: center;
+            }
+
+            nav {
+                padding-bottom: 3rem !important;
+            }
+
+            .home-logo {
+                /* width: 80px !important; */
+                min-width: 80px !important;
             }
 
             /* Other adjustments for mobile view */
@@ -25,17 +58,18 @@
 
 <body class="bg-gray-800 text-gray-300">
     <div id="container">
-        <nav>
+        <nav class="nav-active">
+            <div id="hamburger-menu">&#9776;</div>
             <ul>
                 <li> <a href="./" id="homeLink">
                         <img src="./assets/images/home.png" alt="Home" class="home-logo">
                     </a>
                 </li>
-                <li><a href="./about/">About</a></li>
-                <li><a href="./mastering/">Mastering</a></li>
-                <li><a href="./music/">Music</a></li>
-                <li><a href="./software/">Software</a></li>
-                <li><a href="./contact/">Contact</a></li>
+                <li><a href="./about/"><span class="nav-link-text">About</span></a></li>
+                <li><a href="./mastering/"><span class="nav-link-text">Mastering</span></a></li>
+                <li><a href="./music/"><span class="nav-link-text">Music</span></a></li>
+                <li><a href="./software/"><span class="nav-link-text">Software</span></a></li>
+                <li><a href="./contact/"><span class="nav-link-text">Contact</span></a></li>
             </ul>
 
             <!-- Social Media Links -->
@@ -55,7 +89,7 @@
             slypork.studio
         </footer>
     </div>
-    <script src="./assets/js/script.js" async></script>
+    <script src="./assets/js/script.js"></script>
 </body>
 
 </html>
diff --git a/mastering/index.html b/mastering/index.html
@@ -37,16 +37,17 @@
 <body class="bg-gray-800 text-gray-300">
     <div id="container">
         <nav>
+            <div id="hamburger-menu">&#9776;</div>
             <ul>
                 <li> <a href=".." id="homeLink">
                         <img src="../assets/images/home.png" alt="Home" class="home-logo">
                     </a>
                 </li>
-                <li><a href="../about/">About</a></li>
-                <li><a href="./" class="font-bold">Mastering</a></li>
-                <li><a href="../music/">Music</a></li>
-                <li><a href="../software/">Software</a></li>
-                <li><a href="../contact/">Contact</a></li>
+                <li><a href="../about/"><span class="nav-link-text">About</span></a></li>
+                <li><a href="./" class="selected"><span class="nav-link-text">Mastering</span></a></li>
+                <li><a href="../music/"><span class="nav-link-text">Music</span></a></li>
+                <li><a href="../software/"><span class="nav-link-text">Software</span></a></li>
+                <li><a href="../contact/"><span class="nav-link-text">Contact</span></a></li>
             </ul>
         </nav>
         <div id="content">
@@ -187,7 +188,7 @@ <h2 class="mb-4">Past work: </h2>
             </script>
         </div>
     </div>
-    <script src="../assets/js/script.js" async></script>
+    <script src="../assets/js/script.js"></script>
 </body>
 
 </html>