Use CSS grid for post layout

We've always been wanting to have the avatars aligned in the negative
space next to the posts but never found an adequately nice way to do it.
With grid this is now easy. We can also replace lots of the old margin
and padding rules with gaps.

2 files changed, 41 insertions, 27 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
diff --git a/templates/macros.html b/templates/macros.html
index 648d4b0..4c44ea3 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -1,7 +1,9 @@
 {% macro render_post(post, class="feed") -%}
+<aside class="gutter">
+	<img class="avatar" alt="Authored by: {{ config.extra.author }}" src="{{ config.extra.avatar }}" width="64" />
+</aside>
 <article class="{{ class }}">
 	<header>
-		<img class="avatar" alt="Authored by: {{ config.extra.author }}" src="{{ config.extra.avatar }}" width="64" />
 		<div class="banner smaller">
 			<div class="info">
 				<time class="mute" datetime="{{ post.date }}" title="{{ post.date }}">{{ post.date | date(format="%F") }}</time>