From 57c0b460e72adb1106fb9c4c7db1048145b3b586 Mon Sep 17 00:00:00 2001
From: Rafael Bardini <rafael@rbardini.com>
Date: Sun, 20 Jun 2021 22:37:59 +0200
Subject: [PATCH] feat(layout): center header elements on mobile

---
 style.css                             | 16 +++++++++++++---
 tap-snapshots/test/render.js.test.cjs | 16 +++++++++++++---
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/style.css b/style.css
index 8982ecd..7bde906 100644
--- a/style.css
+++ b/style.css
@@ -154,6 +154,7 @@ svg {
   grid-column: full;
   grid-template-columns: inherit;
   padding: 4em 0;
+  text-align: center;
 }
 
 .masthead > *,
@@ -163,9 +164,8 @@ section {
 
 .masthead > img {
   border-radius: 50%;
-  grid-column: side;
-  grid-row: span 2;
-  max-width: 100%;
+  margin: 0 auto;
+  max-width: 12em;
 }
 
 article > * + *,
@@ -225,11 +225,21 @@ blockquote > * + * {
     margin-bottom: inherit;
   }
 
+  .masthead {
+    text-align: inherit;
+  }
+
   .masthead > *,
   section {
     grid-column: content;
   }
 
+  .masthead img {
+    grid-column: side;
+    grid-row: span 2;
+    max-width: 100%;
+  }
+
   section {
     display: contents;
   }
diff --git a/tap-snapshots/test/render.js.test.cjs b/tap-snapshots/test/render.js.test.cjs
index 9f57079..9e53f64 100644
--- a/tap-snapshots/test/render.js.test.cjs
+++ b/tap-snapshots/test/render.js.test.cjs
@@ -170,6 +170,7 @@ svg {
   grid-column: full;
   grid-template-columns: inherit;
   padding: 4em 0;
+  text-align: center;
 }
 
 .masthead > *,
@@ -179,9 +180,8 @@ section {
 
 .masthead > img {
   border-radius: 50%;
-  grid-column: side;
-  grid-row: span 2;
-  max-width: 100%;
+  margin: 0 auto;
+  max-width: 12em;
 }
 
 article > * + *,
@@ -241,11 +241,21 @@ blockquote > * + * {
     margin-bottom: inherit;
   }
 
+  .masthead {
+    text-align: inherit;
+  }
+
   .masthead > *,
   section {
     grid-column: content;
   }
 
+  .masthead img {
+    grid-column: side;
+    grid-row: span 2;
+    max-width: 100%;
+  }
+
   section {
     display: contents;
   }