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

add home to mobile menu
All checks were successful
/ build (push) Successful in 4m42s
Details

Browse source
This commit is contained in:
Ruben 2025-10-27 11:44:02 -05:00
commit d7ab4a1533
Signed by: sneexy
GPG key ID: 8ECFA045E63BC583
2 changed files with 14 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

5
_includes/layouts/base/navbar.njk
View file

@ -1,13 +1,16 @@
<!-- top navbar -->
<header class="navbar">
<navbar-left>
<a class="nav-base nav-baselink nav-desktop" aria-label="Synth.download Homepage" href="/home"><img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" /></a>
<a class="nav-base 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-mobile-menu">
<input type="checkbox" id="nav-mobile-menu-dropdown" value="" name="nav-mobile-menu-dropdown">
<label class="nav-base nav-baselink" 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 class="nav-home">
<a href="/"><icon-tabler home></icon-tabler> <span class="text">Home</span></a>
</li>
<li class="nav-about">
<a href="/about"><icon-tabler info-circle></icon-tabler> <span class="text">About</span></a>
</li>

13
_includes/styles/base/navbar.css
View file

@ -114,8 +114,8 @@
.nav-about {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
background-color: light-dark(color-mix(in srgb, var(--green) 25%, var(--background)), var(--green));
outline-color: color-mix(in srgb, var(--green) 60%, transparent);
}
}
@ -152,6 +152,7 @@
border: var(--accent) solid .15rem;
height: max-content;
left: 0;
margin-left: unset;
margin-top: 2.2rem !important;
position: absolute;
visibility: hidden;
@ -193,10 +194,16 @@
color: light-dark(var(--foreground), var(--background));
}
}
.nav-home {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
}
}
.nav-about {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
background-color: light-dark(color-mix(in srgb, var(--green) 25%, var(--background)), var(--green));
}
}