Add page intro text styles

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

@@ -40,6 +40,14 @@ body {
 	margin-right: auto;
 }
 
+.narrow {
+	max-width: 40em;
+}
+
+.centering {
+	text-align: center;
+}
+
 nav {
 	display: flex;
 	align-items: center;
@@ -160,6 +168,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/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">