diff options
Diffstat (limited to 'styles/about.module.css')
-rw-r--r-- | styles/about.module.css | 69 |
1 files changed, 61 insertions, 8 deletions
diff --git a/styles/about.module.css b/styles/about.module.css index ba24fc7..981b519 100644 --- a/styles/about.module.css +++ b/styles/about.module.css @@ -40,6 +40,7 @@ .member p { margin-top: 0; + white-space: pre-wrap; } .member .pronouns { @@ -67,21 +68,25 @@ flex-direction: column; align-items: center; margin-top: 0; - --text-padding: 8px; } .member { - max-width: 600px; - width: calc(100% - var(--text-padding)); + max-width: calc(600px - 2 * var(--text-padding)); + width: calc(100% - 2 * var(--text-padding)); display: grid; - grid-template-columns: max(100px, 30%) 1fr; - grid-template-rows: 30px 70px 1fr 30px; + grid-template-columns: calc(80px + 2 * var(--text-padding)) 1fr 8px; + grid-template-rows: 48px 70px 1fr 8px 36px; + padding: 0; + margin: 0; } .member h2 { + margin-top: 8px; grid-row: 1; - grid-column: 1/3; - text-align: center; + grid-column: 2/3; + text-align: left; + border-bottom: solid 1px currentcolor; + margin-bottom: 8px; } .member:not(:last-child){ @@ -98,15 +103,21 @@ .member .pronouns { grid-column: 1; + grid-row: 3/7; } .member .bio { grid-column: 2; - grid-row: 2/4; + grid-row: 2/5; + } + + .member p { + margin-bottom: 8px; } .member p:last-child { grid-column: 1/3; + grid-row: 5/7; } .summary { @@ -114,3 +125,45 @@ width: 100%; } } + +.member.lower { + max-width: 600px; + width: 100%; + display: grid; + grid-template-columns: calc(80px + 2 * var(--text-padding)) 1fr 8px; + grid-template-rows: 48px 70px 1fr 8px 36px; + padding: 0; + margin: 0; +} + +.member.lower h2 { + margin-top: 8px; + grid-row: 1; + grid-column: 2/3; + text-align: left; + border-bottom: solid 1px currentcolor; + margin-bottom: 8px; +} + +.member.lower img { + width: 80px; + height: auto; + margin-top: 16px; + grid-row: 1/3; + grid-column: 1; +} + +.member.lower .pronouns { + grid-column: 1; + grid-row: 3/7; +} + +.member.lower .bio { + grid-column: 2; + grid-row: 2/5; +} + +.member.lower p:last-child { + grid-column: 1/3; + grid-row: 5/7; +} |