@jant/core 0.6.16 → 0.7.0

package/src/styles/site-media.css

@@ -487,10 +487,24 @@
   cursor: pointer;
 }
 
+/*
+ * No height cap and no fit here: the gallery owns both, and sets them together
+ * in its markup. In a row it hands every item the same inline `height` and
+ * crops it to that height (`object-cover`), so a clip lines up with the
+ * pictures beside it. A lone visual gets `min(100%, 24rem * ratio, …)` for its
+ * width, which caps its height at 24rem on its own, and a lone clip is
+ * letterboxed (`object-contain`) in case its frames disagree with the stored
+ * size.
+ *
+ * Each value this rule used to carry only re-entered as a second opinion. A
+ * `max-height` left the video short in a row taller than the cap (a portrait
+ * first picture pushed it to 440px), with the frame showing underneath it. An
+ * `object-fit: contain` lost to the row's `object-cover` only because this
+ * sheet sits in the components layer; a copy without the layer letterboxed
+ * every clip in a row.
+ */
 .media-video-wrap video {
   width: 100%;
-  max-height: 24rem;
-  object-fit: contain;
   background-color: var(--color-muted);
 }
 

package/src/styles/tokens.css

@@ -8,8 +8,27 @@
 
 :root {
   /* Typography — Font families */
-  --font-cjk-serif-fallback: "Jant Language Fallback";
-  --font-cjk-sans-fallback: "Jant Language Fallback";
+  /*
+   * CJK fallback slots, kept in sync with `DEFAULT_FONT_CJK_*_FALLBACK` in
+   * `ui/font-themes.ts` (a test asserts they match). A page whose language names
+   * a CJK profile overrides both with a stack that leads on its own glyph
+   * shapes; every other page keeps these, because the Latin families and the
+   * `serif` / `sans-serif` generics around them have no Han coverage and would
+   * otherwise drop the text to the OS last-resort font.
+   */
+  --font-cjk-serif-fallback:
+    "Songti SC", STSong, SimSun, "Noto Serif SC", "Noto Serif CJK SC",
+    "Songti TC", PMingLiU, MingLiU, "Noto Serif TC", "Noto Serif CJK TC",
+    "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho,
+    "Noto Serif JP", "Noto Serif CJK JP", "MS PMincho", "MS Mincho", Batang,
+    "Noto Serif KR", "Noto Serif CJK KR", NanumMyeongjo;
+  --font-cjk-sans-fallback:
+    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
+    "Noto Sans CJK SC", "PingFang TC", "Hiragino Sans CNS",
+    "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", "Hiragino Sans",
+    "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP",
+    "Noto Sans CJK JP", Meiryo, "Apple SD Gothic Neo", "Noto Sans KR",
+    "Noto Sans CJK KR", "Malgun Gothic";
   --font-body:
     system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Helvetica, Arial, var(--font-cjk-sans-fallback),
@@ -124,7 +143,26 @@
   --form-max-width: 42rem;
   /* compose dialogs + feed content cap */
   --layout-body-max-width: 1088px;
+  /*
+   * Two widths, one column — keep the distinction straight.
+   *
+   * `--layout-content-width` is the Tufte proportion: how much of a page
+   * section its content occupies, leaving the rest as sidenote gutter. Page
+   * shells that should fill the frame once the gutter is gone (settings,
+   * the collections directory) read this one, which is why it flattens to
+   * 100% below 1024px.
+   *
+   * `--layout-reading-width` is the reading column a post's text actually
+   * gets. It tracks the proportion while the gutter exists, then keeps a
+   * measure of its own instead of going full-width. Anything that must line
+   * up with body copy — the text blocks in preset.css, a lone image
+   * (MediaGallery `getSingleVisualWidth`), a link preview, the feed divider
+   * that centers over the column — reads this one. Before it existed those
+   * consumers capped on the proportion and quietly outgrew the text between
+   * 700px and 1024px.
+   */
   --layout-content-width: 55%;
+  --layout-reading-width: var(--layout-content-width);
   --layout-sidenote-width: 50%;
   --layout-sidenote-gap: 10%;
   --layout-sidenote-margin: -60%;
@@ -169,7 +207,7 @@
    * -bottom: gap from the intro down to its separator — the hairline (logged
    * out) or the compose prompt text (logged in). Same values in both states.
    */
-  --site-intro-gap-top: 24px;
+  --site-intro-gap-top: 20px;
   --site-intro-gap-bottom: 36px;
 
   /* Sidebar layout (admin + site sidebar pages) */
@@ -436,7 +474,38 @@
   --dash-card-radius: 10px;
 }
 
-@media (max-width: 760px) {
+/* =========================================================================
+ * Breakpoint ledger
+ *
+ * Every width breakpoint in the stylesheets comes from this list, and each
+ * entry names the one job it does. `src/__tests__/stylesheet-breakpoints.test.ts`
+ * fails the build on anything else, because a second number for a job that
+ * already has one is how the phone switch drifted apart before: the composer
+ * once went full-screen at 700px while its own controls took their touch
+ * sizing at 760px, so a 750px window got thumb-sized buttons inside a windowed
+ * dialog.
+ *
+ *   480px   Header hamburger; the composer's post-meta pill sheds its words.
+ *   580px   Nav collapse tier-sm (hides the 3rd inline link).
+ *   640px   Media grid and lightbox chrome.
+ *   700px   THE PHONE SWITCH. Below it the layout is a phone's: the composer
+ *           is a full-screen sheet, the compose FAB appears, page gutters and
+ *           the content type scale go narrow. Written `max-width: 699px` on
+ *           the phone side and `min-width: 700px` on the desktop side, so the
+ *           two never both match at 700px itself.
+ *   780px   Nav collapse tier-md (also hides the 4th inline link).
+ *   960px   Nav collapse tier-lg (hides the 5th+ inline link into More).
+ *   1024px  Tufte two-column → single-column (see the note below).
+ *   1079px  Collections sidebar drops out.
+ *   1200px  Header search collapses to an icon.
+ *
+ * Touch is NOT a width. Thumb-sized controls and always-visible affordances
+ * belong to `(hover: none) and (pointer: coarse)`, which is what actually
+ * catches a phone or a tablet; a narrow desktop window is still a mouse.
+ * Rules that want both say both.
+ * ========================================================================= */
+
+@media (max-width: 699px) {
   :root {
     --site-padding: 1.875rem;
   }
@@ -444,17 +513,18 @@
 
 /* Tufte two-column → single-column collapse.
  *
- * Below this width the post column is already narrowed to `min(100%, 35rem)`
- * (preset.css) and there is no room for a 45% sidenote gutter, so all content
- * goes full-width. Single images (MediaGallery getSingleVisualWidth) and link
- * previews (.link-preview) read this token directly, so they collapse here too.
+ * There is no room for a 45% sidenote gutter here, so page shells go
+ * full-width — but the reading column does not follow them. It keeps a 35rem
+ * measure, and everything sized to the text (preset.css blocks, single images,
+ * link previews, the feed divider) tracks that through
+ * `--layout-reading-width` rather than restating the number.
  *
- * Keep this breakpoint in sync with the post-column collapse (preset.css /
- * ui.css feed-divider, both `max-width: 1024px`) and the sidenote float→inline
- * collapse (ui.css). They are one layout switch; do not let them drift apart. */
+ * Keep this breakpoint in sync with the sidenote float→inline collapse
+ * (ui.css). They are one layout switch; do not let them drift apart. */
 @media (max-width: 1024px) {
   :root {
     --layout-content-width: 100%;
+    --layout-reading-width: min(100%, 35rem);
   }
 }
 
@@ -564,7 +634,7 @@
   );
 }
 
-@media (max-width: 760px), (hover: none) and (pointer: coarse) {
+@media (max-width: 699px), (hover: none) and (pointer: coarse) {
   :root {
     /* Content layer — tighter scale for mobile reading.
        Ratio ≈ 1.88 : 1.42 : 1.15 : 1 (display:title:subtitle:body).