refactor(2048): render notes in semantic <main>, drop .prose wrapper

Author: cablehead

examples/2048/design/serve.nu

@@ -355,8 +355,8 @@ def render-stories [slug: string]: nothing -> list {
     ]
     "palettes" => (palette-catalog | each {|p| palette-story $p })
     "markdown" => [
-      (story "rendered via .md, wrapped in .prose (same path as /notes pages)" [
-        (DIV {class: "prose"} {__html: ($MD_SAMPLE | .md | get __html)})
+      (story "rendered via .md; raw-tag typography (the /notes pages add the <main> column)" [
+        {__html: ($MD_SAMPLE | .md | get __html)}
       ])
     ]
     _ => []
@@ -416,7 +416,7 @@ def design-page [req: record current: string]: nothing -> string {
           (A {href: $current} $entry.title)
         ]
         --right [])
-      (MAIN {class: "design-main"}
+      (DIV {class: "design-main"}
         (NAV {class: "design-nav"}
           ($CATALOG | each {|c|
             (A {href: $c.slug class: (if $c.slug == $current { "current" } else { "" })}

examples/2048/notes/serve.nu

@@ -42,15 +42,13 @@ def all-pages []: nothing -> list {
       let root_req = $req | upsert mount_prefix ($req.mount_prefix | str replace -r '/notes$' '')
       let pages = all-pages
       ([
-        (DIV {class: "page"}
-          (H1 "notes")
-          (P "a wandering set of pages about 2048 -- the game, its history, and how this implementation works.")
-          (UL ($pages | each {|p|
-            (LI (A {href: ($req | href $"/($p.slug)")} $p.title))
-          })))
+        (H1 "notes")
+        (P "a wandering set of pages about 2048 -- the game, its history, and how this implementation works.")
+        (UL ($pages | each {|p|
+          (LI (A {href: ($req | href $"/($p.slug)")} $p.title))
+        }))
       ] | layout $root_req $REV $DATASTAR_JS_PATH
-            --title "nu2048 / notes"
-            --body-class "notes")
+            --title "nu2048 / notes")
     })
 
     (route {method: GET path-matches: "/:slug"} {|req ctx|
@@ -61,12 +59,10 @@ def all-pages []: nothing -> list {
         let root_req = $req | upsert mount_prefix ($req.mount_prefix | str replace -r '/notes$' '')
         let rendered = $page.body | .md | get __html
         ([
-          (DIV {class: "page"}
-            (H1 $page.title)
-            (DIV {class: "prose"} {__html: $rendered}))
+          (H1 $page.title)
+          {__html: $rendered}
         ] | layout $root_req $REV $DATASTAR_JS_PATH
-              --title $"nu2048 / ($page.title)"
-              --body-class "notes")
+              --title $"nu2048 / ($page.title)")
       }
     })
   ]

examples/2048/static/styles.css

@@ -121,16 +121,20 @@ html {
 body {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  padding: 12px;
+  max-width: 900px;        /* the whole page is one centered column; */
+  margin-inline: auto;     /* html paints the full-viewport background */
+  padding: 12px 1rem;
   gap: 12px;
   background: var(--bg);
   color: var(--fg);
   font: var(--text-md)/1.6 var(--font-sans);
 }
 
 h1 { font-size: clamp(24px, 6vmin, 40px); }
-p  { font-size: 14px; }
+/* Paragraphs inherit the body type (--text-md / 1.6). Secondary text
+   that wants to be small opts in via a class (.hint, .credit, .by,
+   ...) rather than every paragraph opting out of the base size. */
+.hint { font-size: var(--text-sm); }
 
 button {
   background: var(--accent);
@@ -309,9 +313,6 @@ body.flash-red { animation: flash-red 300ms ease; }
 }
 
 .page {
-  width: 100%;
-  max-width: 900px;
-  padding: 0 1rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -534,9 +535,6 @@ body.flash-red { animation: flash-red 300ms ease; }
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-  max-width: 900px;
-  width: 100%;
-  padding: 0 1rem;
   margin: 1rem 0 2.5rem;
 }
 .hero > h2 { font-family: var(--font-mono); color: var(--fg-header); font-size: 3rem; line-height: 1.1; }
@@ -569,76 +567,57 @@ body.flash-red { animation: flash-red 300ms ease; }
 .callouts a { font-size: var(--text-lg); }
 .callout-desc { font-size: var(--text-md); opacity: 0.85; }
 
-/* Article typography. Scoped to .prose so chrome (breadcrumbs, headers,
-   sidebars) keeps its own type rules. Used by /notes pages and the
-   /design markdown story. */
-.prose {
-  max-width: 65ch;
-  font-size: 1.2em;  /* ~21.6px relative to body's 18px -- article body */
-  line-height: 1.6;
-}
-.prose > * + * { margin-top: 1em; }
-.prose h2 {
-  font-family: var(--font-mono);
-  font-size: var(--text-xl);
-  color: var(--fg-header);
-  line-height: 1.2;
-  margin-top: 2.5em;
-}
-.prose h3 {
-  font-family: var(--font-mono);
-  font-size: var(--text-lg);
-  color: var(--fg-header);
-  line-height: 1.2;
-  margin-top: 2em;
-}
-.prose ul, .prose ol { padding-left: 1.5em; }
-.prose li + li { margin-top: 0.4em; }
-.prose li > p { margin: 0; }  /* tight bullets, no double spacing */
-.prose blockquote {
-  margin: 0;
+/* Raw-tag typography: the look lives on the tag so it reads the same
+   wherever the tag appears (essays, the /design markdown demo, ...).
+   Vertical rhythm (margins) is added per context below, not here, since
+   the reset zeroes margins for the flex-based chrome.
+   Headings share one look (the body's sans + off-white, like h1); each
+   step just sizes down. The cream (--fg-header) is a specialization
+   applied where wanted -- e.g. the splash hero's .hero > h2. */
+h2 { font-size: var(--text-xl); }
+h3 { font-size: var(--text-lg); }
+blockquote {
   padding: 0.25em 0 0.25em 1.25em;
   border-left: 3px solid var(--brand);
   color: var(--fg-header);
   font-style: italic;
   opacity: 0.9;
 }
-.prose code {
-  /* element-rule already mono; just add a small pill background */
+code {  /* mono is already set on the element; add the inline pill */
   font-size: 0.92em;
   padding: 0.1em 0.35em;
   background: rgba(0, 0, 0, 0.3);
   border-radius: 3px;
 }
-.prose pre {
-  margin: 0;
+pre {
   padding: 0.9em 1.1em;
   background: rgba(0, 0, 0, 0.35);
   border-radius: 6px;
   overflow-x: auto;
   font-size: var(--text-sm);
   line-height: 1.5;
 }
-.prose pre code {
-  /* inline-code styling shouldn't apply inside a <pre> */
-  padding: 0;
-  background: none;
-  border-radius: 0;
-  font-size: inherit;
-}
+pre code { padding: 0; background: none; border-radius: 0; font-size: inherit; }
+
+/* Vertical rhythm for content blocks inside <main>. App pages put a
+   single .page/.hero in main, so this is a no-op for them; essay pages
+   (/notes) put their prose blocks straight in main, where it does the
+   spacing. Direct-child (>) keeps the splash hero's nested h2 out of it. */
+main > * + * { margin-top: 1em; }
+/* Section breaks before headings, in rem so they don't compound with the
+   heading's own (large) font-size the way em would. */
+main > h2 { margin-top: 2rem; }
+main > h3 { margin-top: 1.5rem; }
 
 /* Site header: shared by / and /play. Mirrors the http-nu/www header
    pattern -- `flex items-baseline justify-between mt-10 mb-2`. Title
    left, status + credit right. No divider lines; whitespace separates. */
 .site-header {
-  width: 100%;
-  max-width: 900px;
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
   margin: 2rem 0 0.75rem;
-  padding: 0 1rem;
   font-size: var(--text-sm);
 }
 .site-header .site-title {
@@ -673,12 +652,8 @@ body.flash-red { animation: flash-red 300ms ease; }
 /* Site footer: whitespace partitions, no border or background. Links
    like nav -- each page anchors the same set of meta destinations. */
 .site-footer {
-  /* Same container shape as .page / .hero (body's align-items: center
-     does the centering). Content right-aligned within. The link's
-     muted look comes from the shared chrome-link rule. */
-  width: 100%;
-  max-width: 900px;
-  padding: 0 1rem;
+  /* Content right-aligned within the page column. The link's muted look
+     comes from the shared chrome-link rule. */
   margin: 4rem 0 1.5rem;
   text-align: right;
   font-size: var(--text-sm);

examples/2048/tfe/templates/layout.html

@@ -26,7 +26,7 @@
   <div class="site-header-right">
     <a class="site-nav-link" href="{{ leaderboard_href }}">leaderboard</a>
     {% if sse %}<span class="site-presence" data-text="$presence.totalTabs + ' here'" title="people currently on the site"></span>{% endif %}
-    {% if player_id %}<a class="you-are" href="{{ my_games_href }}" title="your games (profile soon)">you are: <code>{{ player_id }}</code></a>{% endif %}
+    {% if player_id %}<a class="you-are" href="{{ my_games_href }}" title="your games (profile soon)">you are: {{ player_id }}</a>{% endif %}
     <div class="status">
       <span id="conn" class="stat"></span>
       {% if show_rtt %}<span id="rtt" class="stat"></span>{% endif %}
@@ -36,7 +36,9 @@
     </span>
   </div>
 </header>
+<main>
 {{ body_html | safe }}
+</main>
 <footer class="site-footer">
   <a href="{{ design_href }}">design</a>
 </footer>