Redesign the reading grid and add logic architecture diagrams

architecture/index.html

@@ -35,23 +35,24 @@
   <link rel="preload" href="../assets/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin>
   <style>
     :root {
-      --type-title: 2rem;
-      --title-leading: 1.15;
-      --type-heading: 1.25rem;
-      --heading-leading: 1.3;
-      --type-subheading: 0.9375rem;
-      --subheading-leading: 1.5;
-      --type-reading: 0.9375rem;
-      --reading-leading: 1.7;
+      --type-title: 2.25rem;
+      --title-leading: 1.12;
+      --type-heading: 1.5rem;
+      --heading-leading: 1.25;
+      --type-subheading: 1.125rem;
+      --subheading-leading: 1.4;
+      --type-reading: 1rem;
+      --reading-leading: 1.65;
       --type-interface: 0.9375rem;
       --interface-leading: 1.5;
-      --type-label: 0.9375rem;
-      --label-leading: 1.5;
+      --type-label: 0.8125rem;
+      --label-leading: 1.45;
     }
 
     @media (width < 768px) {
       :root {
-        --type-title: 1.75rem;
+        --type-title: 1.875rem;
+        --type-heading: 1.375rem;
       }
     }
 

website/app/components/AboutContent.tsx

@@ -55,14 +55,16 @@ export function AboutContent({ hasHero = false }: { hasHero?: boolean }) {
           <h2 className={styles.sectionTitle} id="research-heading">Selected Research</h2>
           <div>
             {selectedResearchProjects.map((project) => (
-              <article className={styles.researchEntry} key={project.slug} id={project.slug}>
-                <h3 className={styles.researchTitle} id={`${project.slug}-title`}>{project.title}</h3>
-                {researchSummaries[project.slug].map((paragraph, index) => (
-                  <p className={styles.researchSummary} key={index}>{paragraph}</p>
-                ))}
-                <Link className={styles.readMore} href={project.path} aria-label={`Read more about ${project.title}`}>
-                  Read More<ReadingArrow />
-                </Link>
+              <article className={styles.row} key={project.slug} id={project.slug}>
+                <h3 className={styles.rowTitle} id={`${project.slug}-title`}>{project.title}</h3>
+                <div className={styles.rowBody}>
+                  {researchSummaries[project.slug].map((paragraph, index) => (
+                    <p className={styles.researchSummary} key={index}>{paragraph}</p>
+                  ))}
+                  <Link className={styles.readMore} href={project.path} aria-label={`Read more about ${project.title}`}>
+                    Read More<ReadingArrow />
+                  </Link>
+                </div>
               </article>
             ))}
           </div>
@@ -73,27 +75,31 @@ export function AboutContent({ hasHero = false }: { hasHero?: boolean }) {
         <p className={styles.sectionIndex} aria-hidden="true">03</p>
         <div className={styles.sectionBody}>
           <h2 className={styles.sectionTitle} id="education-heading">Education</h2>
-          <h3 className={styles.institution}>Duke University</h3>
-          <div className={styles.educationList}>
-            <article className="education-entry">
-              <h4 className="education-degree">Master of Engineering in Risk Engineering</h4>
-              <p className="entry-subtitle">Financial Risk Concentration</p>
-              <div className="education-notes">
-                <p className="education-note education-advisor">
-                  Academic Advisor:{" "}
-                  <a href="https://cee.duke.edu/people/mark-borsuk/" target="_blank" rel="noopener noreferrer">Mark Borsuk, Ph.D.</a>
-                </p>
-                <p className="education-note">Pratt School of Engineering Merit Scholarship</p>
+          <div className={styles.row}>
+            <h3 className={styles.institution}>Duke University</h3>
+            <div className={styles.rowBody}>
+              <div className={styles.educationList}>
+                <article className="education-entry">
+                  <h4 className="education-degree">Master of Engineering in Risk Engineering</h4>
+                  <p className="entry-subtitle">Financial Risk Concentration</p>
+                  <div className="education-notes">
+                    <p className="education-note education-advisor">
+                      Academic Advisor:{" "}
+                      <a href="https://cee.duke.edu/people/mark-borsuk/" target="_blank" rel="noopener noreferrer">Mark Borsuk, Ph.D.</a>
+                    </p>
+                    <p className="education-note">Pratt School of Engineering Merit Scholarship</p>
+                  </div>
+                </article>
+                <article className="education-entry">
+                  <h4 className="education-degree">Bachelor of Science in Mathematics</h4>
+                  <p className="entry-subtitle">Dual-Degree Undergraduate Program</p>
+                  <p className="education-note">Undergraduate Merit Scholarship</p>
+                </article>
               </div>
-            </article>
-            <article className="education-entry">
-              <h4 className="education-degree">Bachelor of Science in Mathematics</h4>
-              <p className="entry-subtitle">Dual-Degree Undergraduate Program</p>
-              <p className="education-note">Undergraduate Merit Scholarship</p>
-            </article>
-          </div>
-          <div className={styles.coursework} id="coursework">
-            <Link className={styles.readMore} href="/coursework/" aria-label="Read more about coursework">Read More<ReadingArrow /></Link>
+              <div className={styles.coursework} id="coursework">
+                <Link className={styles.readMore} href="/coursework/" aria-label="Read more about coursework">Read More<ReadingArrow /></Link>
+              </div>
+            </div>
           </div>
         </div>
       </section>

website/app/components/SectionDirectory.module.css

@@ -1,7 +1,7 @@
 .directory {
   display: grid;
   grid-template-columns: 1fr;
-  margin-top: 24px;
+  margin-top: 48px;
   font-family: var(--font-text);
 }
 
@@ -17,7 +17,7 @@
   color: var(--ink);
   font-size: var(--type-heading);
   font-weight: 400;
-  letter-spacing: -0.01em;
+  letter-spacing: var(--heading-tracking);
   line-height: var(--heading-leading);
   transition: color 180ms var(--ease-out);
 }

website/app/components/SiteShell.tsx

@@ -1,20 +1,22 @@
 import type { ReactNode } from "react";
 import type { ActivePage, ParentPage } from "../lib/content/site";
 import { SiteNavigation } from "./SiteNavigation";
-import { StructuralGrid } from "./StructuralGrid";
+import { StructuralGrid, type GuideLayout } from "./StructuralGrid";
 
 export function SiteShell({
   active,
   parent,
   children,
   frameClassName,
+  guides = "article",
   showSkipLink = true,
   skipHref = "#main-content",
 }: {
   active?: ActivePage;
   parent?: ParentPage;
   children: ReactNode;
   frameClassName?: string;
+  guides?: GuideLayout;
   showSkipLink?: boolean;
   skipHref?: `#${string}`;
 }) {
@@ -28,7 +30,7 @@ export function SiteShell({
       <div
         className={frameClassName ? `site-frame ${frameClassName}` : "site-frame"}
       >
-        <StructuralGrid />
+        <StructuralGrid layout={guides} />
         <SiteNavigation active={active} parent={parent} />
 
         <main className="content-column" id="main-content">

website/app/components/StructuralGrid.tsx

@@ -6,9 +6,16 @@ const guides = [
   "reading-end",
 ] as const;
 
-export function StructuralGrid() {
+/**
+ * Decorative column guides. "index" pages hang titles on the reading start and
+ * set prose on a second axis three columns in; "article" pages end their
+ * reading column where the contents rail begins.
+ */
+export type GuideLayout = "index" | "article";
+
+export function StructuralGrid({ layout = "article" }: { layout?: GuideLayout }) {
   return (
-    <div className="structural-grid" aria-hidden="true">
+    <div className="structural-grid" data-guides={layout} aria-hidden="true">
       {guides.map((guide) => (
         <span
           className={`structural-guide structural-guide-${guide}`}