Add corona, adjust styles

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;
+}