content/personal/_index.md

@@ -4,7 +4,3 @@ 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: 4em;
+		margin-bottom: 5em;
 
 		.button {
 			padding: .5em 1.5em;
@@ -40,12 +40,11 @@
 		}
 
 		.name {
-			font-size: 1.1em;
 			font-weight: bold;
 		}
 
 		&.hidden {
-			opacity: .1;
+			opacity: .25;
 		}
 	}
 }

sass/style.scss

@@ -27,10 +27,6 @@ body {
 		width: 100%;
 	}
 
-	&.mobile-nav-open {
-		overflow: hidden;
-	}
-
 	@media (prefers-color-scheme: dark) {
 		color: $col-fg-0-dark;
 		background-color: $col-bg-0-dark;
@@ -44,16 +40,7 @@ body {
 	margin-right: auto;
 }
 
-.narrow {
-	max-width: 40em;
-}
-
-.centering {
-	text-align: center;
-}
-
 nav {
-	position: relative;
 	display: flex;
 	align-items: center;
 	border-bottom: 8px solid;
@@ -91,71 +78,10 @@ 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) {
-		&, .mobile-nav {
+		background-color: $col-bg-0-dark;
-			background-color: $col-bg-0-dark;
-			color: $col-fg-1-dark;
-		}
 	}
 }
 
@@ -234,18 +160,6 @@ 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,12 +15,6 @@
 			<ul>
 				{{ macros::nav_items() }}
 			</ul>
-			<div id="mobile-nav-button"></div>
-		</div>
-		<div class="mobile-nav">
-			<ul>
-				{{ macros::nav_items() }}
-			</ul>
 		</div>
 	</nav>
 
@@ -33,11 +27,6 @@
 
 	{% 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 narrow centering">
+	<section class="wrap">
 		{{ section.content | safe }}
 	</section>
 	<section class="wrap personnel">