fricklerhandwerk/Fediversity
1
0
Fork 0
forked from Fediversity/Fediversity
Code Pull requests Activity

show mobile menu toggle in mode-sensitive color

Browse source
This commit is contained in:
Valentin Gagarin 2024-11-14 17:42:06 +01:00
parent 3ae51fa545
commit 96641d2d3d
2 changed files with 24 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
website/presentation/style.css
View file

@ -127,8 +127,10 @@ header > nav > ul > li > details > nav ul li {
padding: 0.25em 0; padding: 0.25em 0;
} }
#menu-toggle { #menu-toggle,
#menu-toggle + label {
display: none; display: none;
appearance: none;
} }
@media (max-width: 50em) { @media (max-width: 50em) {
@ -136,14 +138,22 @@ header > nav > ul > li > details > nav ul li {
display: block; display: block;
} }
#menu-toggle::before { #menu-toggle ~ label {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'%3E%3Cpath d='M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z'/%3E%3C/svg%3E"); position: absolute;
right: 1em;
top: 0.5em;
cursor: pointer;
display: block; display: block;
} }
#menu-toggle:checked::before { .menu-close,
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 20 20'%3E%3Cpolygon points='11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2' transform='rotate(45 10 10)'/%3E%3C/svg%3E"); .menu-open {
cursor: pointer;
fill: var(--text-color);
} }
.menu-close { display: none; }
#menu-toggle:checked + label .menu-close { display: block; }
#menu-toggle:checked + label .menu-open { display: none; }
header > nav { header > nav {
margin-bottom: 1em; margin-bottom: 1em;
@ -210,14 +220,4 @@ header > nav > ul > li > details > nav ul li {
header { header {
position: relative; position: relative;
} }
/* for some reason this must be at the end to work */
#menu-toggle {
display: block;
position: absolute;
right: 1em;
top: 0.5em;
appearance: none;
cursor: pointer;
}
} }

10
website/structure/page.nix
View file

@ -63,7 +63,15 @@ in
body.content = [ body.content = [
'' ''
<header> <header>
<input type="checkbox" id="menu-toggle"> <input type="checkbox" id="menu-toggle" hidden>
<label for="menu-toggle" hidden>
<svg class="menu-open" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20">
<path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"/>
</svg>
<svg class="menu-close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20">
<polygon points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2" transform="rotate(45 10 10)"/>
</svg>
</label>
${lib.indent " " (cfg.menus.main.outputs.html page)} ${lib.indent " " (cfg.menus.main.outputs.html page)}
</header> </header>
'' ''