Mobile nav

content/personal/_index.md

@@ -4,3 +4,7 @@ template = "personnel.html"
 sort_by = "weight"
 page_template = "page.html"
 +++
+
+# Personál
+
+Na každém z našich táborů je mnoho lidí, kteří se starají o program, jídlo, bezpečí a celkově hladký průběh tábora. Každý má své povinnosti a starosti, věří, že jeho funkce je ta nejdůležitější apodle toho k ní přistupuje. Pokusíme se Vám tedy přiblížit, kdo a co u nás na táboře dělá.

sass/_personnel.scss

@@ -4,7 +4,7 @@
 		display: flex;
 		justify-content: center;
 		gap: 1em;
-		margin-bottom: 5em;
+		margin-bottom: 4em;
 
 		.button {
 			padding: .5em 1.5em;
@@ -40,11 +40,12 @@
 		}
 
 		.name {
+			font-size: 1.1em;
 			font-weight: bold;
 		}
 
 		&.hidden {
-			opacity: .25;
+			opacity: .1;
 		}
 	}
 }

sass/style.scss

@@ -27,6 +27,10 @@ body {
 		width: 100%;
 	}
 
+	&.mobile-nav-open {
+		overflow: hidden;
+	}
+
 	@media (prefers-color-scheme: dark) {
 		color: $col-fg-0-dark;
 		background-color: $col-bg-0-dark;
@@ -40,7 +44,16 @@ body {
 	margin-right: auto;
 }
 
+.narrow {
+	max-width: 40em;
+}
+
+.centering {
+	text-align: center;
+}
+
 nav {
+	position: relative;
 	display: flex;
 	align-items: center;
 	border-bottom: 8px solid;
@@ -78,10 +91,71 @@ nav {
 				}
 			}
 		}
+
+		#mobile-nav-button {
+			display: none;
+			width: auto;
+			font-size: 2em;
+			font-family: remixicon;
+			cursor: pointer;
+
+			&::after { content: "\ef3e" }
+			body.mobile-nav-open &::after { content: "\eb99" }
+		}
+
+		@media only screen and (max-width: $width-mobile) {
+			padding: 1em 2em;
+			align-items: center;
+
+			.logo { height: 2em }
+			ul { display: none }
+			#mobile-nav-button { display: block }
+		}
+	}
+
+	.mobile-nav {
+		display: none;
+		position: absolute;
+		left: 0;
+		top: 100%;
+		width: 100%;
+		height: 100vh;
+		z-index: 99;
+		background-color: $col-bg-0-light;
+		overflow: hidden;
+		transform: translateY(7px); // Width of nav border
+
+		body.mobile-nav-open & {
+			display: block;
+		}
+
+		ul {
+			list-style: none;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+			gap: 2em;
+			padding: 2em 1em;
+
+			a {
+				color: inherit;
+				font-weight: bold;
+				font-size: 1.5em;
+				padding: 1rem;
+			}
+		}
+
+		// Hide the mobile nav when open and screen is resized to wide mode
+		@media only screen and (min-width: $width-mobile) {
+			body.mobile-nav-open & { display: none }
+		}
 	}
 
 	@media (prefers-color-scheme: dark) {
-		background-color: $col-bg-0-dark;
+		&, .mobile-nav {
+			background-color: $col-bg-0-dark;
+			color: $col-fg-1-dark;
+		}
 	}
 }
 
@@ -160,6 +234,18 @@ header {
 
 section {
 	padding: 3em 1em;
+
+	h1 {
+		font-size: 2em;
+		margin: .5em 0 1em 0;
+
+		&::before {
+			display: block;
+			content: "\ea81";
+			font-family: remixicon;
+			color: $col-red-light;
+		}
+	}
 }
 
 footer {

templates/base.html

@@ -15,6 +15,12 @@
 			<ul>
 				{{ macros::nav_items() }}
 			</ul>
+			<div id="mobile-nav-button"></div>
+		</div>
+		<div class="mobile-nav">
+			<ul>
+				{{ macros::nav_items() }}
+			</ul>
 		</div>
 	</nav>
 
@@ -27,6 +33,11 @@
 
 	{% block script %}
 	{% endblock %}
+	<script>
+		document.querySelector("#mobile-nav-button").addEventListener("click", function() {
+			document.body.classList.toggle("mobile-nav-open");
+		});
+	</script>
 </body>
 </html>
 

templates/personnel.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-	<section class="wrap">
+	<section class="wrap narrow centering">
 		{{ section.content | safe }}
 	</section>
 	<section class="wrap personnel">