Add corona, adjust styles

app/about/[name]/page.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import Markdown from "markdown-to-jsx";
 import { notFound } from "next/navigation";
 
@@ -20,16 +21,15 @@ export default function MemberPage({ params: { name } }) {
     <>
       <main className="mainColumn">
         <InfoBar memberName={member.name} />
-        <p>{member.bioShort}</p>
+        <Markdown outer="short">{member.bioShort}</Markdown>
-        <Markdown>{member.bioContinued}</Markdown>
+        <Markdown outer="long">{member.bioContinued}</Markdown>
         {member.bioFields?.length && (
-
           <div className={styles.glance}>
             {member.bioFields.map(({ name, value }) => (
-              <>
+              <Fragment key={name}>
                 <span className={styles.label}>{name}</span>
                 <span>{value}</span>
-              </>
+              </Fragment>
             ))}
           </div>
         )}

app/about/page.tsx

@@ -6,6 +6,7 @@ import profilePics from '~/utils/profiles'
 
 export interface Member {
   name: string,
+  featured: boolean,
   mainPronouns: string,
   color: string,
   bioShort: string,
@@ -13,35 +14,69 @@ export interface Member {
 }
 
 export default function About() {
+  const members = system.members as Member[]
+  const featuredMembers : Member[] = members.filter(({featured}) => featured)
+  const nonfeaturedMembers : Member[] = members.filter(({featured}) => !featured)
+
   return (
     <>
       <h1 className="pageTitle">
         About Us
       </h1>
       <main className={styles.container}>
-        {system.members.map((member: Member) => {
+        {featuredMembers.map((member: Member) => {
           const style = { "--member-color": member.color } as React.CSSProperties
           return (
             <section className={styles.member} style={style}>
-              <Image alt="" width={150} height={150} src={profilePics[member.name.toLowerCase()]} />
+              <Image
+                alt=""
+                width={150}
+                height={150}
+                src={profilePics[member.name.toLowerCase()]}
+              />
               <h2>{member.name}</h2>
               <p className={styles.pronouns}>{member.mainPronouns}</p>
               <p className={styles.bio}>
                 {member.bioShort}
               </p>
-              <p><a href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</a></p>
+              <p>
+                <a href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</a>
+              </p>
             </section>
           )
         })}
       </main>
       <div className={styles.summary}>
         <p>
-          Our system is composed of the above three members.  Generally you
+          Generally the above three members are who interact with others
-          don't have to care who is most present at any given time, as we share
+          throughout our day to day.  They handle our work, our social relationships,
-          memory and flow in and out of front pretty often, but we do appreciate
+          and our broader plans for life.  In addition, our system has another
-          when people notice us individually
+          internally-focused member who you will likely not meet unless you seek it out:
+        </p>
+        {nonfeaturedMembers.map((member: Member) => {
+          const style = { "--member-color": member.color } as React.CSSProperties
+          return (
+            <section className={`${styles.member} ${styles.lower}`} style={style}>
+              <Image
+                alt=""
+                width={80}
+                height={80}
+                src={profilePics[member.name.toLowerCase()]}
+              />
+              <h2>{member.name}</h2>
+              <p className={styles.pronouns}>{member.mainPronouns}</p>
+              <p className={styles.bio}>
+                {member.bioShort}
+              </p>
+              <p>
+                <a href={`/about/${member.name.toLowerCase()}`}>{member.readMore}</a>
               </p>
+            </section>
+          )
+        })}
+        <p>For avatar sources, see <a href="https://static.tempest.dev/credit.txt">here</a></p>
       </div>
+
     </>
   )
 }

app/page.tsx

@@ -7,7 +7,7 @@ export default function Index() {
     <main className="mainColumn">
       <p>
         Hi, we're tempest!  And we also go by ashe.  We're a median plural
-        system of three members, but most of the time you'll probably see us
+        system of four members, but most of the time you'll probably see us
         operating as one
       </p>
 

config/system.json

@@ -2,18 +2,20 @@
   "pluralkit": "aypoe",
   "members": [{
     "name": "rose",
+    "featured": true,
     "mainPronouns": "they/them",
     "bioShort": "web developer and system administrator, i'm the part of us that spends most of my time online and maintains our technical infrastructure",
     "readMore": "read my docs",
     "bioContinued": "it's become my responsibility to get and hold down a job for us, although when i have spare energy from that i like to work on coding, websites, and other technical persuits\n\npersonality-wise i've been told i can be a bit brash — i think i'm more of a tease but it is what it is",
     "color": "#df5c87",
     "bioFields": [
-      {"name": "names:", "value": "rose"},
+      {"name": "names:", "value": "rose, rosalyn, occasionally callista"},
       {"name": "pronouns:", "value": "they/them.  very occasionally she/her but i'm not usually in the mood"},
       {"name": "orientation:", "value": "the hell if i know"}
     ]
   },{
     "name": "Dawn",
+    "featured": true,
     "mainPronouns": "she/her",
     "bioShort": "As our artist, our performer, and our orator I'm the one of us who maintains in-person relationships and makes sure we care for each other",
     "bioContinued": "Historically I was also the system member responsible for masking the others, but that isn't a role I take as often these days\n\nIf we speak in person, I'm probably involved at some point in that conversation",
@@ -27,14 +29,27 @@
   },{
     "name": "echo",
     "mainPronouns": "it/its",
-    "bioShort": "hi! echo is the one who catalogues and digs through our understanding of the outside world",
+    "bioShort": "hi! echo is the one who catalogues and digs through our understanding of the outside world\n\nfavors speaking in third person",
     "bioContinued": "",
     "readMore": "see the archive",
     "color": "#67d4b3",
     "bioFields": [
-      {"name": "names:", "value": "echo"},
+      {"name": "name:", "value": "echo"},
-      {"name": "pronouns:", "value": "it/its, most neopronouns okay"},
+      {"name": "pronouns:", "value": "it/its, “that one”, most neopronouns okay"},
       {"name": "orientation:", "value": "aroace"}
     ]
+  },{
+    "name": "Corona",
+    "featured": true,
+    "mainPronouns": "they/she",
+    "bioShort": "I'm sort of the system protector, but in lieu of something to protect against I'm usually the one planning for the future",
+    "bioContinued": "I'm developing a reputation for being the grumpy one, but I promise I *usually* don't bite\n\n",
+    "readMore": "Get to know me",
+    "color": "#7a81be",
+    "bioFields": [
+      {"name": "Names:", "value": "Corona (previously known as Harrow)"},
+      {"name": "Pronouns:", "value": "she/her or they/them with equal preference"},
+      {"name": "Orientation", "value": "Indeterminate"}
+    ]
   }]
 }

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;
+    max-width: calc(600px - 2 * var(--text-padding));
-    width: calc(100% - var(--text-padding));
+    width: calc(100% - 2 * var(--text-padding));
     display: grid;
-    grid-template-columns: max(100px, 30%) 1fr;
+    grid-template-columns: calc(80px + 2 * var(--text-padding)) 1fr 8px;
-    grid-template-rows: 30px 70px 1fr 30px;
+    grid-template-rows: 48px 70px 1fr 8px 36px;
+    padding: 0;
+    margin: 0;
   }
 
   .member h2 {
+    margin-top: 8px;
     grid-row: 1;
-    grid-column: 1/3;
+    grid-column: 2/3;
-    text-align: center;
+    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;
+}

utils/profiles.ts

@@ -1,7 +1,8 @@
 import rose from '~/images/profile/rose.png'
 import dawn from '~/images/profile/dawn.png'
 import echo from '~/images/profile/echo.png'
+import corona from '~/images/profile/corona.png'
 
 export default {
-  rose, dawn, echo
+  rose, dawn, echo, corona
 }