standardize component structure more

11 files changed, 240 insertions, 35 deletions

diff --git a/app/layout.tsx b/app/layout.tsx
index 3d25c44..22e1191 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,8 +4,8 @@ import 'victormono'
 import '~/styles/layout.css'
 import '~/styles/text.css'
 
-import Header from './Header'
-import Footer from './Footer'
+import Header from '~/components/layout/Header'
+import Footer from '~/components/layout/Footer'
 
 export default function SiteLayout({ children }: { children: ReactNode }) {
   return (
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 44753b0..b3a0fd4 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,12 +1,14 @@
+import InfoBar from "~/components/InfoBar/"
+
 export default function NotFound() {
   return (
     <>
       <h1 className="pageTitle">Not Found (404)</h1>
       <main className="mainColumn">
-        <aside className="infobar">
+        <InfoBar>
           <strong>Error:&nbsp;</strong>
           Unable to find the requested resource
-        </aside>
+        </InfoBar>
 
         <p>
           Feel free to start again from the <a href="/">home page</a>, or
diff --git a/app/page.tsx b/app/page.tsx
index 49d887c..bc84594 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -24,8 +24,8 @@ export default function Index() {
         <span className={styles.label}>Cohort:</span>
         <span>millenial</span>
 
-        <span className={styles.label}>Poly:</span>
-        <span>yes</span>
+        <span className={styles.label}>Orientation:</span>
+        <span>ace</span>
 
         <span className={styles.label}>Partners:</span>
         <span>three</span>
@@ -39,9 +39,8 @@ export default function Index() {
 
       <p>
         <em>Note:</em> This is the information for our system in aggregate,
-        for individual info see <a href="/system">system</a>
+        for individual info see our <a href="/system">about</a> page
       </p>
-
     </main>
   )
 }
diff --git a/app/pay-transparency/page.tsx b/app/pay-transparency/page.tsx
new file mode 100644
index 0000000..cb4b053
--- /dev/null
+++ b/app/pay-transparency/page.tsx
@@ -0,0 +1,85 @@
+import InfoBar from "~/components/InfoBar/"
+
+import styles from '~/styles/pay-transparency.module.css'
+
+export default function PayTransparency() {
+  return (
+    <>
+      <h1 className="pageTitle">
+        Pay Transparency
+      </h1>
+      <main className="mainColumn">
+        <InfoBar text="Last updated: May 2023" />
+        <p>
+          This page lists the title and pay rate of every job we have held
+          since university graduation, and is inspired by{' '}
+          <a target="_blank" href="https://rin.systems/pay-transparency/">Rin's pay transparency</a>
+          {' '}page.  That page is what inspired us to make this one, and we hope the
+          idea continues to spread, as the more people know what common compensation is
+          across the industry, the more we can all benefit.
+        </p>
+
+        <div className={styles.horizOverflow}>
+          <div className={styles.table}>
+            <span className={styles.heading}>Role</span>
+            <span className={styles.heading}>Start</span>
+            <span className={styles.heading}>End</span>
+            <span className={styles.heading}>Rate / Salary</span>
+
+            <span className={styles.position}>Software Developer</span>
+            <span>Jan 2020</span>
+            <span>Sept 2020</span>
+            <span>$35 USD / hour</span>
+
+            <span className={styles.position}>Software Engineer</span>
+            <span>Jan 2021</span>
+            <span>Sept 2021</span>
+            <span>$90,000 USD / year
+              <em>*</em>
+            </span>
+
+            <span className={styles.position}>Software Engineer</span>
+            <span>Sept 2021</span>
+            <span>Oct 2022</span>
+            <span>$100,800 USD / year
+              <em>*</em>
+            </span>
+
+            <span className={styles.position}>Software Engineer</span>
+            <span>Oct 2021</span>
+            <span>Jan 2022</span>
+            <span>$105,840 USD / year
+              <em>*</em>
+            </span>
+
+            <span className={styles.position}>Senior Software Engineer</span>
+            <span>Jan 2022</span>
+            <span>May 2022</span>
+            <span>$121,716 USD / year
+              <em>*</em>
+            </span>
+
+            <span className={styles.position}>Senior Software Engineer</span>
+            <span>June 2022</span>
+            <span>March 2023</span>
+            <span>$158,000 USD / year
+              <em>**</em>
+            </span>
+          </div>
+        </div>
+
+        <p>
+          All positions listed here included health, dental, and vision insurance.
+        </p>
+        <p>
+          The positions listed with <em>*</em> came with
+          a retirement account.
+        </p>
+        <p>
+          The position listed with <em>**</em> came with
+          stock options and a retirement account.
+        </p>
+      </main>
+    </>
+  )
+}
diff --git a/app/posts/page.tsx b/app/posts/page.tsx
new file mode 100644
index 0000000..34f0e7f
--- /dev/null
+++ b/app/posts/page.tsx
@@ -0,0 +1,12 @@
+export default function Posts() {
+  return (
+    <>
+      <h1 className="pageTitle">
+        Posts
+      </h1>
+      <main className="mainColumn">
+        <p>This will have posts here eventually we promise</p>
+      </main>
+    </>
+  )
+}
diff --git a/components/InfoBar/InfoBar.module.css b/components/InfoBar/InfoBar.module.css
new file mode 100644
index 0000000..7786bd1
--- /dev/null
+++ b/components/InfoBar/InfoBar.module.css
@@ -0,0 +1,34 @@
+.infobar {
+  margin: calc(-1 * var(--text-padding));
+  margin-bottom: var(--text-padding);
+  padding: var(--text-padding);
+  background: var(--main-background);
+  height: var(--header-bar-height);
+  width: var(--main-width);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: solid 1px var(--text-dimmed);
+}
+
+.infobar.sideNote {
+  color: var(--text-dimmed);
+  font-style: italic;
+}
+
+.infobar.postMeta {
+  color: var(--text-dimmed);
+}
+
+.infobar.postMeta .author {
+  color: var(--text-medium);
+}
+
+.infobar.postMeta .date {
+  font-style: italic;
+}
+
+.infobar + p {
+  margin-top: 0;
+}
diff --git a/components/InfoBar/index.tsx b/components/InfoBar/index.tsx
new file mode 100644
index 0000000..cb5ac9a
--- /dev/null
+++ b/components/InfoBar/index.tsx
@@ -0,0 +1,66 @@
+import { ReactNode } from 'react'
+import styles from './InfoBar.module.css'
+
+interface ArbitraryChildrenProps {
+  children: ReactNode
+}
+
+interface SideNoteProps {
+  text: string
+}
+
+interface PostInfoPros {
+  publishedDate: Date,
+  authorName: string
+}
+
+interface SystemMemberInfoProps {
+  memberName: string,
+  memberAvatar: string
+}
+
+type InfobarProps = (
+  ArbitraryChildrenProps
+  | SideNoteProps
+  | PostInfoPros
+  | SystemMemberInfoProps
+)
+
+export default function InfoBar(props: InfobarProps) {
+  if ('text' in props) {
+    return (
+      <aside className={`${styles.infobar} ${styles.sideNote}`}>
+        {props.text}
+      </aside>
+    )
+  }
+
+  if ('authorName' in props) {
+    return (
+      <aside className={`${styles.infobar} ${styles.postMeta}`}>
+        <span>
+          by <span className={styles.author}>{props.authorName}</span>;{' '}
+          <span className={styles.date}>published {props.publishedDate.toLocaleDateString()}</span>
+        </span>
+      </aside>
+    )
+  }
+
+  if ('memberName' in props) {
+    return (
+      <aside className={`${styles.infobar} ${styles.sideNote}`}>
+        {props.memberName}
+      </aside>
+    )
+  }
+
+  if ('children' in props) {
+    return (
+      <aside className={styles.infobar}>
+        {props.children}
+      </aside>
+    )
+  }
+
+  throw new Error('Unknown infobar type')
+}
diff --git a/app/Footer.tsx b/components/layout/Footer.tsx
index 49089b4..f18c60d 100644
--- a/app/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -1,7 +1,7 @@
 export default function Footer() {
   return (
     <footer>
-      <span>Website by Ashelyn Rose</span>
+      <span>Website by ashelyn rose</span>
       <a href="https://git.tempest.dev/ashe/tempest.dev">Site Source</a>
       <a href="/pay-transparency">Pay Transparency</a>
     </footer>
diff --git a/app/Header.tsx b/components/layout/Header.tsx
index b5749ba..23ba4b2 100644
--- a/app/Header.tsx
+++ b/components/layout/Header.tsx
@@ -19,7 +19,7 @@ export default function Title() {
         : <a href="/" className="siteTitle">tempest.dev</a>
       }
       <nav>
-        <a href="/system">system</a>
+        <a href="/about">about</a>
         <a href="/posts">posts</a>
         <a href="/contact">contact</a>
       </nav>
diff --git a/styles/layout.css b/styles/layout.css
index f2b2dba..4a64adb 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -1,6 +1,7 @@
 :root {
   --header-height: 400px;
   --header-overlap: 150px;
+  --min-main-overhang: 100px;
   --header-bar-height: 48px;
   --main-width: 600px;
   --footer-spacing: 8px;
@@ -95,7 +96,7 @@ header .headerBackground {
   top: 0;
   left: 0;
   right: 0;
-  height: 400px;
+  height: var(--header-height);
   z-index: -1;
   user-select: none;
 }
@@ -114,7 +115,7 @@ header .headerBackground::after {
   background: rgba(0,0,0,.35);
 }
 
-header:not(.homepage) + h1 {
+header:not(.homepage) ~ h1.pageTitle {
   width: var(--main-width);
   margin: 0 auto;
   padding: var(--text-padding);
@@ -123,40 +124,21 @@ header:not(.homepage) + h1 {
   margin-top: -80px;
 }
 
-main {
-  font-family: Arial, sans-serif;
-}
-
 main.mainColumn {
   width: var(--main-width);
   box-sizing: border-box;
   padding: var(--text-padding);
   margin: 0 auto;
   background: var(--main-background);
-  min-height: calc(var(--header-overlap) + 100px);
+  min-height: calc(var(--header-overlap) + var(--min-main-overhang));
   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);
 }
 
-header.homepage + main.mainColumn {
-  min-height: calc(var(--header-overlap) + 100px - var(--header-bar-height));
-}
-
-main.mainColumn aside.infobar {
-  margin: calc(-1 * var(--text-padding));
-  margin-bottom: var(--text-padding);
-  padding: var(--text-padding);
-  background: var(--main-background);
-  height: var(--header-bar-height);
-  width: var(--main-width);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  border-bottom: solid 1px var(--text-dimmed);
+header.homepage ~ .mainColumn {
+  min-height: calc(var(--header-overlap) + var(--min-main-overhang) - var(--header-bar-height));
 }
 
-main.mainColumn > p:first-child,
-main.mainColumn .infobar + p {
+main.mainColumn > p:first-child {
   margin-top: 0;
 }
 
diff --git a/styles/pay-transparency.module.css b/styles/pay-transparency.module.css
new file mode 100644
index 0000000..8df22bd
--- /dev/null
+++ b/styles/pay-transparency.module.css
@@ -0,0 +1,25 @@
+.horizOverflow {
+  margin: 0 calc(-1 * var(--text-padding));
+  width: calc(100% + 2 * var(--text-padding));
+  overflow-x: auto;
+}
+
+.table {
+  position: relative;
+  font-size: .9em;
+  padding: 0 var(--text-padding);
+
+  display: grid;
+  grid-template-columns: repeat(4, auto);
+  column-gap: calc(.5 * var(--text-padding));
+}
+
+.table .heading {
+  color: var(--text-bright);
+  font-weight: bolder;
+  text-decoration: underline;
+}
+
+.table > span:not(.position):not(.heading) {
+  color: var(--text-dimmed);
+}