Use normal font size for main nav, increase margin between nav items

assets/_colors.scss

@@ -1,4 +1,4 @@
 $color-background:  #fff;
 $color-burger:      #231f20;
-$color-link:        #231f20;
+$color-link:        #000;
 $color-text:        #000;

assets/style.scss

@@ -14,6 +14,8 @@ body {
 	display: flex;
 	flex-direction: column;
 	font-family: "Maven Pro", sans-serif;
+	font-size: 18px;
+	line-height: 1.5;
 	margin: 0 auto;
 	max-width: $large;
 	min-height: 100vh;
@@ -34,8 +36,13 @@ header {
 	justify-content: space-between;
 	margin-top: 1rem;
 
-	nav {
-		font-size: 1.2rem;
+	a img {
+		display: block;
+	}
+
+	.header-brand {
+		align-items: center;
+		display: flex;
 	}
 
 	.header-logo {
@@ -46,13 +53,41 @@ header {
 	.nav-burger {
 		margin-right: 0.5rem;
 	}
+
+	.sm-menu {
+		display: flex;
+		margin-left: 0.5rem;
+
+		a {
+			margin-left: 0.5rem;
+
+			.sm-icon {
+				height: auto;
+				transition: opacity 0.25s;
+				width: 1.5rem;
+			}
+
+			&:hover .sm-icon {
+				opacity: 0.7;
+			}
+		}
+	}
+
+	@media screen and (min-width: $small) {
+		flex-wrap: nowrap;
+
+		nav {
+			flex-wrap: wrap;
+			justify-content: right;
+		}
+	}
 }
 
 main {
 	padding: 1rem;
 
 	& > :last-child {
-		margin-bottom: 0;
+		margin-bottom: 0 !important;
 	}
 
 	& > p > img {
@@ -110,7 +145,65 @@ nav {
 		}
 
 		a, span {
-			margin: 0 0 0 1em;
+			margin: 0 0 0 1.5em;
+		}
+	}
+}
+
+article {
+	display: flex;
+
+	& > .image {
+		display: none;
+
+		& > img {
+			height: auto;
+			width: 100%;
+		}
+
+		@media screen and (min-width: $small) {
+			display: block;
+		}
+	}
+
+	&.preview {
+		margin-bottom: 3rem;
+
+		& > .image {
+			align-items: center;
+			height: 200px;
+			justify-content: center;
+			min-width: 200px;
+			overflow: hidden;
+			margin-right: 1.5rem;
+			width: 200px;
+
+			@media screen and (min-width: $small) {
+				display: flex;
+			}
+		}
+
+		& > .text {
+			flex-grow: 1;
+		}
+	}
+
+	&.page {
+		& > .image {
+			text-align: right;
+
+			@media screen and (min-width: $small) {
+				padding-left: 1.5em;
+				width: 60%;
+			}
+		}
+
+		& > .text {
+			width: 100%;
+
+			@media screen and (min-width: $small) {
+				width: 40%;
+			}
 		}
 	}
 }
@@ -125,6 +218,7 @@ a {
 }
 
 h1, h2, h3, h4, h5, h6 {
+	font-weight: normal;
 	margin-bottom: 0.5em;
 }
 
@@ -151,6 +245,14 @@ hr {
 	}
 }
 
+.date {
+	margin-bottom: 0;
+
+	@media screen and (min-width: $small) {
+		margin-bottom: 0.5em;
+	}
+}
+
 .nav-burger {
 	cursor: pointer;
 	display: flex;

config.toml

@@ -5,13 +5,22 @@ title = 'kontakt – Das Kulturprojekt'
 
 [menu]
   [[menu.footer]]
+    name = "Impressum"
+    url = "https://asta-bamberg.de/impressum"
+    weight = 10
+
+  [[menu.sm]]
     name = "Facebook"
     url = "https://facebook.com/kontakt.Das.Kulturfestival"
     weight = 10
-  [[menu.footer]]
+    [menu.sm.params]
+      src = "/f_logo_RGB-Black_1024.svg"
+  [[menu.sm]]
     name = "Instagram"
     url = "https://instagram.com/kontakt_das_kulturprojekt"
     weight = 20
+    [menu.sm.params]
+      src = "/Instagram_Glyph_Black.svg"
 
 [minify]
   minifyOutput = true

content/_index.md

@@ -6,3 +6,6 @@ menu:
 ---
 
 ![kontakt – Das Kulturfestival (Symbolbild)](/symbolbild.jpg)
+by [ChrisU](https://instagram.com/chrisu_photography)
+
+# Aktuelles

content/pages/datenschutz/index.md

@@ -0,0 +1,22 @@
+---
+slug: "datenschutz"
+title: "Datenschutzerklärung"
+menu:
+  footer:
+    weight: 20
+resources:
+  - params:
+      copyright: ChrisU
+      copyright_url: https://instagram.com/chrisu_photography
+    src: image.jpg
+    title: Foto eines "grandMA"-Lichtpults mit blauem Licht im Hintergrund
+---
+
+Auf kontakt-bamberg.de werden keine personenbezogenen Daten erhoben.
+
+Einige Daten werden jedoch technisch bedingt automatisch erfasst und gespeichert. Diese Daten werden von Ihrem Browser automatisch gesendet und beinhalten Browsertyp und -version, die Referrer-URL, Ihre IP-Adresse sowie die Uhrzeit der Anfrage. Diese Daten sind nicht bestimmten Personen zuordenbar.
+
+Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen, die Daten werden zudem anonymisiert und nach einer statistischen Auswertung gelöscht.
+Um die Nutzerzahlen auf kontakt-bamberg.de statistisch auszuwerten, werden außerdem auf Ihrem Rechner sogeannte »Cookies« gespeichert. Diese Cookies sind kleine Textdateien und enthalten ebenfalls keine persönlichen Daten. Drittanbieter-Cookies werden nicht verwendet.
+
+Bei offenen Fragen zum Datenschutz und für Auskunftsgesuche: mail@kontakt-bamberg.de

layouts/_default/baseof.html

@@ -17,7 +17,14 @@
 	</head>
 	<body>
 		<header>
-			<img alt="Logo von kontakt &ndash; dem Kulturprojekt" class="header-logo" src="/logo.svg">
+			<div class="header-brand">
+				<a href="{{ .Site.BaseURL }}"><img alt="Logo von kontakt &ndash; dem Kulturprojekt" class="header-logo" src="/logo.svg"></a>
+				<div class="sm-menu">
+{{ range .Site.Menus.sm }}
+					<a href="{{ .URL }}"{{ if hasPrefix .URL "https://" }} target="_blank"{{ end }}><img alt="{{ .Name }}" class="sm-icon" src="{{ .Params.src }}"></a>
+{{ end }}
+				</div>
+			</div>
 			<input class="nav-toggle" id="toggleMainNav" type="checkbox">
 			<label class="nav-burger" for="toggleMainNav">
 				<div></div>

layouts/_default/single.html

@@ -1,4 +1,23 @@
 {{ define "main" }}
 <h1>{{ .Title }}</h1>
+{{ $textContent := .Content }}
+{{ with .Resources.GetMatch "image.jpg" }}
+<article class="page">
+	<section class="text">{{ $textContent }}</section>
+	<section class="image">
+		<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
+{{ $params := .Params }}
+{{ with $params.copyright }}
+{{ $copyright := . }}
+{{ with $params.copyright_url }}
+		by <a href="{{ . }}"{{ if hasPrefix . "https://" }} target="_blank"{{ end }}>{{ $copyright }}</a>
+{{ else }}
+		by {{ $copyright }}
+{{ end }}
+{{ end }}
+	</section>
+</article>
+{{ else }}
 {{ .Content }}
 {{ end }}
+{{ end }}

layouts/index.html

@@ -1,11 +1,22 @@
 {{ define "main" }}
 {{ .Content }}
 {{ $pagination := .Paginate .RegularPages }}
-{{ with .Content }}{{ with $pagination.Pages }}<hr>{{ end }}{{ end }}
+{{ $days := dict "Monday" "Mo" "Tuesday" "Di" "Wednesday" "Mi" "Thursday" "Do" "Friday" "Fr" "Saturday" "Sa" "Sunday" "So" }}
+{{ $months := dict "January" "Januar" "February" "Februar" "March" "März" "April" "April" "May" "Mai" "June" "Juni" "July" "Juli" "August" "August" "September" "September" "October" "Oktober" "November" "November" "December" "Dezember" }}
 {{ range $pagination.Pages }}
-<h1><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
-{{ .Content }}
-{{ if ne .Slug (index (last 1 $pagination.Pages) 0).Slug }}<hr>{{ end }}
+<p class="date">{{ index $days (.Date.Format "Monday") }}, {{ .Date.Format "02" }}. {{ index $months (.Date.Format "January") }} {{ .Date.Format "2006" }}</p>
+<article class="preview">
+{{ with .Resources.GetMatch "image.jpg" }}
+	<section class="image"><img alt="{{ .Title }}" src="{{ .RelPermalink }}"></section>
+{{ end }}
+	<section class="text">
+		<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+		{{ .Summary }}
+{{ if .Truncated }}
+		<a href="{{ .RelPermalink }}">> Mehr &lt;</a>
+{{ end }}
+	</section>
+</article>
 {{ end }}
 {{ with $pagination }}
 {{ if gt .TotalPages 1 }}

static/Instagram_Glyph_Black.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M295.42,6c-53.2,2.51-89.53,11-121.29,23.48-32.87,12.81-60.73,30-88.45,57.82S40.89,143,28.17,175.92c-12.31,31.83-20.65,68.19-23,121.42S2.3,367.68,2.56,503.46,3.42,656.26,6,709.6c2.54,53.19,11,89.51,23.48,121.28,12.83,32.87,30,60.72,57.83,88.45S143,964.09,176,976.83c31.8,12.29,68.17,20.67,121.39,23s70.35,2.87,206.09,2.61,152.83-.86,206.16-3.39S799.1,988,830.88,975.58c32.87-12.86,60.74-30,88.45-57.84S964.1,862,976.81,829.06c12.32-31.8,20.69-68.17,23-121.35,2.33-53.37,2.88-70.41,2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45S862,40.87,829.07,28.19c-31.82-12.31-68.17-20.7-121.39-23S637.33,2.3,501.54,2.56,348.75,3.4,295.42,6m5.84,903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29,2.53-202c2.08-48.71,10.23-75.21,17-92.84,9-23.39,19.84-40,37.29-57.57s34.1-28.39,57.43-37.51c17.62-6.88,44.06-15.06,92.79-17.38,52.73-2.5,68.53-3,202-3.29s149.31.21,202.06,2.53c48.71,2.12,75.22,10.19,92.83,17,23.37,9,40,19.81,57.57,37.29s28.4,34.07,37.52,57.45c6.89,17.57,15.07,44,17.37,92.76,2.51,52.73,3.08,68.54,3.32,202s-.23,149.31-2.54,202c-2.13,48.75-10.21,75.23-17,92.89-9,23.35-19.85,40-37.31,57.56s-34.09,28.38-57.43,37.5c-17.6,6.87-44.07,15.07-92.76,17.39-52.73,2.48-68.53,3-202.05,3.29s-149.27-.25-202-2.53m407.6-674.61a60,60,0,1,0,59.88-60.1,60,60,0,0,0-59.88,60.1M245.77,503c.28,141.8,115.44,256.49,257.21,256.22S759.52,643.8,759.25,502,643.79,245.48,502,245.76,245.5,361.22,245.77,503m90.06-.18a166.67,166.67,0,1,1,167,166.34,166.65,166.65,0,0,1-167-166.34" transform="translate(-2.5 -2.5)"/></svg>

static/f_logo_RGB-Black_1024.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="1024pt"
+   height="1024pt"
+   viewBox="0 0 1024 1024"
+   version="1.1"
+   id="svg288"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs292" />
+  <path
+     fill-rule="nonzero"
+     fill="rgb(6.266785%, 5.734253%, 5.047607%)"
+     fill-opacity="1"
+     d="M 1024 512 C 1024 229.230469 794.769531 0 512 0 C 229.230469 0 0 229.230469 0 512 C 0 767.554688 187.230469 979.371094 432 1017.78125 L 432 660 L 302 660 L 302 512 L 432 512 L 432 399.199219 C 432 270.878906 508.4375 200 625.390625 200 C 681.40625 200 740 210 740 210 L 740 336 L 675.4375 336 C 611.835938 336 592 375.46875 592 415.957031 L 592 512 L 734 512 L 711.300781 660 L 592 660 L 592 1017.78125 C 836.769531 979.371094 1024 767.554688 1024 512 "
+     id="path284" />
+  <path
+     fill-rule="nonzero"
+     fill="rgb(100%, 100%, 100%)"
+     fill-opacity="1"
+     d="M 711.300781 660 L 734 512 L 592 512 L 592 415.957031 C 592 375.46875 611.835938 336 675.4375 336 L 740 336 L 740 210 C 740 210 681.40625 200 625.390625 200 C 508.4375 200 432 270.878906 432 399.199219 L 432 512 L 302 512 L 302 660 L 432 660 L 432 1017.78125 C 458.066406 1021.871094 484.785156 1024 512 1024 C 539.214844 1024 565.933594 1021.871094 592 1017.78125 L 592 660 L 711.300781 660 "
+     id="path286" />
+</svg>