diff options
| -rwxr-xr-x | build-member.sh | 14 | ||||
| -rw-r--r-- | david.in | 5 | ||||
| -rw-r--r-- | enguerrand.in | 5 | ||||
| -rw-r--r-- | hervé.in | 5 | ||||
| -rw-r--r-- | sophie.in | 5 | ||||
| -rw-r--r-- | stylesheets/membre.css | 64 |
6 files changed, 66 insertions, 32 deletions
diff --git a/build-member.sh b/build-member.sh index 3dea3fd..329be0e 100755 --- a/build-member.sh +++ b/build-member.sh @@ -27,14 +27,18 @@ EOF generate-main () { read fullname - read h1 - read dt + read instrument + read emph1 + read emph2 local -r name=$(firstname "${fullname}") cat <<EOF -<main> - <h1 style="${h1}">${fullname}</h1> - <div id="bio" style="${dt}"> +<main style="--emph1-color: ${emph1}; --emph2-color: ${emph2}"> + <div class="bio-title"> + <h1 class="name">${fullname}</h1> + <h2 class="instrument">${instrument}</h2> + </div> + <div class="bio"> EOF while read line @@ -1,6 +1,7 @@ David Forest ---member-h1: #e05a00 ---member-dt: #bf9000 +violon +#e05a00 +#bf9000 Ta maison Poudlard ? Poufsouffle, c'est le résultat du test officiel ! Une feuille préférée ? L'érable, de préférence avec des pancakes ! Une période de l'histoire à revivre ? Les années 60, pour pouvoir assister aux concerts des Beatles ou de Jimi Hendrix. diff --git a/enguerrand.in b/enguerrand.in index 8a6641b..4b872cd 100644 --- a/enguerrand.in +++ b/enguerrand.in @@ -1,6 +1,7 @@ Enguerrand Bontoux ---member-h1: #6e9928 ---member-dt: #203864 +violoncelle +#6e9928 +#203864 Ton arbre préféré ? l'Epicéa. Ta maison Poudlard ? Serdaigle (seule maison vraiment respectable). Une œuvre bouleversante ? la 2e de Mahler, Résurrection, et son choeur final. @@ -1,6 +1,7 @@ Hervé Blandinières ---member-h1: #4e8761 ---member-dt: #1368a1 +alto +#4e8761 +#1368a1 Ta feuille préférée ? Celle du figuier. Une période de l'histoire à vivre ? Le néolithique (vaste sujet...). Ta maison à Poudlard ? Serdaigle, la raison l’emporte. @@ -1,6 +1,7 @@ Sophie Guille des Buttes ---member-h1: #f0b607 ---member-dt: #203864 +violon +#f0b607 +#203864 Ta feuille préférée ? Celle du Ginkgo Biloba. Ta maison à Poudlard ? Poufsouffle ! “Si à Poufsouffle vous allez / Comme eux vous s'rez juste et loyal / Ceux de Poufsouffle aiment travailler / Et leur patience est proverbiale.” Un compositeur de prédilection ? Deux ! Beethoven et Ravel. 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; + } } |