assets/_colors.scss

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

assets/_fonts.scss

@@ -1,8 +1,3 @@
-@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);
@@ -20,12 +15,6 @@
 	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;
@@ -33,7 +22,6 @@
 }
 
 @font-face {
-	font-family: "Noto Sans Mono";
-	font-weight: 900;
-	src: local("Noto Sans Mono Black"), local("NotoSansMono-Black"), url(/NotoSansMono-Black.ttf);
+	font-family: "OCR A";
+	src: url(/OCRA.ttf), url(/OCRA.otf);
 }

assets/_vars.scss

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

config.toml

@@ -15,30 +15,30 @@ title = 'Intergalaktische Erfahrungsreise'
     [menu.footer.params]
       rel = "me"
 
-# [[menu.main]]
-#   name = "Tickets"
-#   url = "https://tickets.fairydust.reisen/iger-2023/"
-#   weight = 20
+  [[menu.main]]
+    name = "Tickets"
+    url = "https://tickets.fairydust.reisen/iger-2023/"
+    weight = 20
 # [[menu.main]]
 #   name = "CfP"
 #   url = "https://cfp.fairydust.reisen/iger-2023/"
 #   weight = 30
-# [[menu.main]]
-#   name = "Programm"
-#   url = "https://cfp.fairydust.reisen/iger-2023/schedule/"
-#   weight = 30
-# [[menu.main]]
-#   name = "Engelsystem"
-#   url = "https://helfen.fairydust.reisen/"
-#   weight = 40
-# [[menu.main]]
-#   name = "Wiki"
-#   url = "https://wiki.fairydust.reisen/"
-#   weight = 45
-# [[menu.main]]
-#   name = "Lageplan"
-#   url = "/lageplan.pdf"
-#   weight = 47
+  [[menu.main]]
+    name = "Programm"
+    url = "https://cfp.fairydust.reisen/iger-2023/schedule/"
+    weight = 30
+  [[menu.main]]
+    name = "Engelsystem"
+    url = "https://helfen.fairydust.reisen/"
+    weight = 40
+  [[menu.main]]
+    name = "Wiki"
+    url = "https://wiki.fairydust.reisen/"
+    weight = 45
+  [[menu.main]]
+    name = "Lageplan"
+    url = "/lageplan.pdf"
+    weight = 47
 # [[menu.main]]
 #   name = "Feedback"
 #   url = "https://wiki.fairydust.reisen/feedback"

layouts/_default/baseof.html

@@ -42,10 +42,9 @@
 		</header>
 		<main>
 			<p class="upcoming">
-				IGERla<br>
-				<span class="seven">7</span><span class="dot">.</span><span class="dash">-</span><span class="nine">9</span><span class="dot">.</span>
-				Juni
-				<span class="two">2</span><span class="zero">0</span><span class="two">2</span><span class="four">4</span>
+				23.000 Meilen <span class="uber">uber</span> dem Meer<br>
+				20.-&#8203;23.&#8203;7.&#8203;2023<br>
+				<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>
 			</p>
 			{{ block "main" . }}
 			{{ end }}