Shuffle blocks around when zooming on individual bio

1 files changed, 44 insertions, 9 deletions

diff --git a/stylesheets/membre.css b/stylesheets/membre.css
index 45de40a..eafd913 100644
--- a/stylesheets/membre.css
+++ b/stylesheets/membre.css
@@ -1,18 +1,23 @@
 main {
     display: grid;
     grid-template-columns: 3fr 2fr;
+    grid-template-rows: auto 1fr;
+}
+
+main > h1 {
+    grid-column: 1;
+    grid-row: 1;
+    text-transform: uppercase;
+    color: var(--member-h1);
 }
 
 #bio {
+    grid-column: 1;
+    grid-row: 2;
     justify-self: center;
     margin-right: 0.5em;
 }
 
-#bio h1 {
-    text-transform: uppercase;
-    color: var(--member-h1);
-}
-
 #bio dt, #bio dd {
     display: inline;
 }
@@ -31,13 +36,43 @@ main {
     margin-bottom: 0.2em;
 }
 
-#photo {
-    margin-top: 2em;
-}
+main > img {
+    display: block;
+    /* Align with title; h1 typically has font-size 2em and margin
+     * .67em. */
+    margin-top: 1.33em;
+    grid-column: 2;
+    grid-row: 1 / -1;
 
-#photo img {
     width: 100%;
     background-size: cover;
     position: sticky;
     top: 2em;
 }
+
+@media (max-width: 80em)
+{
+    main {
+        grid-template-columns: 2fr 1fr;
+        grid-template-rows: auto auto;
+        align-items: center;
+        justify-items: center;
+    }
+
+    main > h1 {
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    main > img {
+        grid-column: 2;
+        grid-row: 1;
+        position: static;
+        margin-top: auto;
+    }
+
+    main > #bio {
+        grid-column: 1 / -1;
+        grid-row: 2;
+    }
+}