Merge branch 'burger' into 'main'

Burger

See merge request !2

frontend/src/main.less

+// the threshold at which we consider the screen "mobile"
+@mobile_threshold: 700px;
+
 * {
 	box-sizing: border-box;
 	font-family: sans-serif;
@@ -37,10 +40,8 @@ a {
 }
 
 nav {
+	&, #nav-links {
 		background-color: var(--accent);
-	.active {
-		background-color: var(--accent2);
-	}
 
 		display: flex;
 		justify-content: flex-start;
@@ -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 {
 	width: min(95vw, 100rem);
 	margin: 2rem auto;

schilder2000/templates/_base.html.j2

@@ -25,9 +25,17 @@
 		{%- block body -%}
 			{%- block 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.create") }}>Neues Schild</a>
+					</div>
 				</nav>
 			{%- endblock nav -%}