@conduction/docusaurus-preset 3.44.0 → 3.44.2

package/static/lib/canal-footer.css

@@ -434,4 +434,114 @@
 .canal-footer .ci .hp-pips .pip.hit {
   opacity: 0.18;
   fill: rgba(255,255,255,0.4);
-}
+}
+
+/* ============================================================
+   Responsive collapse.
+
+   The grid above is five `fr` columns with a 48px gap inside 56px
+   side padding. An `fr` track carries an automatic min-content
+   floor, so the columns never shrink below their longest link
+   label ("OpenRegister", "Way of Work"): measured on a 390px
+   phone the footer demanded 773px and the site's
+   `overflow-x: clip` silently swallowed the difference. Three of
+   the five columns were off-screen with no way to scroll to them,
+   and the other two were cut off mid-word.
+
+   `minmax(0, …)` on every track below removes that floor so the
+   declared column count is actually honoured.
+   ============================================================ */
+
+/* Tablet: keep five columns but stop the gap eating the row. */
+@media (max-width: 1100px) {
+  .canal-footer .water { padding: 80px 32px 28px; }
+  .canal-footer .footer-grid {
+    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
+    gap: 32px;
+  }
+}
+
+/* Small tablet and large phone: two columns, brand across the top. */
+@media (max-width: 900px) {
+  .canal-footer .footer-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 32px 24px;
+    margin-bottom: 40px;
+  }
+  .canal-footer .brand { grid-column: 1 / -1; }
+}
+
+/* Phone: one column, and every link becomes a real touch target.
+   The link lists lose their 10px gap because the 44px row height
+   provides the separation. SC 2.5.8 (AA) sets the floor at 24px;
+   44px is the comfortable thumb target we aim for on controls. */
+@media (max-width: 600px) {
+  .canal-footer .water { padding: 72px 16px 24px; }
+
+  .canal-footer .footer-grid {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 28px;
+  }
+
+  .canal-footer ul { gap: 0; }
+  .canal-footer ul a {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+    font-size: 15px;
+  }
+
+  .canal-footer .brand p { max-width: none; }
+
+  /* Legal bar: stack the two halves instead of forcing them onto one
+     line, and give the legal links and ISO badges room to breathe. */
+  .canal-footer .legal-bar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+  }
+  .canal-footer .legal-bar .left,
+  .canal-footer .legal-bar .right {
+    gap: 12px;
+  }
+  /* Short labels fail on WIDTH, not height. "ISO" measured 21x44, and
+     SC 2.5.8 takes the smaller dimension, so the padding is what brings
+     it over 24. */
+  .canal-footer .legal-bar .legal-links a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
+    min-width: 24px;
+    padding: 0 8px;
+  }
+
+  /* The "Conduction loves Nextcloud" citation is a 14px-tall caption
+     link. It reads as running text, but it is the only link in its
+     line, so it does not get the sentence exemption. */
+  .canal-footer .brand .triad a {
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+  }
+  .canal-footer .legal-bar .iso-badge {
+    min-height: 44px;
+    padding: 5px 12px;
+  }
+
+  /* Social and contact icons. 34px is above the 24px AA floor but below
+     a comfortable thumb, and these five sit side by side with a 10px
+     gap, which is where mis-taps happen. */
+  .canal-footer .brand .socials { gap: 12px; }
+  .canal-footer .brand .socials a {
+    width: 44px;
+    height: 44px;
+  }
+
+  /* The mini-game HUD and its game-over panel are pinned to the old
+     56px gutter; bring them inside the narrower one so they cannot
+     hang off the edge of the canal band. */
+  .canal-footer .game-hud,
+  .canal-footer .game-over { right: 16px; }
+  .canal-footer .game-over { min-width: 0; max-width: calc(100vw - 32px); }
+}

package/static/lib/platform-diagram.css

@@ -472,3 +472,38 @@ platform-diagram .flow-overlay .flow-line {
    `--pd-hex-progress`, `--pd-list-progress`, `--pd-flow-progress` custom
    properties. JS writes them on every scroll (rAF-throttled) so scrolling
    up reverses the entrance. There is no discrete state machine. */
+
+
+/* ============================================================
+   Narrow viewports.
+
+   The diagram is a fixed three-column composition (1fr 360px 1fr
+   with 64px gutters) whose hexes are corner-anchored with absolute
+   positioning and transforms. It cannot reflow into one column
+   without losing the spatial relationships that are the whole
+   point of it, so below the breakpoint it keeps its geometry and
+   becomes a scrollable region instead, the same treatment a wide
+   table gets.
+
+   Before this, the columns resolved to 820px inside a 342px page
+   and `overflow-x: clip` on the body swallowed the difference:
+   every app link in the left column sat 20px off the left edge of
+   the screen, unreachable and partly cut off.
+   ============================================================ */
+@media (max-width: 900px) {
+  platform-diagram {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    /* Bleed to the full page width so the scrollable area starts at
+       the screen edge rather than inside the section's gutter. */
+    margin-left: -24px;
+    margin-right: -24px;
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  platform-diagram .diagram-grid {
+    min-width: 820px;
+  }
+}