T45d Site · Components: one search over chapters, stories and components (Slash, Enter, Escape), the index in hairline rows, the story beside a sticky chapter rail, arrows between stories

frontend/src/styles.css

@@ -115,15 +115,29 @@ main > :first-child { animation: enter 480ms ease-out both; }
 @keyframes enter { from { opacity: 0; } }
 
 .chapters { padding: 160px 64px 128px; }
-.chapters h1 { font-size: clamp(40px, 6vw, 96px); letter-spacing: -0.04em; margin-bottom: 96px; }
+.chapters h1 { font-size: clamp(48px, 7vw, 112px); line-height: 0.95; font-weight: 800; letter-spacing: -0.045em; }
+.find { display: block; width: 100%; margin: 56px 0 72px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--fg); font: 300 24px/32px var(--sans); outline: none; transition: border-color 160ms ease-out; }
+.find::placeholder { color: var(--faint); }
+.find:focus-visible { border-color: var(--accent); }
+.find.small { margin: 0 0 24px; font-size: 15px; line-height: 24px; padding: 8px 0; }
+.none { font-size: 18px; }
 .chapters ol { list-style: none; margin: 0; padding: 0; }
-.chapters a { display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); }
-.chapters .n, .chapters .count { font: 400 13px/20px var(--mono); color: var(--faint); }
+.chapters li { display: grid; grid-template-columns: 64px minmax(160px, 1fr) 2fr; gap: 0 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); }
+.chapters .n { font: 400 13px/20px var(--mono); color: var(--faint); }
 .chapters .name { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
+.chapters .titles { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; line-height: 22px; min-width: 0; }
+.titles a, .side a { color: var(--muted); transition: color 160ms ease-out; overflow-wrap: anywhere; }
+.titles a:hover, .side a:hover, .side a[aria-current="page"], .side-chapter[data-on] { color: var(--fg); }
 
-.story { padding: 128px 64px 96px; }
+.reader { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; padding: 0 64px; }
+.side { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 64px 8px 64px 0; overscroll-behavior: contain; }
+.side nav > div { margin-bottom: 4px; }
+.side-chapter { display: block; padding: 4px 0; font-size: 15px; font-weight: 500; }
+.side ol { list-style: none; margin: 4px 0 12px; padding: 0 0 0 14px; border-left: 1px solid var(--line); font-size: 13px; line-height: 20px; }
+.side li { padding: 4px 0; }
+.story { padding: 128px 0 96px; min-width: 0; }
 .crumb { font-size: 14px; color: var(--muted); }
-.story h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.035em; margin: 12px 0 64px; max-width: 18ch; }
+.story h1 { font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; margin: 12px 0 64px; overflow-wrap: anywhere; }
 
 .live { position: relative; height: 72vh; min-height: 520px; background: var(--bg); }
 .live iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
@@ -142,8 +156,8 @@ img.shot { display: block; max-width: 100%; height: auto; }
 .windows { margin-top: 96px; }
 .shots { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
 
-.pager { display: flex; justify-content: space-between; gap: 24px; margin-top: 96px; font-size: 18px; font-weight: 600; }
-.pager a { color: var(--muted); transition: color 160ms ease-out; }
+.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; margin-top: 96px; font-size: 18px; font-weight: 600; }
+.pager a { max-width: 100%; color: var(--muted); overflow-wrap: anywhere; transition: color 160ms ease-out; }
 .pager a:hover { color: var(--fg); }
 .pager .next { margin-left: auto; text-align: right; }
 
@@ -156,13 +170,17 @@ img.shot { display: block; max-width: 100%; height: auto; }
 @media (max-width: 767px) {
   .bar { padding: 0 16px; gap: 12px; }
   .bar .end { gap: 0; }
-  .hero, .chapters, .story, .missing { padding-left: 20px; padding-right: 20px; }
+  .hero, .chapters, .missing { padding-left: 20px; padding-right: 20px; }
+  .reader { grid-template-columns: minmax(0, 1fr); padding: 0 20px; }
+  .side { display: none; }
+  .chapters li { grid-template-columns: 40px minmax(0, 1fr); }
+  .chapters .titles { grid-column: 2; margin-top: 8px; }
   .foot { padding: 32px 20px; }
   .chapters .name { font-size: 22px; }
   .hero-iso { width: 100%; height: 55%; }
   .hero > :not(.iso) { max-width: none; }
   .city { height: auto; }
-  .hero h1 { font-size: 13vw; }
+  .hero h1, .chapters h1 { font-size: 13vw; }
   .feature h2, .city h2, .close h2 { font-size: 10vw; }
   .feature, .feature:nth-of-type(odd), .city { grid-template-columns: 1fr; grid-template-rows: none; gap: 32px; padding: 112px 20px 48px; }
   .feature-words, .feature-iso, .feature-live, .feature:nth-of-type(odd) .feature-words, .feature:nth-of-type(odd) .feature-iso, .feature:nth-of-type(odd) .feature-live, .city h2 { grid-area: auto; }