responsive navbar
This commit is contained in:
onomanapeia
parent
ef08f0a75e
commit
0d7c8feca7
11 changed files with 194 additions and 102 deletions
|
|
@ -7,7 +7,6 @@ variables:
|
||||||
before_script:
|
before_script:
|
||||||
- gem install bundler
|
- gem install bundler
|
||||||
- bundle install
|
- bundle install
|
||||||
- bundle
|
|
||||||
|
|
||||||
pages:
|
pages:
|
||||||
stage: deploy
|
stage: deploy
|
||||||
|
|
|
||||||
|
|
@ -44,8 +44,6 @@ GEM
|
||||||
nokogiri (>= 1.10, < 2.0)
|
nokogiri (>= 1.10, < 2.0)
|
||||||
jekyll-sass-converter (3.0.0)
|
jekyll-sass-converter (3.0.0)
|
||||||
sass-embedded (~> 1.54)
|
sass-embedded (~> 1.54)
|
||||||
jekyll-seo-tag (2.8.0)
|
|
||||||
jekyll (>= 3.8, < 5.0)
|
|
||||||
jekyll-tagging (1.1.0)
|
jekyll-tagging (1.1.0)
|
||||||
nuggets
|
nuggets
|
||||||
jekyll-toc (0.19.0)
|
jekyll-toc (0.19.0)
|
||||||
|
|
@ -62,10 +60,6 @@ GEM
|
||||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||||
rb-inotify (~> 0.9, >= 0.9.10)
|
rb-inotify (~> 0.9, >= 0.9.10)
|
||||||
mercenary (0.4.0)
|
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)
|
nokogiri (1.15.6-x64-mingw32)
|
||||||
racc (~> 1.4)
|
racc (~> 1.4)
|
||||||
nokogiri (1.15.6-x64-unknown)
|
nokogiri (1.15.6-x64-unknown)
|
||||||
|
|
@ -107,7 +101,6 @@ DEPENDENCIES
|
||||||
jekyll-loading-lazy
|
jekyll-loading-lazy
|
||||||
jekyll-tagging (~> 1.1)
|
jekyll-tagging (~> 1.1)
|
||||||
jekyll-toc
|
jekyll-toc
|
||||||
minima (~> 2.5)
|
|
||||||
tzinfo (>= 1, < 3)
|
tzinfo (>= 1, < 3)
|
||||||
tzinfo-data
|
tzinfo-data
|
||||||
webrick (~> 1.8)
|
webrick (~> 1.8)
|
||||||
|
|
|
||||||
|
|
@ -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>
|
😊 <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>
|
||||||
<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>
|
||||||
<li>
|
<li>
|
||||||
📺 <b>watching</b>: <a href="https://helloproject.fandom.com/wiki/Hello!_Morning" target="_blank" rel="noopener noreferrer">Hello! Morning</a>
|
📺 <b>watching</b>: <a href="https://helloproject.fandom.com/wiki/Hello!_Morning" target="_blank" rel="noopener noreferrer">Hello! Morning</a>
|
||||||
|
|
|
||||||
|
|
@ -1,90 +1,102 @@
|
||||||
<nav>
|
<nav>
|
||||||
<profile-img>
|
<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>
|
</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 🔗
|
||||||
{% for page in site.pages %}
|
</a>
|
||||||
{% if page.menu == "home" %}
|
<div class="submenu">
|
||||||
<a href="{{ page.url }}">
|
{% for page in site.pages %}
|
||||||
{{ page.menu-title }}
|
{% if page.menu == "home" %}
|
||||||
</a>
|
<a href="{{ page.url }}">
|
||||||
{% endif %}
|
{{ page.menu-title }}
|
||||||
{% endfor %}
|
</a>
|
||||||
</details>
|
{% endif %}
|
||||||
<details>
|
{% endfor %}
|
||||||
<summary>
|
</div>
|
||||||
<a href="{% link _pages/me.md %}">
|
</div>
|
||||||
me
|
|
||||||
</a>
|
<div class="menu-item">
|
||||||
</summary>
|
<a href="#" class="submenu-toggle" onclick="toggleSubmenu(event)">
|
||||||
{% for page in site.pages %}
|
me 🍥
|
||||||
{% if page.menu == "me" %}
|
</a>
|
||||||
<a href="{{ page.url }}">
|
<div class="submenu">
|
||||||
{{ page.menu-title }}
|
{% for page in site.pages %}
|
||||||
</a>
|
{% if page.menu == "me" %}
|
||||||
{% endif %}
|
<a href="{{ page.url }}">
|
||||||
{% endfor %}
|
{{ page.menu-title }}
|
||||||
</details>
|
</a>
|
||||||
<details>
|
{% endif %}
|
||||||
<summary>
|
{% endfor %}
|
||||||
interests
|
</div>
|
||||||
</summary>
|
</div>
|
||||||
{% for page in site.pages %}
|
|
||||||
{% if page.menu == "interest" %}
|
<div class="menu-item">
|
||||||
<a href="{{ page.url }}">
|
<a href="#" class="submenu-toggle" onclick="toggleSubmenu(event)">
|
||||||
{{ page.menu-title }}
|
interests 👾
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
<div class="submenu">
|
||||||
{% endfor %}
|
{% for page in site.pages %}
|
||||||
</details>
|
{% if page.menu == "interest" %}
|
||||||
<details>
|
<a href="{{ page.url }}">
|
||||||
<summary>
|
{{ page.menu-title }}
|
||||||
<a href="{% link _pages/games.md %}">
|
</a>
|
||||||
games
|
{% endif %}
|
||||||
</a>
|
{% endfor %}
|
||||||
</summary>
|
</div>
|
||||||
{% for page in site.pages %}
|
</div>
|
||||||
{% if page.menu == "games" %}
|
|
||||||
<a href="{{ page.url }}">
|
<div class="menu-item">
|
||||||
{{ page.menu-title }}
|
<a href="#" class="submenu-toggle" onclick="toggleSubmenu(event)">
|
||||||
</a>
|
games 🕹
|
||||||
{% endif %}
|
</a>
|
||||||
{% endfor %}
|
<div class="submenu">
|
||||||
</details>
|
{% for page in site.pages %}
|
||||||
<details>
|
{% if page.menu == "games" %}
|
||||||
<summary>
|
<a href="{{ page.url }}">
|
||||||
<a href="{% link _pages/rkgk.md %}">
|
{{ page.menu-title }}
|
||||||
art
|
</a>
|
||||||
</a>
|
{% endif %}
|
||||||
</summary>
|
{% endfor %}
|
||||||
{% for page in site.pages %}
|
</div>
|
||||||
{% if page.menu == "art" %}
|
</div>
|
||||||
<a href="{{ page.url }}">
|
|
||||||
{{ page.menu-title }}
|
<div class="menu-item">
|
||||||
</a>
|
<a href="#" class="submenu-toggle" onclick="toggleSubmenu(event)">
|
||||||
{% endif %}
|
art 🎨
|
||||||
{% endfor %}
|
</a>
|
||||||
</details>
|
<div class="submenu">
|
||||||
<details>
|
{% for page in site.pages %}
|
||||||
<summary>
|
{% if page.menu == "art" %}
|
||||||
themes
|
<a href="{{ page.url }}">
|
||||||
</summary>
|
{{ page.menu-title }}
|
||||||
<div class="theme-switches">
|
</a>
|
||||||
<div data-theme="peach" class="switch" id="switch-1">🍑</div>
|
{% endif %}
|
||||||
<div data-theme="moon" class="switch" id="switch-2">🌙</div>
|
{% endfor %}
|
||||||
<div data-theme="sakura" class="switch" id="switch-3">🌸</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</details>
|
|
||||||
</details>
|
<div class="menu-item">
|
||||||
<nav-icon>
|
<a href="#" class="submenu-toggle" onclick="toggleSubmenu(event)">
|
||||||
<a href="/atom.xml" aria-label="RSS feed" title="RSS feed" style="text-decoration: none;">
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="/atom.xml" aria-label="RSS feed" title="RSS feed" style="text-decoration: none;">
|
||||||
<i class="ph ph-rss"></i>
|
<i class="ph ph-rss"></i>
|
||||||
</a>
|
</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>
|
<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>
|
</nav>
|
||||||
|
|
@ -53,6 +53,7 @@
|
||||||
<script src="/profile.js" defer></script>
|
<script src="/profile.js" defer></script>
|
||||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||||
<script src="/theme.js" defer></script>
|
<script src="/theme.js" defer></script>
|
||||||
|
<script src="/menu.js" defer></script>
|
||||||
{% if page.url contains "now"%}
|
{% if page.url contains "now"%}
|
||||||
<script src="/scrobble.js" defer></script>
|
<script src="/scrobble.js" defer></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
layout: 2col
|
layout: 2col
|
||||||
title: about me
|
title: about me
|
||||||
permalink: /me
|
permalink: /me
|
||||||
|
menu: me
|
||||||
menu-title: about me
|
menu-title: about me
|
||||||
show_footer: true
|
show_footer: true
|
||||||
---
|
---
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
---
|
---
|
||||||
layout: 2col
|
layout: 2col
|
||||||
title: games
|
title: games
|
||||||
permalink: /games
|
permalink: games
|
||||||
|
menu: games
|
||||||
menu-title: games
|
menu-title: games
|
||||||
show_footer: true
|
show_footer: true
|
||||||
toc: true
|
toc: true
|
||||||
|
|
|
||||||
|
|
@ -2,4 +2,4 @@
|
||||||
title: "site update"
|
title: "site update"
|
||||||
date: 2024-09-26
|
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.
|
||||||
2
index.md
2
index.md
|
|
@ -12,7 +12,7 @@ emoji: 🍑🌙
|
||||||
</div>
|
</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>
|
<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 %}).
|
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 %}).
|
||||||
|
|
||||||
|
|
|
||||||
54
menu.js
Normal file
54
menu.js
Normal file
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
40
style.css
40
style.css
|
|
@ -87,16 +87,16 @@ nav > * {
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
nav a {
|
||||||
color: var(--linkColor);
|
color: var(--fgColor);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
padding: .4rem .25rem;
|
padding: .4rem .25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a.active {
|
nav a.active {
|
||||||
color: var(--hovColor);
|
color: var(--linkColor);
|
||||||
}
|
}
|
||||||
nav a:hover:not(.active) {
|
nav a:hover:not(.active) {
|
||||||
color: var(--hovColor);
|
color: var(--fgColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 700px) {
|
@media screen and (max-width: 700px) {
|
||||||
|
|
@ -111,6 +111,38 @@ nav a:hover:not(.active) {
|
||||||
section {margin-left: 0; width: 94%;}
|
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 {
|
nav-icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content:center;
|
justify-content:center;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue