From 0d7c8feca7e8877cb6be9edb45d52afc424359fb Mon Sep 17 00:00:00 2001 From: onomanapeia Date: Thu, 26 Sep 2024 16:43:50 -0500 Subject: [PATCH] responsive navbar --- .gitlab-ci.yml | 1 - Gemfile.lock | 7 -- _includes/layout/now.html | 3 +- _includes/layout/sidebar.html | 182 +++++++++++++++-------------- _layouts/2col.html | 1 + _pages/{me.md => aboutme.md} | 1 + _pages/games.md | 3 +- _posts/updates/2024-09-26-title.md | 2 +- index.md | 2 +- menu.js | 54 +++++++++ style.css | 40 ++++++- 11 files changed, 194 insertions(+), 102 deletions(-) rename _pages/{me.md => aboutme.md} (99%) create mode 100644 menu.js diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 4722c7d..29a7fdd 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -7,7 +7,6 @@ variables: before_script: - gem install bundler - bundle install - - bundle pages: stage: deploy diff --git a/Gemfile.lock b/Gemfile.lock index 2f49646..84f7ccd 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -44,8 +44,6 @@ GEM nokogiri (>= 1.10, < 2.0) jekyll-sass-converter (3.0.0) sass-embedded (~> 1.54) - jekyll-seo-tag (2.8.0) - jekyll (>= 3.8, < 5.0) jekyll-tagging (1.1.0) nuggets jekyll-toc (0.19.0) @@ -62,10 +60,6 @@ GEM rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) mercenary (0.4.0) - minima (2.5.2) - jekyll (>= 3.5, < 5.0) - jekyll-feed (~> 0.9) - jekyll-seo-tag (~> 2.1) nokogiri (1.15.6-x64-mingw32) racc (~> 1.4) nokogiri (1.15.6-x64-unknown) @@ -107,7 +101,6 @@ DEPENDENCIES jekyll-loading-lazy jekyll-tagging (~> 1.1) jekyll-toc - minima (~> 2.5) tzinfo (>= 1, < 3) tzinfo-data webrick (~> 1.8) diff --git a/_includes/layout/now.html b/_includes/layout/now.html index 5e01c92..b07f46b 100644 --- a/_includes/layout/now.html +++ b/_includes/layout/now.html @@ -11,8 +11,7 @@ 😊 feeling: The current mood of rainbowpink at www.imood.com
  • - 📚 reading: Spice and Wolf by - Hasekura Isuna + 📚 reading: Shimeji Simulation by tsukumizu
  • đŸ“ē watching: Hello! Morning diff --git a/_includes/layout/sidebar.html b/_includes/layout/sidebar.html index c611279..d9fc910 100644 --- a/_includes/layout/sidebar.html +++ b/_includes/layout/sidebar.html @@ -1,90 +1,102 @@ \ No newline at end of file diff --git a/_layouts/2col.html b/_layouts/2col.html index 7ffc4cc..c78b653 100644 --- a/_layouts/2col.html +++ b/_layouts/2col.html @@ -53,6 +53,7 @@ + {% if page.url contains "now"%} {% endif %} diff --git a/_pages/me.md b/_pages/aboutme.md similarity index 99% rename from _pages/me.md rename to _pages/aboutme.md index ff65ec4..3037cc8 100644 --- a/_pages/me.md +++ b/_pages/aboutme.md @@ -2,6 +2,7 @@ layout: 2col title: about me permalink: /me +menu: me menu-title: about me show_footer: true --- diff --git a/_pages/games.md b/_pages/games.md index bbc557d..a70ec24 100644 --- a/_pages/games.md +++ b/_pages/games.md @@ -1,7 +1,8 @@ --- layout: 2col title: games -permalink: /games +permalink: games +menu: games menu-title: games show_footer: true toc: true diff --git a/_posts/updates/2024-09-26-title.md b/_posts/updates/2024-09-26-title.md index ae63da4..52424f3 100644 --- a/_posts/updates/2024-09-26-title.md +++ b/_posts/updates/2024-09-26-title.md @@ -2,4 +2,4 @@ title: "site update" date: 2024-09-26 --- -finally finished migrating the site to [jekyll](https://jekyllrb.com/) from zola! added some new art to the [fridge]({% link _pages/fridge.md %}). took a bunch of new [quizzes]({% link _pages/quiz.md %}) updated [about]({% link _pages/about.md %}) to reflect the migration to jekyll, and split the [about me]({% link _pages/me.md %}) section into its own page. added some [links]({% link _pages/links.md %}) and a page detailing my [plans]({% link _pages/plans.md %}) for this website. \ No newline at end of file +finally finished migrating the site to [jekyll](https://jekyllrb.com/) from zola! added some new art to the [fridge]({% link _pages/fridge.md %}). took a bunch of new [quizzes]({% link _pages/quiz.md %}) updated [about]({% link _pages/about.md %}) to reflect the migration to jekyll, and split the [about me]({% link _pages/aboutme.md %}) section into its own page. added some [links]({% link _pages/links.md %}) and a page detailing my [plans]({% link _pages/plans.md %}) for this website. \ No newline at end of file diff --git a/index.md b/index.md index 873f992..b2d55c0 100644 --- a/index.md +++ b/index.md @@ -12,7 +12,7 @@ emoji: 🍑🌙 kitten floating away with balloons by kittea-paws on deviantart -hoi i'm [mana]({% link _pages/me.md %}), and I live inside of your computer (or phone!), or at least, your perception of me does. I'm just some lil guy currently residing in the united states. I love [music]({% link _pages/music.md %}) and Japanese & Korean idols. I wanna be one of those floral tea aesthetic girlies but if I'm honest I prefer my coffee. I'm a [gaymer]({% link _pages/games.md %}) who loves farming sims and visual novels. I'm too creative for my own good, my head is flooded with ideas for new projects all the time (but zero motivation to do any of them :'D). +hoi i'm [mana]({% link _pages/aboutme.md %}), and I live inside of your computer (or phone!), or at least, your perception of me does. I'm just some lil guy currently residing in the united states. I love [music]({% link _pages/music.md %}) and Japanese & Korean idols. I wanna be one of those floral tea aesthetic girlies but if I'm honest I prefer my coffee. I'm a [gaymer]({% link _pages/games.md %}) who loves farming sims and visual novels. I'm too creative for my own good, my head is flooded with ideas for new projects all the time (but zero motivation to do any of them :'D). I dabble in [drawing]({% link _pages/rkgk.md %}) and journaling, which I [blog]({% link blog.html %}) about (because of course I do). I've experimented in blender making mods for ffxiv (none of which I've released publicly -- just trust me, I've suffered in the blender mines) and have made mods for [stardew valley]({% link _pages/sdv.md %}). diff --git a/menu.js b/menu.js new file mode 100644 index 0000000..bbdda06 --- /dev/null +++ b/menu.js @@ -0,0 +1,54 @@ +/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */ +function myFunction() { + var x = document.getElementById("myLinks"); + if (x.style.display === "block") { + x.style.display = "none"; + } else { + x.style.display = "block"; + } +} + +function toggleSubmenu(event) { + event.preventDefault(); // Prevent the default anchor click behavior + var submenu = event.target.nextElementSibling; // Get the submenu + + if (submenu.style.display === "block") { + submenu.style.display = "none"; + } else { + submenu.style.display = "block"; + } +} + +// Function to keep the menu open based on the current URL +function setActiveMenu() { + const currentUrl = window.location.pathname; // Get current URL path + const menuItems = document.querySelectorAll('.menu a'); + + menuItems.forEach(item => { + // Check if the current item is the active one + if (item.getAttribute('href') === currentUrl) { + item.classList.add('active'); // Add active class to the current link + const submenu = item.closest('.submenu'); // Get the closest submenu of this item + + // If there's a submenu, show it + if (submenu) { + submenu.style.display = 'block'; // Open the submenu + const parentMenuItem = submenu.previousElementSibling; // Get the parent menu item + if (parentMenuItem) { + parentMenuItem.classList.add('active'); // Highlight the parent item + } + } + } else if (item.closest('.submenu') && item.getAttribute('href') === currentUrl) { + // If this is a submenu item, add active class to the submenu item + item.classList.add('active'); + +// Find the parent menu item and open the submenu +const parentMenuItem = item.closest('.menu-item'); +parentMenuItem.querySelector('.submenu-toggle').classList.add('active'); // Highlight parent item +const parentSubmenu = parentMenuItem.querySelector('.submenu'); // Get the submenu +if (parentSubmenu) { + parentSubmenu.style.display = 'block'; // Open parent submenu +} +} +}); +} \ No newline at end of file diff --git a/style.css b/style.css index 951aa0e..24f5dd5 100644 --- a/style.css +++ b/style.css @@ -87,16 +87,16 @@ nav > * { } nav a { - color: var(--linkColor); + color: var(--fgColor); text-decoration: none; - padding: .4rem .25rem; } + nav a.active { - color: var(--hovColor); + color: var(--linkColor); } nav a:hover:not(.active) { - color: var(--hovColor); + color: var(--fgColor); } @media screen and (max-width: 700px) { @@ -111,6 +111,38 @@ nav a:hover:not(.active) { section {margin-left: 0; width: 94%;} } +.menu a { + display: block +} + +.submenu { + display: none; + text-decoration: none; +} + +.submenu-toggle { + font-style: italic; +} + +.menu-item a:hover { + text-decoration: none; + color: var(--fgColor); + background-color: var(--bgSelect); +} + +.menu-toggle, .menu { + text-decoration: none; +} + +@media (max-width: 640px) { + nav a { + padding: 1rem; + } + .menu { + display: none; + } +} + nav-icon { display: flex; justify-content:center;