mobile layout

2 files changed, 114 insertions, 1 deletions

diff --git a/styles/about.module.css b/styles/about.module.css
index 782c933..ba24fc7 100644
--- a/styles/about.module.css
+++ b/styles/about.module.css
@@ -61,3 +61,56 @@
   padding: var(--text-padding);
   margin: 0 auto;
 }
+
+@media (max-width: 999px) {
+  .container {
+    flex-direction: column;
+    align-items: center;
+    margin-top: 0;
+    --text-padding: 8px;
+  }
+
+  .member {
+    max-width: 600px;
+    width: calc(100% - var(--text-padding));
+    display: grid;
+    grid-template-columns: max(100px, 30%) 1fr;
+    grid-template-rows: 30px 70px 1fr 30px;
+  }
+
+  .member h2 {
+    grid-row: 1;
+    grid-column: 1/3;
+    text-align: center;
+  }
+
+  .member:not(:last-child){
+    margin-bottom: 32px;
+  }
+
+  .member img {
+    width: 80px;
+    height: auto;
+    margin-top: 16px;
+    grid-row: 1/3;
+    grid-column: 1;
+  }
+
+  .member .pronouns {
+    grid-column: 1;
+  }
+
+  .member .bio {
+    grid-column: 2;
+    grid-row: 2/4;
+  }
+
+  .member p:last-child {
+    grid-column: 1/3;
+  }
+
+  .summary {
+    max-width: 600px;
+    width: 100%;
+  }
+}
diff --git a/styles/layout.css b/styles/layout.css
index 4052091..cef976d 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -15,6 +15,13 @@
   --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);
 }
 
+@media (max-width: 500px) {
+  :root {
+    --header-height: 300px;
+    --header-overlap: 120px;
+  }
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -22,6 +29,7 @@ body {
   flex-direction: column;
   min-height: 100vh;
   background: var(--page-background);
+  min-width: 200px;
 }
 
 
@@ -38,6 +46,23 @@ header {
   justify-items: flex-start;
 }
 
+@media(max-width: 380px) {
+  header {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .siteTitle {
+    text-align: center;
+  }
+
+  nav {
+    flex: 1;
+    width: 100%;
+    text-align: center;
+  }
+}
+
 header:not(.homepage) {
   justify-content: space-between;
 }
@@ -61,6 +86,12 @@ header.homepage .siteTitle {
   font-size: 4em;
 }
 
+@media (max-width: 500px) {
+  header.homepage .siteTitle {
+    font-size: 15vw;
+  }
+}
+
 header:not(.homepage) .siteTitle {
   font-size: 1.2em;
 }
@@ -74,11 +105,18 @@ header nav a {
   margin: 0 calc(1.5 * var(--text-padding));
 }
 
+@media (max-width: 500px) {
+  header nav a {
+    margin: 0 8px;
+  }
+}
+
 header.homepage nav {
   border: none;
   background: var(--main-background);
   height: var(--header-bar-height);
   width: var(--main-width);
+  max-width: calc(100vw - var(--text-padding));
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -131,6 +169,7 @@ main.mainColumn {
 
 .mainColumn {
   width: var(--main-width);
+  max-width: calc(100vw - var(--text-padding));
   box-sizing: border-box;
   padding: var(--text-padding);
   margin: 0 auto;
@@ -160,12 +199,33 @@ footer {
   display: flex;
   flex-direction: row;
   margin-top: var(--footer-spacing);
+  max-width: 100vw;
 }
 
 footer span {
   flex: 1;
 }
 
-footer a {
+footer a:not(:first-of-type) {
   margin-left: calc(2 * var(--text-padding));
 }
+
+@media (max-width: 600px) {
+  footer {
+    box-sizing: initial;
+    flex: initial;
+    flex-wrap: wrap;
+    height: 60px;
+    align-items:center;
+    justify-content:center;
+    margin: 8px 0;
+    padding: 0;
+  }
+
+  footer span {
+    display: block;
+    min-width: 100%;
+    text-align: center;
+  }
+
+}