1 files changed, 41 insertions, 33 deletions
diff --git a/assets/main.scss b/assets/main.scss
index ee7f15a..47df374 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -22,40 +22,39 @@ main {
   }
 }
 
-a {
-  color: #007bff;
-  text-decoration: underline;
-
-  &:hover {
-    color: #0056b3;
-    text-decoration: none;
+nav {
+  max-width: calc(800px + 128px * 2);
+  margin: 1rem auto;
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  grid-template-columns: auto auto 1fr;
+  grid-template-areas:
+    "logo header"
+    "logo nav"
+    "logo none";
+
+  a[href="/"] {
+    grid-area: logo;
   }
 
-  @media(prefers-color-scheme: dark) {
-    color: #78bef8;
+  h1 {
+    grid-area: header;
+    margin: 0;
   }
-}
 
-nav {
-  text-align: center;
-  margin-bottom: 4rem;
-}
-
-nav ul {
-  list-style: none;
-  padding-left: 0;
-}
-
-nav ul li {
-  display: inline;
-}
-
-nav ul li:not(:first-child) {
-  display: inline;
-  padding-left: 2rem;
-
-  @media only screen and (max-width: 600px) {
-    padding: 0.2rem;
+  ul {
+    grid-area: nav;
+    margin: 0.5rem 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
+    li {
+      padding-right: 2rem;
+    }
   }
 }
 
@@ -64,12 +63,21 @@ footer {
   margin: 4rem 0;
 }
 
+a {
+  color: #007bff;
+  text-decoration: underline;
 
-h1 {
-  text-align: center;
+  &:hover {
+    color: #0056b3;
+    text-decoration: none;
+  }
+
+  @media(prefers-color-scheme: dark) {
+    color: #78bef8;
+  }
 }
 
-.post h3 {
+.post h2 {
   margin-bottom: 0;
 }