sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

revamp the navbar
All checks were successful
/ build (push) Successful in 38s
Details

Browse source
This commit is contained in:
Ruben 2025-05-27 00:53:32 -05:00
commit a9c8eb8084
No known key found for this signature in database
GPG key ID: 8EA836555FB6D9A5
3 changed files with 471 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

58
_includes/layouts/navbar.njk
View file

@ -1,40 +1,38 @@
<!-- top navbar -->
<div class="navbar">
<a class="nav-base nav-left nav-baselink" href="/"><span class="tabler--grid-dots"></span> Synth Download!</a>
<details class="nav-base nav-left nav-baselink-mobile">
<summary><span class="tabler--grid-dots"></span> s <span aria-hidden="true" class="dot" style="background-color: var(--background) !important;"></span> d!</summary>
<nav class="navbar">
<a class="nav-base nav-left nav-baselink nav-desktop" aria-label="Synth.download Homepage" href="/"><img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" /></a>
<div class="nav-base nav-left nav-baselink nav-mobile-menu">
<input type="checkbox" id="nav-mobile-menu-dropdown" value="" name="nav-mobile-menu-dropdown">
<label aria-label="Menu" for="nav-mobile-menu-dropdown" data-toggle="nav-mobile-menu">
<img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" />
</label>
<ul>
<li>
<a href="/"><span class="tabler--home"></span> Home</a>
<li class="nav-home">
<a href="/"><span class="tabler--home"></span> <span class="text">Home</span></a>
</li>
<li>
<a href="/me"><span class="tabler--user"></span> About me</a>
<li class="nav-notebook" >
<a href="/notebook"><span class="tabler--notebook"></span> <span class="text">Notebook</span></a>
</li>
<li>
<a href="/notebook"><span class="tabler--notebook"></span> Notebook</a>
<li class="nav-webmaster">
<a href="/me"><span class="tabler--user"></span> <span class="text">The webmaster</span></a>
</li>
<li>
<a href="/me#links"><span class="tabler--link"></span> Links</a>
<li class="nav-donate">
<a href="/donate"><span class="tabler--currency-dollar"></span> <span class="text">Donate</span></a>
</li>
</ul>
</details>
<nav class="nav-base nav-left nav-links">
<a href="/"><span class="tabler--home"></span> Home</a>
<div class="dot"></div>
<a href="/me"><span class="tabler--user"></span> About me</a>
<div class="dot"></div>
<a href="/notebook"><span class="tabler--notebook"></span> Notebook</a>
<div class="dot"></div>
<a href="/me#links"><span class="tabler--link"></span> Links</a>
</nav>
<details aria-label="Accessibility Settings" class="nav-base nav-right nav-accessibility">
<summary><span aria-label="Accessibility Settings" class="tabler--accessible"></span></summary>
</div>
<a class="nav-base nav-left nav-links nav-home" href="/"><span class="tabler--home"></span> <span class="text">Home</span></a>
<a class="nav-base nav-left nav-links nav-notebook" href="/notebook"><span class="tabler--notebook"></span> <span class="text">Notebook</span></a>
<a class="nav-base nav-left nav-links nav-webmaster" href="/me"><span class="tabler--user"></span> <span class="text">The webmaster</span></a>
<a class="nav-base nav-left nav-links nav-donate" href="/donate"><span class="tabler--currency-dollar"></span> <span class="text">Donate</span></a>
<details aria-label="Settings" class="nav-base nav-right nav-settings">
<summary><span aria-label="Settings" class="tabler--settings"></span></summary>
<ul>
<li>
<p>Accessibility Settings</p>
<p>Settings</p>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<hr class="solid">
<p class="caption section" style="font-size: smaller; opacity: .9;">Theme</p>
<p class="caption" style="color: var(--red);">Only works with JavaScript.</p>
@ -52,7 +50,7 @@
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<hr class="solid">
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
<span>
@ -82,7 +80,7 @@
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<hr class="solid">
<span>
<input type="checkbox" id="uncapitalization" name="uncapitalization" />
<label for="uncapitalization">Disable forced uncapitalization</label><br>
@ -101,7 +99,7 @@
</span>
</li>
<li>
<span aria-hidden="true" class="seperator"></span>
<hr class="solid">
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
<p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
</li>
@ -113,4 +111,4 @@
<span class="tabler--wifi"></span>
<span class="tabler--battery-filled"></span>
</p>
</div>
</nav>