diff --git a/assets/load/header.html b/assets/load/header.html index accd5b0..ef5d7c7 100644 --- a/assets/load/header.html +++ b/assets/load/header.html @@ -1,5 +1,5 @@ - + ☰ diff --git a/assets/load/universal.css b/assets/load/universal.css index 3ceff7e..6922e36 100644 --- 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 index fabf958..0c40b10 100644 --- 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 index cbba10c..1e985cb 100644 --- a/projects/header.html +++ b/projects/header.html @@ -1,5 +1,5 @@ - + ☰