mobile layout

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 .next/
 .vscode/
+out/
 .DS_Store

app/about/[name]/page.tsx

@@ -6,6 +6,11 @@ import InfoBar from "~/components/InfoBar";
 import styles from "~/styles/index.module.css"
 import system from "~/config/system.json"
 
+export async function generateStaticParams() {
+  const memberSlugs = system.members.map(member => member.name.toLowerCase())
+  return memberSlugs.map((name: string) => ({ name }))
+}
+
 export default function MemberPage({ params: { name } }) {
   const member = system.members.find(member => member.name.toLowerCase() === name)
 
@@ -28,7 +33,7 @@ export default function MemberPage({ params: { name } }) {
             ))}
           </div>
         )}
-      </main >
+      </main>
     </>
   )
 }

app/about/page.tsx

@@ -26,7 +26,7 @@ export default function About() {
               <Image alt="" width={150} height={150} src={profilePics[member.name.toLowerCase()]} />
               <h2>{member.name}</h2>
               <p className={styles.pronouns}>{member.mainPronouns}</p>
-              <p>
+              <p className={styles.bio}>
                 {member.bioShort}
               </p>
               <p><a href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</a></p>

components/InfoBar/InfoBar.module.css

@@ -5,6 +5,7 @@
   background: var(--main-background);
   height: var(--header-bar-height);
   width: var(--main-width);
+  max-width: calc(100vw - var(--text-padding));
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
@@ -60,3 +61,15 @@
 .infobar.memberProfile {
   margin-bottom: 42px;
 }
+
+@media (max-width: 600px) {
+  .infobar.memberProfile img {
+    width: 80px;
+    height: auto;
+    margin-top: -10px;
+  }
+
+  .infobar.memberProfile {
+    margin-bottom: 16px;
+  }
+}

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

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