From 91b6bc98c795f00743647bbf4ecae20f6ad21b70 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Tue, 16 Feb 2021 23:10:42 +0100
Subject: Shuffle blocks around when zooming on individual bio

---
 build-member.sh        |  8 +++-----
 stylesheets/membre.css | 53 +++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/build-member.sh b/build-member.sh
index 1dbccc3..3dea3fd 100755
--- a/build-member.sh
+++ b/build-member.sh
@@ -33,8 +33,8 @@ generate-main ()
 
     cat <<EOF
 <main>
-  <div id="bio" style="${h1}; ${dt}">
-    <h1>${fullname}</h1>
+  <h1 style="${h1}">${fullname}</h1>
+  <div id="bio" style="${dt}">
 EOF
 
     while read line
@@ -54,9 +54,7 @@ EOF
 
     cat <<EOF
   </div>
-  <div id="photo">
-    <img src="images/${name}/portrait.png" style="background-image: url(images/${name}/bg.jpg)">
-  </div>
+  <img src="images/${name}/portrait.png" style="background-image: url(images/${name}/bg.jpg)">
 </main>
 EOF
 }
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;
+    }
+}
-- 
cgit v1.2.3