From 255e4d95086a1049a07561e0f98699d8324f3a46 Mon Sep 17 00:00:00 2001
From: arne <hi@arnes.space>
Date: Sun, 20 Feb 2022 18:10:20 +0100
Subject: [PATCH] Add mobile styles

---
 src/assets/style.scss | 55 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/assets/style.scss b/src/assets/style.scss
index a8c19a0..719d77a 100644
--- a/src/assets/style.scss
+++ b/src/assets/style.scss
@@ -67,28 +67,71 @@ a {
 main {
   display: grid;
   max-width: 960px;
-  margin: 48px auto 48px 48px;
+  margin: 48px;
   grid-gap: 32px;
   // grid-auto-rows: 1fr;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-template-areas:
     "header header header header"
-    "nav content content content";
+    "aside content content content";
   grid-auto-flow: dense;
+
+
+  p {
+    text-align: justify
+  }
+}
+
+@media screen and (max-width: 768px) {
+  body {
+    font-size: 14px;
+  }
+
+  h1 {
+    font-size: 21px;
+    line-height: 21px;
+  }
+
+  h2 {
+    font-size: 18px;
+    line-height: 14px;
+  }
+
+  main {
+    max-width: unset;
+    margin: 32px;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-template-areas:
+      "header"
+      "aside"
+      "content";
+  }
 }
 
 header {
   grid-area: header;
 }
 
-nav {
-  grid-area: nav;
+aside {
+  grid-area: aside;
 
   ul {
     list-style: none;
     margin: 0;
     padding: 0;
   }
+
+  dl {
+    margin: 0;
+
+    dt, dd {
+      display: inline-block;
+    }
+
+    dd {
+      margin: 0
+    }
+  }
 }
 
 article {
@@ -109,9 +152,9 @@ article {
 .home { // == main
   grid-template-areas:
     "header header header header"
-    "nav nav nav nav";
+    "aside aside aside aside";
 
-  nav {
+  aside {
     ul {
       list-style: inside;
       padding: 0 0 0 16px;