improved mobile responsivenss

Code-JL · Jan 12, 2025 · e16c2c8 · e16c2c8
1 parent b17da9c
commit e16c2c8
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 134 deletions.
diff --git a/assets/load/header.html b/assets/load/header.html
@@ -1,5 +1,5 @@
 <nav role="navigation" aria-label="Main navigation" class="main-nav">
-    <button class="menu-toggle" aria-label="Toggle navigation menu">
+    <button class="menu-toggle" aria-label="Toggle navigation menu" aria-expanded="false">
         ☰
     </button>
     <div class="nav-container">

diff --git a/assets/load/universal.css b/assets/load/universal.css
@@ -179,29 +179,53 @@ nav ul li {
     border-color: var(--accent-color);
 }
 
-.nav-container::before,
-.nav-container::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 15%;
-    height: 40px;
-    background: 
-        linear-gradient(30deg, #1a1a1a 12%, transparent 12.5%, transparent 87%, #1a1a1a 87.5%, #1a1a1a),
-        linear-gradient(150deg, #1a1a1a 12%, transparent 12.5%, transparent 87%, #1a1a1a 87.5%, #1a1a1a),
-        linear-gradient(30deg, #1a1a1a 12%, transparent 12.5%, transparent 87%, #1a1a1a 87.5%, #1a1a1a),
-        linear-gradient(150deg, #1a1a1a 12%, transparent 12.5%, transparent 87%, #1a1a1a 87.5%, #1a1a1a);
-    background-size: 20px 40px;
-    opacity: 0.5;
-}
+/* Mobile Styling */
+@media screen and (max-width: 768px) {
+    /* Typography adjustments */
+    h1 { font-size: clamp(2.5rem, 8vw, 4rem); }
+    h2 { font-size: clamp(2rem, 6vw, 2.5rem); }
+    h3 { font-size: clamp(1.5rem, 4vw, 2rem); }
+    li, p { font-size: 16px; }
 
-.nav-container::before {
-    left: 2%;
-}
+    /* Mobile navigation */
+    .menu-toggle {
+        display: block;
+    }
 
-.nav-container::after {
-    right: 2%;
+    .main-nav {
+        position: relative;
+    }
+
+    .nav-container {
+        padding: 0;
+    }
+
+    nav ul {
+        display: none;
+        flex-direction: column;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        background: rgba(30, 92, 143, 0.95);
+        padding: 0;
+    }
+
+    nav ul.show {
+        display: flex;
+    }
+
+    nav ul li {
+        margin: 0;
+        width: 100%;
+    }
+
+    .nav-link {
+        padding: 12px 16px;
+        font-size: 20px;
+        border-radius: 0;
+        justify-content: flex-start;
+    }
 }
 
 /* Section Styling */
@@ -281,108 +305,3 @@ canvas {
     z-index: -1;
     filter: blur(1px);
 }
-
-/* Enhanced Mobile Styles */
-@media screen and (max-width: 768px) {
-    /* Typography adjustments */
-    h1 { font-size: clamp(2.5rem, 8vw, 4rem); }
-    h2 { font-size: clamp(2rem, 6vw, 2.5rem); }
-    h3 { font-size: clamp(1.5rem, 4vw, 2rem); }
-    li, p { font-size: 16px; }
-
-    /* Mobile navigation */
-    .menu-toggle {
-        display: block;
-    }
-
-    .main-nav {
-        position: relative;
-    }
-
-    .nav-container {
-        padding: 0;
-    }
-
-    nav ul {
-        display: none;
-        flex-direction: column;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        width: 100%;
-        background: rgba(30, 92, 143, 0.95);
-        padding: 0;
-    }
-
-    nav ul.show {
-        display: flex;
-    }
-
-    nav ul li {
-        margin: 0;
-        width: 100%;
-    }
-
-    .nav-link {
-        padding: 12px 16px;
-        font-size: 20px;
-        border-radius: 0;
-        justify-content: flex-start;
-    }
-
-    /* Section adjustments */
-    section {
-        max-width: 95%;
-        padding: 20px 15px;
-        margin: 10px auto;
-    }
-
-    section.title {
-        width: 90%;
-    }
-
-    /* Contact section adjustments */
-    section#contact p a {
-        font-size: 20px;
-    }
-
-    section#contact p a img {
-        width: 30px;
-        height: 30px;
-    }
-
-    /* Navigation container decorative elements */
-    .nav-container::before,
-    .nav-container::after {
-        display: none;
-    }
-}
-
-/* Existing media queries */
-@media screen and (min-width: 500px) {
-    h1 {
-        font-size: 4rem;
-    }
-    h2 {
-        font-size: 2rem;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    section {
-        max-width: 90%;
-    }
-
-    nav ul {
-        flex-wrap: wrap;
-        justify-content: space-around;
-    }
-
-    nav ul li {
-        margin: 5px;
-    }
-
-    #contact p a {
-        font-size: 24px;
-    }
-}
diff --git a/assets/load/universal.js b/assets/load/universal.js
@@ -14,27 +14,32 @@ document.addEventListener('DOMContentLoaded', () => {
     const navLinks = document.querySelectorAll('.nav-link');
 
     navLinks.forEach(link => {
-        if (link.getAttribute('href') === currentPage) {
+        // Determine the page the link is pointing to
+        const linkPage = link.getAttribute('href').split('/').pop();
+
+        // Add 'active' class if the link matches the current page
+        if (linkPage === currentPage) {
             link.classList.add('active');
         }
-        
+
         // Add hover effect
         link.addEventListener('mouseenter', (e) => {
             const img = e.currentTarget.querySelector('img');
             img.style.transform = 'scale(1.1) rotate(5deg)';
         });
-        
+
         link.addEventListener('mouseleave', (e) => {
             const img = e.currentTarget.querySelector('img');
             img.style.transform = 'scale(1) rotate(0deg)';
         });
     });
 
+
+    // Toggle mobile navigation
     menuToggle.addEventListener('click', () => {
+        const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
+        menuToggle.setAttribute('aria-expanded', !isExpanded);
         navMenu.classList.toggle('show');
-        menuToggle.setAttribute('aria-expanded', 
-            menuToggle.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
-        );
     });
 
     // Close menu when clicking outside

diff --git a/projects/header.html b/projects/header.html
@@ -1,5 +1,5 @@
 <nav role="navigation" aria-label="Main navigation" class="main-nav">
-    <button class="menu-toggle" aria-label="Toggle navigation menu">
+    <button class="menu-toggle" aria-label="Toggle navigation menu" aria-expanded="false">
         ☰
     </button>
     <div class="nav-container">