Merge branch 'bio-individuelle-instrument'

1 files changed, 45 insertions, 19 deletions

diff --git a/stylesheets/membre.css b/stylesheets/membre.css
index be585b7..d7eff56 100644
--- a/stylesheets/membre.css
+++ b/stylesheets/membre.css
@@ -4,50 +4,75 @@ main {
     grid-template-rows: auto 1fr;
 }
 
-main > h1 {
+main > .bio-title {
     grid-column: 1;
     grid-row: 1;
+}
+
+main > .bio-title > * {
+    margin: 0;
+}
+
+h1.name {
     text-transform: uppercase;
-    color: var(--member-h1);
+    color: var(--emph1-color);
 }
 
-#bio {
+h2.instrument {
+    font-weight: normal;
+    color: var(--emph2-color);
+}
+
+.bio {
     grid-column: 1;
     grid-row: 2;
-    justify-self: center;
     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);
+    color: var(--emph2-color);
 }
 
-#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)
@@ -59,7 +84,7 @@ main > img {
         justify-items: center;
     }
 
-    main > h1 {
+    main > .bio-title {
         grid-column: 1;
         grid-row: 1;
         text-align: center;
@@ -68,11 +93,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;
     }
@@ -80,7 +103,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;
+    }
 }