diff --git a/.gitignore b/.gitignore
index dc5bd12..1477cfb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
node_modules/
.next/
.vscode/
+out/
.DS_Store
diff --git a/app/about/[name]/page.tsx b/app/about/[name]/page.tsx
index 625af62..411a2f0 100644
--- a/app/about/[name]/page.tsx
+++ b/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 } }) {
))}
)}
-
+
>
)
}
diff --git a/app/about/page.tsx b/app/about/page.tsx
index 57b9aa7..970d76f 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -26,7 +26,7 @@ export default function About() {
{member.mainPronouns}
-+
{member.bioShort}
diff --git a/components/InfoBar/InfoBar.module.css b/components/InfoBar/InfoBar.module.css index 523bf42..a992bc5 100644 --- a/components/InfoBar/InfoBar.module.css +++ b/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; + } +} 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; + } + +}