filled out about system page

rewrite
Ashelyn Dawn 1 year ago
parent d89d92d393
commit c32753a06f

@ -1,12 +1,46 @@
import system from '~/config/system.json'
import styles from '~/styles/about.module.css'
interface Member {
name: string,
mainPronouns: string,
avatarUrl: string,
color: string,
bioShort: string,
readMore: string,
}
export default function About() {
return (
<>
<h1 className="pageTitle">
About
About Us
</h1>
<main className="mainColumn">
<p>Maybe we say some things about ourselves?</p>
</main>
<main className={styles.container}>
{system.members.map((member: Member) => {
const style = { "--member-color": member.color } as React.CSSProperties
return (
<section className={styles.member} style={style}>
<img src={member.avatarUrl} />
<h2>{member.name}</h2>
<p className={styles.pronouns}>{member.mainPronouns}</p>
<p>
{member.bioShort}
</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
don't have to care who is most present at any given time, as we share
memory and flow in and out of front pretty often, but we do appreciate
when people notice us individually
</p>
</div>
</>
)
}

@ -0,0 +1,25 @@
{
"pluralkit": "aypoe",
"members": [{
"name": "rose",
"mainPronouns": "they/them",
"avatarUrl": "https://placekitten.com/200/200",
"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",
"color": "#df5c87"
},{
"name": "Dawn",
"mainPronouns": "she/her",
"avatarUrl": "https://placekitten.com/200/200",
"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",
"readMore": "Ask me more",
"color": "#9495b5"
},{
"name": "echo",
"mainPronouns": "it/its",
"avatarUrl": "https://placekitten.com/200/200",
"bioShort": "hi! i'm the one who catalogues and digs through our understanding of the outside world. also i don't talk much",
"readMore": "see the archive",
"color": "#67d4b3"
}]
}

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

@ -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 {

@ -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;

Loading…
Cancel
Save