fix: style device tiles, size the header logo

tests/test_site_r2_css.py

@@ -213,3 +213,18 @@ class ThemeStylesheet(unittest.TestCase):
 
 if __name__ == "__main__":
     unittest.main()
+
+
+class DeviceTilesAndHeaderLogo(unittest.TestCase):
+    """The device tiles had no style once merged: every line underlined and one
+    tall block per setup on a phone. The header logo was sized from the whole
+    header, tab row included, and grew to 84 px."""
+
+    def test_a_tile_is_one_compact_link(self):
+        css = CSS_PATH.read_text(encoding="utf-8")
+        self.assertRegex(css, r"a\.rb-tile \{[^}]*grid-template-columns: 40px 1fr")
+        self.assertRegex(css, r"a\.rb-tile \{[^}]*text-decoration: none")
+
+    def test_the_header_logo_follows_the_top_bar(self):
+        css = CSS_PATH.read_text(encoding="utf-8")
+        self.assertIn("header .site-title img { height: calc(4rem - 2 * var(--sl-nav-pad-y))", css)

website/src/styles/retrobios.css

@@ -272,6 +272,26 @@
 	vertical-align: middle;
 }
 
+/* Device tiles: the whole tile is the link. Logo on the left, name over
+   what it runs on, so a phone shows a short row per setup. */
+.sl-markdown-content .rb-tiles { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem; }
+.sl-markdown-content .rb-cards > a.rb-tile {
+	display: grid;
+	grid-template-columns: 40px 1fr;
+	grid-template-rows: auto auto;
+	column-gap: 0.75rem;
+	row-gap: 0.1rem;
+	align-items: center;
+	align-content: center;
+	padding: 0.6rem 0.75rem;
+	color: var(--sl-color-white);
+	text-decoration: none;
+}
+.sl-markdown-content a.rb-tile .rb-card-logo { grid-row: 1 / span 2; }
+.sl-markdown-content a.rb-tile .rb-tile-name { color: var(--sl-color-text-accent); font-weight: 600; line-height: 1.3; }
+.sl-markdown-content a.rb-tile .rb-tile-runs { color: var(--sl-color-gray-3); font-size: var(--sl-text-sm); line-height: 1.35; }
+.sl-markdown-content a.rb-tile:hover .rb-tile-name { text-decoration: underline; }
+
 /* Numbered steps */
 .sl-markdown-content .rb-steps > ol {
 	counter-reset: rb-step;
@@ -705,3 +725,9 @@ starlight-tabs [role='tab'] { white-space: nowrap; }
 		animation-iteration-count: 1 !important;
 	}
 }
+
+/* Starlight sizes the header logo from --sl-nav-height, which also holds the
+   tab row from 50rem up. Size it from the top bar alone. */
+@media (min-width: 50rem) {
+	header .site-title img { height: calc(4rem - 2 * var(--sl-nav-pad-y)); width: auto; }
+}