diff --git a/about/index.html b/about/index.html index 81519a4..0b111a3 100644 --- a/about/index.html +++ b/about/index.html @@ -37,16 +37,17 @@
@@ -107,7 +108,8 @@

About

- + + \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css index 4e664d6..11db042 100644 --- 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,6 +173,14 @@ 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; @@ -129,12 +188,18 @@ nav ul li a { 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 index f2bbc6f..3d06461 100644 --- 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'); + }); +}); \ No newline at end of file diff --git a/contact/index.html b/contact/index.html index 5f3fdea..7469a5d 100644 --- a/contact/index.html +++ b/contact/index.html @@ -17,16 +17,17 @@
@@ -58,7 +59,7 @@

Contact

- + \ No newline at end of file diff --git a/index.html b/index.html index 7fbebd4..64eb6ea 100644 --- a/index.html +++ b/index.html @@ -13,9 +13,42 @@