1 files changed, 35 insertions, 16 deletions

diff --git a/stylesheets/membre.css b/stylesheets/membre.css
index 845605c..a498fd7 100644
--- a/stylesheets/membre.css
+++ b/stylesheets/membre.css
@@ -4,49 +4,67 @@ main {
     grid-template-rows: auto 1fr;
 }
 
-main > h1 {
+main > .bio-title {
     grid-column: 1;
     grid-row: 1;
     text-transform: uppercase;
     color: var(--member-h1);
 }
 
-#bio {
+main > .bio-title > * {
+    margin: 0;
+}
+
+.bio {
     grid-column: 1;
     grid-row: 2;
     margin-right: 0.5em;
 }
 
-#bio dt, #bio dd {
+.bio dt, .bio dd {
     display: inline;
 }
 
-#bio dt {
+.bio dt {
     font-weight: bold;
     color: var(--member-dt);
 }
 
-#bio dd {
+.bio dd {
     margin-left: 0;
 }
 
-#bio dl {
+.bio dl {
     margin-top: 0.2em;
     margin-bottom: 0.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;
 
     width: 100%;
     background-size: cover;
-    position: sticky;
-    top: 2em;
+}
+
+@media (min-width: 80em)
+{
+    /* CSS 2 appendix D: the vertical margin for h1 should be .67em, with
+     * font-size 2em. */
+    main {
+        --main-top-margin: 1.33em;
+    }
+
+    main > .bio-title {
+        margin: var(--main-top-margin) 0;
+    }
+
+    main > img {
+        margin-top: var(--main-top-margin);
+        position: sticky;
+        top: 2em;
+    }
 }
 
 @media (max-width: 80em)
@@ -58,7 +76,7 @@ main > img {
         justify-items: center;
     }
 
-    main > h1 {
+    main > .bio-title {
         grid-column: 1;
         grid-row: 1;
         text-align: center;
@@ -67,11 +85,9 @@ main > img {
     main > img {
         grid-column: 2;
         grid-row: 1;
-        position: static;
-        margin-top: auto;
     }
 
-    main > #bio {
+    main > .bio {
         grid-column: 1 / -1;
         grid-row: 2;
     }
@@ -79,7 +95,10 @@ main > img {
 
 @media (max-width: 40em)
 {
-    main > h1 {
+    main > .bio-title > h1 {
         font-size: 1.2em;
     }
+    main > .bio-title > h2 {
+        font-size: 0.8em;
+    }
 }