1 files changed, 38 insertions, 26 deletions
diff --git a/sass/style.sass b/sass/style.sass
index b896384..6058155 100644
--- a/sass/style.sass
+++ b/sass/style.sass
@@ -60,6 +60,8 @@ a.tag
     content: "#"
 
 h3.related
+  grid-column: main
+
   margin: 0
 
 h2.title
@@ -124,9 +126,9 @@ body
   font-family: var(--font-sans)
   font-size: 1.3rem
 
-  margin: 0 auto
-  max-width: 40em
-  padding: 0 1rem
+  margin: 0
+  display: flex
+  flex-direction: column
 
   color: var(--fg-color)
   background-color: var(--bg-color)
@@ -138,11 +140,15 @@ body
   float: right
 
 main
-  display: flex
-  flex-direction: column
+  display: grid
+  align-self: center
+  grid-template-columns: 64px minmax(auto, 38em)
+  grid-template-areas: "gutter main"
+  gap: 2rem 1rem
+  margin: 1rem
 
-header
-  margin: 1rem 0
+main > header
+  grid-column: main
 
 header > h1
   margin: 0
@@ -151,16 +157,15 @@ header > h1
     color: inherit
 
 article
-  margin: 1rem 0
-  padding-left: 78px
-  position: relative
+  display: flex
+  flex-direction: column
+  gap: .5rem
+  grid-column: main
+  overflow: auto
 
 article > section.post
-  > :first-child
-    margin-top: .5rem
-
   > p:first-of-type
-    margin-top: .5rem
+    margin-top: 0
 
   > p
     line-height: 1.3
@@ -194,13 +199,14 @@ div.banner > div.info
 div.banner > nav.tags
   margin-left: 1rem
 
-article > header
-  margin: 0
+aside.gutter
+  display: flex
+  flex-direction: column
+
+  grid-column: gutter
 
-article > header > img.avatar
-  position: absolute
-  left: 0
-  width: 64px
+img.avatar
+  width: 100%
 
   border-radius: 4px
   border: 1px solid var(--border-color-light)
@@ -216,18 +222,20 @@ nav ul.inline
   margin: 0
   padding: 0
   list-style-type: none
-  display: inline-flex
+  display: flex
 
 nav.pagination
-  margin: 1rem 0
-  padding-top: .5rem
+  grid-column: 1 / -1
 
   > a.older
     margin-left: auto
 
 nav.tags
-  ul > li:not(:first-of-type)
-    padding-left: .4rem
+  grid-column: main
+
+  > ul.inline
+    flex-wrap: wrap
+    column-gap: .5rem
 
 nav.links
   &::before, & > ul > li:not(:first-child)::before
@@ -239,8 +247,12 @@ figure > a
 @media (max-width: 480px)
   article:not(.single)
 
-  article > header > img.avatar
+  aside.gutter
     display: none
 
+  main
+    grid-template-columns: minmax(auto, 38em)
+    grid-template-areas: "main"
+
   article
     padding-left: 0