3 files changed, 66 insertions, 6 deletions
diff --git a/styles/about.module.css b/styles/about.module.css
new file mode 100644
index 0000000..40a9b72
--- /dev/null
+++ b/styles/about.module.css
@@ -0,0 +1,62 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  max-width: var(--system-width);
+  width: calc(100vw - 2 * var(--text-padding));
+  margin: 0 auto;
+  margin-top: 75px;
+  justify-content: space-between;
+}
+
+.member {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  max-width: 280px;
+  box-sizing: border-box;
+  margin: 0 calc(.5 * var(--text-padding));
+  padding: 0 var(--text-padding);
+  background: var(--main-background);
+  box-shadow: var(--card-shadow);
+}
+
+.member img {
+  display: block;
+  width: 150px;
+  box-sizing: border-box;
+  border: solid 4px var(--member-color);
+  border-radius: 75px;
+  margin: 0 auto;
+  margin-top: -75px;
+  user-select: none;
+}
+
+.member h2 {
+  text-align: center;
+  color: var(--member-color);
+  margin: 0;
+}
+
+.member p {
+  margin-top: 0;
+}
+
+.member .pronouns {
+  text-align: center;
+  margin-top: 0;
+}
+
+.member p:nth-last-child(2) {
+  flex: 1;
+}
+
+.member p:last-child {
+  text-align: center;
+}
+
+.summary {
+  width: var(--main-width);
+  box-sizing: border-box;
+  padding: var(--text-padding);
+  margin: 0 auto;
+}
diff --git a/styles/layout.css b/styles/layout.css
index 6c8578d..4052091 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -4,6 +4,7 @@
   --min-main-overhang: 100px;
   --header-bar-height: 48px;
   --main-width: 600px;
+  --system-width: 1000px;
   --footer-spacing: 8px;
   --page-background: #262626;
   --main-background: #423c3c;
@@ -11,7 +12,7 @@
   --text-medium:rgba(255,255,255, .75);
   --text-dimmed:rgba(255,255,255, .55);
   --text-padding: 16px;
-
+  --card-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
 }
 
 body {
@@ -134,7 +135,7 @@ main.mainColumn {
   padding: var(--text-padding);
   margin: 0 auto;
   background: var(--main-background);
-  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
+  box-shadow: var(--card-shadow);
 }
 
 header.homepage ~ .mainColumn {
diff --git a/styles/text.css b/styles/text.css
index 93364a7..427d526 100644
--- a/styles/text.css
+++ b/styles/text.css
@@ -1,5 +1,6 @@
 body {
   color: var(--text-medium);
+  font-family: 'Victor Mono', sans-serif;
 }
 
 a {
@@ -30,10 +31,6 @@ em {
   color: var(--text-bright);
 }
 
-main {
-  font-family: 'Victor Mono', sans-serif;
-}
-
 footer {
   font-family: 'Victor Mono', sans-serif;
   opacity: .5;