Update design (WiP), title and date

assets/_colors.scss

@@ -1,6 +1,7 @@
-$color-background-0:    #272771;
+$color-background-0:    #00c8ff;
-$color-background-100:  #1d71b8;
+$color-background-100:  #bafdfe;
-$color-burger:          #ddd;
+$color-burger:          #000;
 $color-highlight:       #fff200;
-$color-link:            #fff200;
+$color-link:            #000;
-$color-text:            #fff;
+$color-link-footer:     #eee;
+$color-text:            #000;

assets/_fonts.scss

@@ -1,3 +1,8 @@
+@font-face {
+	font-family: "Bad Script";
+	src: url(/BadScript-Regular.ttf);
+}
+
 @font-face {
 	font-family: "Noto Sans";
 	src: local("Noto Sans"), local("NotoSans-Regular"), url(/NotoSans-Regular.ttf);
@@ -15,6 +20,12 @@
 	src: local("Noto Sans Italic"), local("NotoSans-Italic"), url(/NotoSans-Italic.ttf);
 }
 
+@font-face {
+	font-family: "Noto Sans Mono";
+	font-weight: 500;
+	src: local("Noto Sans Mono Medium"), local("NotoSansMono-Medium"), url(/NotoSansMono-Medium.ttf);
+}
+
 @font-face {
 	font-family: "Noto Sans Mono";
 	font-weight: 700;
@@ -22,6 +33,7 @@
 }
 
 @font-face {
-	font-family: "OCR A";
+	font-family: "Noto Sans Mono";
-	src: url(/OCRA.ttf), url(/OCRA.otf);
+	font-weight: 900;
+	src: local("Noto Sans Mono Black"), local("NotoSansMono-Black"), url(/NotoSansMono-Black.ttf);
 }

assets/_vars.scss

@@ -1,14 +1,2 @@
-$footer-spacing:  200px;
+$footer-spacing:  236px;
-$footer-height:   200px;
+$footer-height:   236px;
-
-//*
-$header-height:   200px;
-$header-spacing:  200px;
-$header-variant: header;
-/*/
-$header-height:  1000px;
-$header-spacing:  300px;
-$header-variant: header-tall;
-//*/
-
-$stars-height:  1057px;

assets/style.scss

@@ -17,27 +17,12 @@ body {
 	flex-direction: column;
 	font-family: "Noto Sans", sans-serif;
 	margin: 0 auto;
-	min-height: unquote("max(100vh, #{$stars-height})");
+	min-height: 100vh;
 	max-width: $large;
 
 	main {
 		flex-grow: 1;
 	}
-
-	@media screen and (min-width: $small) {
-		&::before {
-			background: url(/stars.svg) repeat-x top;
-			clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + #{$large * 0.5}) 100%, calc(50% + #{$large * 0.5}) $header-spacing, calc(50% - #{$large * 0.5}) $header-spacing, calc(50% - #{$large * 0.5}) 100%, 0 100%);
-			content: '';
-			display: block;
-			height: $stars-height;
-			left: 0;
-			position: absolute;
-			top: 0;
-			width: 100%;
-			z-index: -1;
-		}
-	}
 }
 
 header, footer {
@@ -51,14 +36,14 @@ header {
 	margin-top: 1rem;
 
 	pre {
-		font-family: "OCR A", "Noto Sans Mono", monospace;
+		font-family: "Noto Sans Mono", monospace;
 		font-size: 0.8rem;
-		font-weight: bold;
+		font-weight: 500;
 		line-height: 1;
 		user-select: none;
 
 		span {
-			color: $color-highlight;
+			font-weight: 900;
 		}
 	}
 
@@ -93,20 +78,6 @@ header {
 
 	@media screen and (min-width: $small) {
 		flex-wrap: nowrap;
-		margin-top: $header-spacing;
-		padding-top: 0.5rem;
-
-		&::before {
-			background: url(/#{$header-variant}.svg) 50% 0% / auto $header-height no-repeat;
-			content: '';
-			display: block;
-			height: $header-height;
-			left: 0;
-			position: absolute;
-			top: 0;
-			width: 100%;
-			z-index: -1;
-		}
 
 		nav {
 			flex-wrap: wrap;
@@ -119,19 +90,32 @@ main {
 	padding: 1rem;
 
 	.upcoming {
-		font-family: "OCR A", "Noto Sans Mono", monospace;
+		font-family: "Bad Script", cursive;
 		font-size: 3em;
+		line-height: 1.2;
+		margin: 1em 0;
 		text-align: center;
 
-		.uber {
+		.dash {
-			background: url(/uber.svg) no-repeat 50% 69% / 92.5% 92.5%;
+			margin-right: 0.2em;
-			color: transparent;
+			vertical-align: 0.12em;
 		}
 
-		.detail {
+		.dot {
-			display: block;
+			margin-left: -0.08em;
-			font-size: 50%;
+			vertical-align: 0.02em;
-			margin-top: 0.4em;
+		}
+
+		.four {
+			vertical-align: 0.25em;
+		}
+
+		.nine, .seven {
+			vertical-align: 0.42em;
+		}
+
+		.two, .zero {
+			vertical-align: 0.1em;
 		}
 	}
 }
@@ -164,8 +148,12 @@ footer {
 		}
 
 		& > nav {
-			margin-bottom: unquote("calc(#{$footer-spacing} + 1rem)");
+			margin-bottom: 1.5rem;
-			margin-top: 1.5rem;
+			margin-top: unquote("calc(#{$footer-spacing} + 1rem)");
+
+			a {
+				color: $color-link-footer;
+			}
 		}
 	}
 }
@@ -198,6 +186,10 @@ nav {
 		margin: 0.5em 0 0 0;
 	}
 
+	a {
+		text-decoration: none;
+	}
+
 	@media screen and (min-width: $small) {
 		flex-direction: row;
 
@@ -214,7 +206,7 @@ nav {
 
 a {
 	color: $color-link;
-	text-decoration: none;
+	text-decoration: underline dashed;
 
 	&:hover, &.is-active {
 		text-decoration: underline;

layouts/_default/baseof.html

@@ -42,9 +42,10 @@
 		</header>
 		<main>
 			<p class="upcoming">
-				23.000 Meilen <span class="uber">uber</span> dem Meer<br>
+				IGERla<br>
-				20.-&#8203;23.&#8203;7.&#8203;2023<br>
+				<span class="seven">7</span><span class="dot">.</span><span class="dash">-</span><span class="nine">9</span><span class="dot">.</span>
-				<span class="detail"><a href="{{ relref . "/faq#was-ist-eigentlich-eine-_intergalaktische-erfahrungsreise_" }}">Ein Event des backspace&nbsp;e.&nbsp;V. in Bamberg</a></span>
+				Juni
+				<span class="two">2</span><span class="zero">0</span><span class="two">2</span><span class="four">4</span>
 			</p>
 			{{ block "main" . }}
 			{{ end }}