Add header

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/header.scss

@@ -0,0 +1,56 @@
+.header {
+  padding: 2rem 2rem;
+}
+
+.header-container {
+  max-width: $maxwidth;
+  width: 100%;
+  margin: 0 auto;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+
+  .site-title {
+    font-size: 1.5rem;
+
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+  .nav {
+    ul {
+      display: flex;
+
+      gap: 2.5rem;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      li a {
+        font-size: 0.85rem;
+        text-decoration: none;
+        color: inherit;
+        display: block;
+      }
+    }
+  }
+
+  @media (max-width: $mobilewidth) {
+    .site-title {
+      margin-bottom: 1rem;
+    }
+
+    .nav {
+      width: 100%;
+
+      ul {
+        flex-wrap: wrap;
+        gap: 1rem;
+      }
+    }
+  }
+}

assets/sass/main.scss

@@ -0,0 +1,11 @@
+@import "variables";
+
+html {
+  font-size: 100%;
+  font-family:
+    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  line-height: 1.5;
+}
+
+@import "header";

assets/sass/variables.scss

@@ -0,0 +1,3 @@
+$mobilewidth: 32rem;
+$contentwidth: 48rem;
+$maxwidth: 60rem;