quatuorbellefeuille.com

commit 91b6bc98c795f00743647bbf4ecae20f6ad21b70
parent 7722d5ded2649234baf0f00cfe596f141e158380
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Tue, 16 Feb 2021 23:10:42 +0100

Shuffle blocks around when zooming on individual bio

Diffstat:
M
build-member.sh
 | 
8
+++-----
M
stylesheets/membre.css
 | 
53
++++++++++++++++++++++++++++++++++++++++++++---------

2 files changed, 47 insertions(+), 14 deletions(-)
diff --git 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
@@ -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;
+    }
+}