add fixed header

assets/global.css

@@ -7,12 +7,19 @@ body {
 	background: white;
 }
 
+#svelte {
+	display: flex;
+	flex-direction: column;
+}
+
 main {
+	overflow-x: hidden;
+	overflow-y: auto;
 	position: relative;
 	max-width: 800px;
 	padding: 15px 15px;
 	box-sizing: border-box;
-	margin: 0 auto;
+	margin: 75px auto;
 }
 
 h1, h2, h3, h4, h5, h6 {

routes/_components/Layout.html

@@ -3,7 +3,6 @@
 <main>
 	<slot></slot>
 </main>
-
 <script>
 	import Nav from './Nav.html';
 

routes/_components/Nav.html

@@ -40,7 +40,13 @@
 <style>
 	nav {
 		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    background: royalblue;
+		background: royalblue;
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		z-index: 10;
+		will-change: transform; /* avoids "repaints on scroll" for fixed position header */
 	}
 
 	ul {