First templates, currently not ready, intermediate result

static/css/style.css

@@ -4,11 +4,6 @@ body {
   --bkg-color: #fff;
   --bkg-color2: #bbb;
 }
-body.dark-theme {
-  --text-color: #eee;
-  --bkg-color: #121212;
-  --bkg-color2: #303030;
-}
 
 @media (prefers-color-scheme: dark) {
   /* defaults to dark theme */
@@ -17,15 +12,12 @@ body.dark-theme {
     --bkg-color: #121212;
     --bkg-color2: #303030;
   }
-  body.light-theme {
-    --text-color: #222;
-    --bkg-color: #fff;
-    --bkg-color2: #bbb;
-  }
 }
 
+@font-face { font-family: Avenir; src: url('/static/fonts/Avenir.ttf'); }
+
 * {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Avenir, sans-serif;
   background: transparent;
   color: var(--text-color);
 }
@@ -40,22 +32,40 @@ h1, p {
 
 /* ========== MAIN STYLES ========== */
 
+header, #logo-container, header nav {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+}
+
+header, header nav {
+  align-content: center;
+  border: 1px solid green;
+}
+
+#logo-container {
+  align-content: baseline;
+  margin: 0.5em;
+}
+
+#logo-container span {
+  margin: auto 0;
+  font-size: 32px;
+}
+
 nav {
   display: flex;
-  flex-wrap: wrap;
   flex-direction: row;
-  padding: 0;
-  justify-content: center;
+
   background: var(--bkg-color2);
+  margin: 0 auto;
 }
 
 nav * {
-  margin: 10px;
-  width: 12em;
+  margin: auto 0.5em;
   text-decoration: none;
-  border: none;
   font-size: medium;
-  text-align: center;
+  border: 1px solid red;
 }
 
 .header-wrapper {
@@ -65,17 +75,12 @@ nav * {
   margin: 1em;
 }
 
-.header-wrapper img {
-  margin-right: 10px;
-  width: 64px;
-  height: 64px;
-
+header img {
+  margin-right: 2em;
+  width: 50px;
+  height: 50px;
 }
 
-.header-wrapper div * {
-  margin-top: 0;
-  margin-bottom: 10px;
-}
 
 h1 {
   text-align: center;