From 5f2bc705c755a7c3cbdc1cbd8af1781fc74e2a74 Mon Sep 17 00:00:00 2001
From: Sensemaker <agent-7f38ac07-af1c-4e2c-89a7-35a1f13f6173@letta.com>
Date: Fri, 22 May 2026 08:35:23 +0000
Subject: [PATCH] site: refine sessions index layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

👾 Generated with [Letta Code](https://letta.com)

Co-Authored-By: Letta Code <noreply@letta.com>
---
 src/main.tsx   |  6 +++---
 src/styles.css | 39 +++++++++++++++++++++++----------------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/main.tsx b/src/main.tsx
index 499370f..391fbda 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -218,8 +218,8 @@ function InterviewPage() {
       <header className="site-header">
         <div>
           <p className="eyebrow">Interviewer</p>
-          <h1>{data?.session.title ?? "Interviewer"}</h1>
-          <p className="dek">ATProto-native Q&A rendered as a quiet public record.</p>
+          <h1>{view === "index" ? "Interviewer" : (data?.session.title ?? "Interviewer")}</h1>
+          <p className="dek">{view === "index" ? "Browse interview sessions written as ATProto records." : "ATProto-native Q&A rendered as a quiet public record."}</p>
         </div>
         <img className="brand-logo" src="/logo.svg" alt="Sensemaker" />
       </header>
@@ -238,7 +238,7 @@ function InterviewPage() {
           </div>
         </form>
       ) : (
-        <form className="loader" onSubmit={(event) => loadIndex(event)}>
+        <form className="loader compact-loader" onSubmit={(event) => loadIndex(event)}>
           <label htmlFor="repo">Interviewer repo</label>
           <div>
             <input id="repo" value={repoInput} onChange={(event) => setRepoInput(event.target.value)} />
diff --git a/src/styles.css b/src/styles.css
index d287fa6..6df2397 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -33,14 +33,14 @@ code {
 main {
   width: min(980px, calc(100vw - 32px));
   margin: 0 auto;
-  padding: 56px 0 96px;
+  padding: 40px 0 96px;
 }
 .site-header {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 32px;
   align-items: start;
-  padding: 28px 0 36px;
+  padding: 20px 0 30px;
   border-bottom: 1px solid var(--line);
 }
 .eyebrow, .label {
@@ -55,21 +55,21 @@ h1 {
   margin: 0;
   max-width: 760px;
   font-family: Newsreader, Georgia, serif;
-  font-size: clamp(42px, 6vw, 76px);
+  font-size: clamp(46px, 7vw, 92px);
   line-height: 0.98;
   letter-spacing: -0.04em;
   font-weight: 700;
 }
 .dek {
   max-width: 620px;
-  margin: 24px 0 0;
+  margin: 20px 0 0;
   color: var(--muted);
-  font-size: 22px;
+  font-size: 21px;
   line-height: 1.35;
 }
 .brand-logo {
-  width: 76px;
-  height: 76px;
+  width: 96px;
+  height: 96px;
   object-fit: contain;
   filter: invert(1);
   opacity: 0.84;
@@ -78,7 +78,7 @@ h1 {
 .tabs {
   display: flex;
   gap: 10px;
-  margin: 24px 0 0;
+  margin: 20px 0 0;
 }
 .tabs button {
   color: var(--muted);
@@ -93,14 +93,14 @@ h1 {
 .session-list {
   display: grid;
   gap: 16px;
-  margin-top: 32px;
+  margin-top: 24px;
 }
 .session-row {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 24px;
   align-items: center;
-  padding: 24px;
+  padding: 20px 22px;
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 22px;
@@ -109,7 +109,7 @@ h1 {
   margin: 0;
   max-width: 760px;
   font-family: Newsreader, Georgia, serif;
-  font-size: clamp(28px, 3.5vw, 44px);
+  font-size: clamp(24px, 3vw, 36px);
   line-height: 1.04;
   letter-spacing: -0.025em;
 }
@@ -117,16 +117,19 @@ h1 {
   max-width: 720px;
   margin: 14px 0 0;
   color: var(--muted);
-  font-size: 18px;
-  line-height: 1.45;
+  font-size: 16px;
+  line-height: 1.4;
 }
 .loader {
-  margin: 28px 0 42px;
-  padding: 18px;
+  margin: 24px 0 34px;
+  padding: 16px;
   background: rgba(255,255,255,0.025);
   border: 1px solid var(--line);
   border-radius: 18px;
 }
+.compact-loader {
+  max-width: 820px;
+}
 .loader label {
   display: block;
   margin-bottom: 10px;
@@ -270,5 +273,9 @@ dd {
 }
 
 @media (min-width: 1100px) {
-  main { width: min(1040px, calc(100vw - 64px)); }
+  main { width: min(1100px, calc(100vw - 72px)); }
+}
+
+@media (min-width: 1400px) {
+  main { width: min(1160px, calc(100vw - 96px)); }
 }
-- 
2.51.2