Merge feat/site-live-stars: compact mobile announcement bar

Author: profvjreddi

shared/styles/style-site.scss

@@ -37,6 +37,38 @@
 // as an "alert". On promotional site pages we want chrome, not alarm: a soft
 // off-white surface (same family as the white navbar) with a thin crimson
 // left border so the brand still signals importance without screaming.
+// ---------------------------------------------------------------------------
+// Announcement bar line control
+// ---------------------------------------------------------------------------
+// The bar sits above the landing page's scroll-snap container, so it stays on
+// screen for the whole visit rather than scrolling away. At 390px its three
+// dense lines measured 201px, a quarter of the viewport, which pushed the
+// page's own content below the fold.
+//
+// Lines are blocks rather than <br>-separated text because partials/_mobile
+// hides <br> on small screens, which merged the three labelled lines into one
+// run-on paragraph that wrapped to ten lines: taller AND harder to scan.
+.mls-ann-line {
+  display: block;
+}
+
+@media (max-width: 600px) {
+  // Drop the sibling-projects line on phones. It is the longest of the three,
+  // and TinyTorch, Kits, MLSys-im, Labs and StaffML are all reachable from the
+  // navbar, so nothing becomes unreachable.
+  .mls-ann-siblings {
+    display: none;
+  }
+
+  .alert-primary,
+  .quarto-announcement,
+  .announcement {
+    font-size: 0.8rem !important;
+    line-height: 1.45;
+    padding: 0.6rem 0.75rem !important;
+  }
+}
+
 .alert-primary,
 .quarto-announcement,
 .announcement {

site/config/announcement.yml

@@ -19,7 +19,12 @@ website:
     dismissable: true
     type: primary
     position: below-navbar
+    # Each line is wrapped so the stylesheet can address it. On a phone the
+    # bar is pinned above a scroll-snap container, so it never scrolls away;
+    # at three dense lines it held 26% of a 390px screen permanently. The
+    # sibling-projects line is hidden below 600px because it is the longest
+    # and every destination on it also sits in the navbar.
     content: |
-      📖 **ML Systems** — an open-access textbook on the engineering of intelligent systems. [Vol I: Foundations →](https://mlsysbook.ai/vol1/) · [Vol II: At Scale →](https://mlsysbook.ai/vol2/)<br>
-      🛠️ **Alongside the book:** [TinyTorch](https://mlsysbook.ai/tinytorch/) (build) · [Hardware Kits](https://mlsysbook.ai/kits/) (deploy) · [MLSys·im](https://mlsysbook.ai/mlsysim/) (model) · [Labs](https://mlsysbook.ai/labs/) (explore) · [StaffML](https://mlsysbook.ai/staffml/) (practice)<br>
-      📬 **Newsletter:** ML Systems insights & updates — [Subscribe →](https://mlsysbook.ai/newsletter/)
+      <span class="mls-ann-line">📖 **ML Systems** — an open-access textbook on the engineering of intelligent systems. [Vol I: Foundations →](https://mlsysbook.ai/vol1/) · [Vol II: At Scale →](https://mlsysbook.ai/vol2/)</span>
+      <span class="mls-ann-line mls-ann-siblings">🛠️ **Alongside the book:** [TinyTorch](https://mlsysbook.ai/tinytorch/) (build) · [Hardware Kits](https://mlsysbook.ai/kits/) (deploy) · [MLSys·im](https://mlsysbook.ai/mlsysim/) (model) · [Labs](https://mlsysbook.ai/labs/) (explore) · [StaffML](https://mlsysbook.ai/staffml/) (practice)</span>
+      <span class="mls-ann-line">📬 **Newsletter:** ML Systems insights & updates — [Subscribe →](https://mlsysbook.ai/newsletter/)</span>