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;
}
#menu-toggle {
#menu-toggle,
#menu-toggle + label {
display: none;
appearance: none;
}
@media (max-width: 50em) {
@ -136,14 +138,22 @@ header > nav > ul > li > details > nav ul li {
display: block;
}
#menu-toggle::before {
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");
#menu-toggle ~ label {
position: absolute;
right: 1em;
top: 0.5em;
cursor: pointer;
display: block;
}
#menu-toggle:checked::before {
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-close,
.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 {
margin-bottom: 1em;
@ -210,14 +220,4 @@ header > nav > ul > li > details > nav ul li {
header {
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 = [
''
<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)}
</header>
''