responsive navbar

.gitlab-ci.yml

@@ -7,7 +7,6 @@ variables:
 before_script:
   - gem install bundler
   - bundle install
-  - bundle
  
 pages:
   stage: deploy

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)

_includes/layout/now.html

@@ -11,8 +11,7 @@
                     😊 <b>feeling</b>: <a href="https://www.imood.com/users/rainbowpink" target="_blank" rel="noopener noreferrer"><img src="https://moods.imood.com/display/uname-rainbowpink/fg-000000/bg-ffffff/imood.gif" alt="The current mood of rainbowpink at www.imood.com" border="0"></a>
                 </li>
                 <li>
-                    📚 <b>reading</b>: <a href="https://en.wikipedia.org/wiki/Spice_and_Wolf" target="_blank" rel="noopener noreferrer">Spice and Wolf</a> by
+                    📚 <b>reading</b>: <a href="https://mangadex.org/title/28b5d037-175d-4119-96f8-e860e408ebe9/shimeji-simulation" target="_blank" rel="noopener noreferrer">Shimeji Simulation</a> by tsukumizu
-                    Hasekura Isuna
                 </li>
                 <li>
                     📺 <b>watching</b>: <a href="https://helloproject.fandom.com/wiki/Hello!_Morning" target="_blank" rel="noopener noreferrer">Hello! Morning</a>

_includes/layout/sidebar.html

@@ -1,13 +1,15 @@
 <nav>
   <profile-img>
-    <a href="/picrew/" title="picrew" style="padding: 0;"><img id="randomImage" src="{% link /img/picrew/000.png %}" alt="mana's pfp" loading="eager"></a>
+    <a href="/" title="picrew" style="padding: 0;"><img id="randomImage" src="{% link /img/picrew/000.png %}" alt="mana's pfp" loading="eager"></a>
   </profile-img>
-  <details class="mobile-nav" open>
+  
-    <summary>menu</summary>
+    <div onclick="myFunction()" class="menu-toggle">menu <i class="ph ph-list"></i></div>
-    <details>
+    <div id="myLinks" class="menu">
-      <summary>
+        <div class="menu-item">
-        <a href="/">home</a>
+            <a href="#" class="submenu-toggle" onclick="toggleSubmenu(event)">
-      </summary>
+                site 🔗
+            </a>
+            <div class="submenu">
                 {% for page in site.pages %}
                     {% if page.menu == "home" %}
                         <a href="{{ page.url }}">
@@ -15,13 +17,14 @@
                         </a>
                     {% endif %}
                 {% endfor %}
-    </details>
+            </div>
-    <details>
+        </div>
-      <summary>
+
-        <a href="{% link _pages/me.md %}">
+        <div class="menu-item">
-          me
+            <a href="#" class="submenu-toggle" onclick="toggleSubmenu(event)">
+                me 🍥
             </a>
-      </summary>
+            <div class="submenu">
                 {% for page in site.pages %}
                 {% if page.menu == "me" %}
                         <a href="{{ page.url }}">
@@ -29,11 +32,14 @@
                         </a>
                     {% endif %}
                 {% endfor %}
-    </details>
+            </div>
-    <details>
+        </div>
-      <summary>
+
-      interests
+        <div class="menu-item">
-      </summary>
+            <a href="#" class="submenu-toggle" onclick="toggleSubmenu(event)">
+                interests 👾
+            </a>
+            <div class="submenu">
                 {% for page in site.pages %}
                 {% if page.menu == "interest" %}
                         <a href="{{ page.url }}">
@@ -41,13 +47,14 @@
                         </a>
                     {% endif %}
                 {% endfor %}
-    </details>
+            </div>
-    <details>
+        </div>
-      <summary>
+
-        <a href="{% link _pages/games.md %}">
+        <div class="menu-item">
-          games
+            <a href="#" class="submenu-toggle" onclick="toggleSubmenu(event)">
+                games 🕹
             </a>
-      </summary>
+            <div class="submenu">
                 {% for page in site.pages %}
                 {% if page.menu == "games" %}
                         <a href="{{ page.url }}">
@@ -55,13 +62,14 @@
                         </a>
                     {% endif %}
                 {% endfor %}
-    </details>
+            </div>
-    <details>
+        </div>
-      <summary>
+
-        <a href="{% link _pages/rkgk.md %}">
+        <div class="menu-item">
-          art
+            <a href="#" class="submenu-toggle" onclick="toggleSubmenu(event)">
+                art 🎨
             </a>
-      </summary>
+            <div class="submenu">
                 {% for page in site.pages %}
                 {% if page.menu == "art" %}
                         <a href="{{ page.url }}">
@@ -69,22 +77,26 @@
                         </a>
                     {% endif %}
                 {% endfor %}
-    </details>
+            </div>
-    <details>
+        </div>
-      <summary>
+
-          themes
+        <div class="menu-item">
-      </summary>
+            <a href="#" class="submenu-toggle" onclick="toggleSubmenu(event)">
+                themes 🪩
+            </a>
+            <div class="submenu">
                 <div class="theme-switches">
                     <div data-theme="peach" class="switch" id="switch-1">🍑</div>
                     <div data-theme="moon" class="switch" id="switch-2">🌙</div>
                     <div data-theme="sakura" class="switch" id="switch-3">🌸</div>
                 </div>
-    </details>
+            </div>
-  </details>
+        </div>
-    <nav-icon>
+    </div>
+    
     <a href="/atom.xml" aria-label="RSS feed" title="RSS feed" style="text-decoration: none;">
         <i class="ph ph-rss"></i>
     </a>
+    
     <script src="//counter1.fc2.com/counter.php?id=39521789&main=1"></script><noscript><img src="//counter1.fc2.com/counter_img.php?id=39521789&main=1" alt="fc2 counter"></noscript>
-    </nav-icon>
 </nav>

_layouts/2col.html

@@ -53,6 +53,7 @@
     <script src="/profile.js" defer></script>
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
     <script src="/theme.js" defer></script>
+    <script src="/menu.js" defer></script>
     {% if page.url contains "now"%}
     <script src="/scrobble.js" defer></script>
     {% endif %}

_pages/aboutme.md

@@ -2,6 +2,7 @@
 layout: 2col
 title: about me
 permalink: /me
+menu: me
 menu-title: about me
 show_footer: true
 ---

_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

_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.
+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.

index.md

@@ -12,7 +12,7 @@ emoji: 🍑🌙
 </div>
 <a href="https://www.deviantart.com/kittea-paws/art/kitten-floating-away-with-balloons-886993258"><img src="img/kittea_paws.gif" alt="kitten floating away with balloons by kittea-paws on deviantart" style="float: left; padding-right: .75rem;"></a>
 
-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 %}).
 

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
+}
+}
+});
+}

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;