diff options
| -rwxr-xr-x | build-member.sh | 8 | ||||
| -rw-r--r-- | 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; + } +} |