Skip to content
Snippets Groups Projects
Verified Commit 94ca0346 authored by Dominic Meiser's avatar Dominic Meiser
Browse files

burger

parent 3bc44f4d
No related branches found
No related tags found
1 merge request!2Burger
// the threshold at which we consider the screen "mobile"
@mobile_threshold: 700px;
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: sans-serif; font-family: sans-serif;
...@@ -37,10 +40,8 @@ a { ...@@ -37,10 +40,8 @@ a {
} }
nav { nav {
&, #nav-links {
background-color: var(--accent); background-color: var(--accent);
.active {
background-color: var(--accent2);
}
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
...@@ -55,6 +56,57 @@ nav { ...@@ -55,6 +56,57 @@ nav {
} }
} }
.active {
background-color: var(--accent2);
}
#title {
@media screen and (max-width: @mobile_threshold) {
flex-grow: 1;
}
}
#burger_checkbox {
display: none;
}
#burger {
height: 2rem;
width: 2rem;
padding: 0;
margin-right: 1rem;
flex-grow: 0;
flex-shrink: 0;
align-self: center;
@media screen and (min-width: (@mobile_threshold + 1)) {
visibility: hidden;
display: none;
}
}
#nav-links {
padding: 0;
}
@media screen and (max-width: @mobile_threshold) {
position: relative;
#burger_checkbox:not(:checked) ~ #nav-links {
display: none;
}
#burger_checkbox:checked ~ #nav-links {
position: absolute;
right: 0;
top: 100%;
flex-direction: column;
}
}
}
main { main {
width: min(95vw, 100rem); width: min(95vw, 100rem);
margin: 2rem auto; margin: 2rem auto;
......
...@@ -25,9 +25,17 @@ ...@@ -25,9 +25,17 @@
{%- block body -%} {%- block body -%}
{%- block nav -%} {%- block nav -%}
<nav> <nav>
<h1>Schildergenerator NEU!</h1> <h1 id="title">Schildergenerator NEU!</h1>
<input id="burger_checkbox" type="checkbox"/>
<label id="burger" for="burger_checkbox">
<svg viewBox="0 0 30 30" stroke="white" stroke-width="2" fill="none">
<path d="M0,5 H30 M0,15 H30 M0,25 H30"/>
</svg>
</label>
<div id="nav-links">
<a {{ maybe_active_href("views.index") }}>Startseite</a> <a {{ maybe_active_href("views.index") }}>Startseite</a>
<a {{ maybe_active_href("views.create") }}>Neues Schild</a> <a {{ maybe_active_href("views.create") }}>Neues Schild</a>
</div>
</nav> </nav>
{%- endblock nav -%} {%- endblock nav -%}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment