diff --git a/assets/_animations.scss b/assets/_animations.scss
new file mode 100644
index 0000000..64da9a2
--- /dev/null
+++ b/assets/_animations.scss
@@ -0,0 +1,9 @@
+@keyframes rainbow {
+	0% { color: #ff0000; }
+	16.66% { color: #ff8000; }
+	33.33% { color: #ffff00; }
+	50% { color: #00ff00; }
+	66.66% { color: #0000ff; }
+	83.33% { color: #8000ff; }
+	100% { color: #ff0000; }
+}
diff --git a/assets/_breakpoints.scss b/assets/_breakpoints.scss
new file mode 100644
index 0000000..df72db0
--- /dev/null
+++ b/assets/_breakpoints.scss
@@ -0,0 +1,2 @@
+$large: 1000px;
+$small:  800px;
diff --git a/assets/_colors.scss b/assets/_colors.scss
new file mode 100644
index 0000000..bf0558c
--- /dev/null
+++ b/assets/_colors.scss
@@ -0,0 +1,4 @@
+$color-background:  #10161c;
+$color-burger:      #ddd;
+$color-link:        #fb923c;
+$color-text:        #c0cfe0;
diff --git a/assets/style.css b/assets/style.css
deleted file mode 100644
index 0a565b2..0000000
--- a/assets/style.css
+++ /dev/null
@@ -1,32 +0,0 @@
-h1 {
-	width: 100%;
-	text-align: center;
-	font-size: 96px;
-	line-height: 1;
-	margin: calc(50vh - 48px) 0 calc(50vh - 48px) 0;
-	color: #ff0000;
-	animation: rainbow 3s linear 0s infinite;
-}
-
-footer {
-	text-align: center;
-}
-
-a, a:link, a:visited {
-	color: #444;
-	text-decoration: none;
-}
-
-a:hover {
-	color: #888;
-}
-
-@keyframes rainbow {
-	0% { color: #ff0000; }
-	16.66% { color: #ff8000; }
-	33.33% { color: #ffff00; }
-	50% { color: #00ff00; }
-	66.66% { color: #0000ff; }
-	83.33% { color: #8000ff; }
-	100% { color: #ff0000; }
-}
diff --git a/assets/style.scss b/assets/style.scss
new file mode 100644
index 0000000..c3e2b2d
--- /dev/null
+++ b/assets/style.scss
@@ -0,0 +1,133 @@
+@import 'animations';
+@import 'breakpoints';
+@import 'colors';
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	background: $color-background;
+	color: $color-text;
+	display: flex;
+	flex-direction: column;
+	font-family: "Noto Sans", sans-serif;
+	margin: 0 auto;
+	max-width: $large;
+	min-height: 100vh;
+
+	& > main {
+		flex-grow: 1;
+	}
+}
+
+header {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-top: 1rem;
+	padding: 0 1rem;
+
+	& > .header-title {
+		font-weight: bold;
+	}
+
+	& > .nav-burger {
+		margin-right: 0.5rem;
+	}
+}
+
+main {
+	padding: 1rem;
+}
+
+nav {
+	display: flex;
+	flex-direction: column;
+
+	&.nav-toggleable {
+		flex-basis: 100%;
+		max-height: 0;
+		overflow-y: hidden;
+		transition: max-height 0.5s;
+
+		.nav-toggle:checked ~ & {
+			max-height: calc(var(--num-elements) * 2em);
+		}
+	}
+
+	a, span {
+		line-height: 1.5em;
+		margin: 0.5em 0 0 0;
+	}
+
+	@media screen and (min-width: $small) {
+		flex-direction: row;
+
+		&.nav-toggleable {
+			flex-basis: auto;
+			max-height: max-content;
+		}
+
+		a, span {
+			margin: 0 0 0 1.2em;
+		}
+	}
+}
+
+a {
+	color: $color-link;
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+.hello-world {
+	animation: rainbow 3s linear 0s infinite;
+	font-family: "Noto Sans Mono", monospace;
+	font-size: 96px;
+	line-height: 1.15;
+	text-align: center;
+}
+
+.nav-burger {
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	height: 1rem;
+	justify-content: space-between;
+	width: 1.2rem;
+
+	div {
+		background: $color-burger;
+		height: 2px;
+		transition: background 0.5s, transform 0.5s;
+	}
+
+	.nav-toggle:checked ~ & div {
+		background: transparent;
+
+		&:first-child {
+			background: $color-burger;
+			transform: translateY(0.5rem) translateY(-1px) rotate(45deg) scaleX(141%);
+		}
+
+		&:last-child {
+			background: $color-burger;
+			transform: translateY(-0.5rem) translateY(1px) rotate(-45deg) scaleX(141%);
+		}
+	}
+
+	@media screen and (min-width: $small) {
+		display: none;
+	}
+}
+
+.nav-toggle {
+	display: none;
+}
diff --git a/content/_index.md b/content/_index.md
new file mode 100644
index 0000000..70c188f
--- /dev/null
+++ b/content/_index.md
@@ -0,0 +1,3 @@
+---
+title: ''
+---
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index d15a02c..8d04934 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,17 +1,31 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{ .Site.LanguageCode }}">
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width,initial-scale=1.0">
-		<title>{{ block "title" . }}
-			{{ .Site.Title }}
-		{{ end }}</title>
+		<title>{{ block "title" . }}{{ with .Title }}{{ . }} &ndash; {{ end }}{{ .Site.Title }}{{ end }}</title>
 		<link rel="icon" href="data:;base64,iVBORw0KGgo=">
-		{{ $style := resources.Get "style.css" | minify }}
-		<link rel="stylesheet" href="{{ $style.Permalink }}">
+		{{ $style := resources.Get "style.scss" | resources.ToCSS (dict "outputStyle" "compressed") }}
+		<link rel="stylesheet" href="{{ $style.RelPermalink }}">
 	</head>
 	<body>
-		{{ block "main" . }}
-		{{ end }}
+		<header>
+			<span class="header-title">{{ .Site.Title }}</span>
+			<input class="nav-toggle" id="toggleMainNav" type="checkbox">
+			<label class="nav-burger" for="toggleMainNav">
+				<div></div>
+				<div></div>
+				<div></div>
+			</label>
+			<nav class="nav-toggleable" style="--num-elements: {{ len .Site.Menus.main }}">
+{{ range .Site.Menus.main }}
+				<a href="{{ .URL }}"{{ if hasPrefix .URL "https://" }} target="_blank"{{ end }}>{{ .Name }}</a>
+{{ end }}
+			</nav>
+		</header>
+		<main>
+			{{ block "main" . }}
+			{{ end }}
+		</main>
 	</body>
 </html>
diff --git a/layouts/index.html b/layouts/index.html
index 68b46ef..9118cd7 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,3 +1,4 @@
 {{ define "main" }}
-	<h1>Hallo Welt</h1>
+<h1 class="hello-world">Hello World</h1>
+{{ .Content }}
 {{ end }}