merge: landing polish — line-icon plates on the dashboard, flat cards on the marimo home (refs #1365)

assets/css/dashboard.css

@@ -170,12 +170,39 @@ h2 {
     border-radius: 50%;
 }
 
-/* Icon — decorative, not oversized */
+/* Icon plate — one navy line glyph in a hairline square, like the
+   identification block on a technical drawing. Glyphs are the inline
+   Tabler sprite in index.html; stroke weight and size live here. */
+.sprite {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+}
+
 .tile .icon {
-    font-size: 1.5rem;
+    width: 44px;
-    margin-bottom: 0.75rem;
+    height: 44px;
-    display: block;
+    display: grid;
-    line-height: 1;
+    place-items: center;
+    border: 1px solid var(--border);
+    color: var(--primary);
+    margin-bottom: 0.9rem;
+    transition: border-color 0.15s ease;
+}
+
+.tile .icon svg {
+    width: 24px;
+    height: 24px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.tile:hover .icon {
+    border-color: var(--primary);
 }
 
 /* Tile eyebrow — mono metadata label (category, service type) */
@@ -233,7 +260,7 @@ h2 {
 .badge {
     position: absolute;
     top: -1px;
-    left: 1.25rem;
+    left: 1.5rem;   /* the tile padding: flush with the icon plate below */
     font-family: var(--font-mono);
     color: var(--primary-foreground);
     font-size: 0.6rem;

assets/css/marimo.css

@@ -638,9 +638,23 @@ select {
   max-width: 320px !important;
 }
 
-/* Search input stays mono */
+/* Search input stays mono. The blanket input padding above would also
+   erase the left inset marimo leaves for the magnifier icon, which then
+   sat on top of the placeholder text. */
 input#search {
   font-family: var(--monospace-font) !important;
+  padding-left: 28px !important;
+}
+
+/* Home page: flat cards. marimo mixes a 4px solid offset shadow (the
+   "Create a new notebook" card) with soft 2px ones (running / recent /
+   workspace lists, the search box); on this flat palette they read as
+   smudged double borders. Scoped to the home container so notebook
+   editor cells keep their own focus styling. */
+#root > .contents > .max-w-6xl.container .shadow-md-solid,
+#root > .contents > .max-w-6xl.container .shadow-sm,
+#root > .contents > .max-w-6xl.container .shadow-xs-solid {
+  box-shadow: none !important;
 }
 
 input:focus,

infra/nginx/index.html

@@ -10,6 +10,27 @@
     <link rel="stylesheet" href="/dashboard.css">
 </head>
 <body>
+    <!-- Tile glyphs: Tabler Icons 3.41.0 outline (MIT), the set the marimo
+         theme overlay already uses. Stroke and size come from dashboard.css. -->
+    <svg class="sprite" aria-hidden="true" focusable="false">
+            <symbol id="i-activity-heartbeat" viewBox="0 0 24 24"><path d="M3 12h4.5l1.5 -6l4 12l2 -9l1.5 3h4.5" /></symbol>
+            <symbol id="i-api" viewBox="0 0 24 24"><path d="M4 13h5" /><path d="M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3" /><path d="M20 8v8" /><path d="M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5" /></symbol>
+            <symbol id="i-books" viewBox="0 0 24 24"><path d="M5 5a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -14" /><path d="M9 5a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1l0 -14" /><path d="M5 8h4" /><path d="M9 16h4" /><path d="M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041" /><path d="M14 9l4 -1" /><path d="M16 16l3.923 -.98" /></symbol>
+            <symbol id="i-chart-area-line" viewBox="0 0 24 24"><path d="M4 19l4 -6l4 2l4 -5l4 4l0 5l-16 0" /><path d="M4 12l3 -4l4 2l5 -6l4 4" /></symbol>
+            <symbol id="i-file-invoice" viewBox="0 0 24 24"><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2" /><path d="M9 7l1 0" /><path d="M9 13l6 0" /><path d="M13 17l2 0" /></symbol>
+            <symbol id="i-file-text" viewBox="0 0 24 24"><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2" /><path d="M9 9l1 0" /><path d="M9 13l6 0" /><path d="M9 17l6 0" /></symbol>
+            <symbol id="i-git-branch" viewBox="0 0 24 24"><path d="M5 18a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M5 6a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M15 6a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M7 8l0 8" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><path d="M14 14l3 -3l3 3" /></symbol>
+            <symbol id="i-list-details" viewBox="0 0 24 24"><path d="M13 5h8" /><path d="M13 9h5" /><path d="M13 15h8" /><path d="M13 19h5" /><path d="M3 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" /><path d="M3 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" /></symbol>
+            <symbol id="i-messages" viewBox="0 0 24 24"><path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10" /><path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2" /></symbol>
+            <symbol id="i-north-star" viewBox="0 0 24 24"><path d="M3 12h18" /><path d="M12 21v-18" /><path d="M7.5 7.5l9 9" /><path d="M7.5 16.5l9 -9" /></symbol>
+            <symbol id="i-notebook" viewBox="0 0 24 24"><path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18" /><path d="M13 8l2 0" /><path d="M13 12l2 0" /></symbol>
+            <symbol id="i-route" viewBox="0 0 24 24"><path d="M3 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M19 7a2 2 0 1 0 0 -4a2 2 0 0 0 0 4" /><path d="M11 19h5.5a3.5 3.5 0 0 0 0 -7h-8a3.5 3.5 0 0 1 0 -7h4.5" /></symbol>
+            <symbol id="i-server-2" viewBox="0 0 24 24"><path d="M3 7a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-2" /><path d="M3 15a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -2" /><path d="M7 8l0 .01" /><path d="M7 16l0 .01" /><path d="M11 8h6" /><path d="M11 16h6" /></symbol>
+            <symbol id="i-sql" viewBox="0 0 24 24"><path d="M12 8a2 2 0 0 1 2 2v4a2 2 0 1 1 -4 0v-4a2 2 0 0 1 2 -2" /><path d="M17 8v8h4" /><path d="M13 15l1 1" /><path d="M3 15a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1h-2a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1" /></symbol>
+            <symbol id="i-timeline" viewBox="0 0 24 24"><path d="M4 16l6 -7l5 5l5 -6" /><path d="M14 14a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M9 9a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M3 16a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 8a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></symbol>
+            <symbol id="i-versions" viewBox="0 0 24 24"><path d="M10 7a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2l0 -10" /><path d="M7 7l0 10" /><path d="M4 8l0 8" /></symbol>
+    </svg>
+
     <div class="container">
 
         <div class="masthead">
@@ -34,7 +55,7 @@
             <a data-subdomain="llm" target="_blank" class="tile notebook">
                 <span class="badge gpu">GPU</span>
                 <span class="status"></span>
-                <span class="icon">&#128172;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-messages"/></svg></span>
                 <div class="tile-eyebrow">Chat</div>
                 <div class="tile-title">Comment Chat</div>
                 <p class="tile-desc">RAG chat over indexed CMS rulemaking comments, with cited sources</p>
@@ -44,7 +65,7 @@
 
             <a data-subdomain="traefik" target="_blank" class="tile proxy">
                 <span class="status"></span>
-                <span class="icon">&#128279;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-route"/></svg></span>
                 <div class="tile-eyebrow">Networking</div>
                 <div class="tile-title">Traefik</div>
                 <p class="tile-desc">Cloud-native reverse proxy and load balancer with automatic TLS</p>
@@ -54,7 +75,7 @@
 
             <a data-subdomain="s3console" target="_blank" class="tile storage">
                 <span class="status"></span>
-                <span class="icon">&#128190;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-server-2"/></svg></span>
                 <div class="tile-eyebrow">Storage</div>
                 <div class="tile-title">RustFS</div>
                 <p class="tile-desc">S3-compatible object storage for all your data needs</p>
@@ -64,7 +85,7 @@
 
             <a data-subdomain="git" target="_blank" class="tile git">
                 <span class="status"></span>
-                <span class="icon">&#128025;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-git-branch"/></svg></span>
                 <div class="tile-eyebrow">Version Control</div>
                 <div class="tile-title">Gitea</div>
                 <p class="tile-desc">Self-hosted Git service with packages and CI</p>
@@ -75,7 +96,7 @@
             <a data-subdomain="notebooks" target="_blank" class="tile notebook">
                 <span class="badge gpu">GPU</span>
                 <span class="status"></span>
-                <span class="icon">&#128209;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-notebook"/></svg></span>
                 <div class="tile-eyebrow">Analysis</div>
                 <div class="tile-title">Notebooks</div>
                 <p class="tile-desc">Marimo reactive notebooks with CUDA acceleration</p>
@@ -86,7 +107,7 @@
             <a data-subdomain="zotero" target="_blank" class="tile research">
                 <span class="badge gpu">GPU</span>
                 <span class="status"></span>
-                <span class="icon">&#128218;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-books"/></svg></span>
                 <div class="tile-eyebrow">Research</div>
                 <div class="tile-title">Zotero</div>
                 <p class="tile-desc">Research reference manager in the cloud</p>
@@ -96,7 +117,7 @@
 
             <a data-subdomain="docs" target="_blank" class="tile research">
                 <span class="status"></span>
-                <span class="icon">&#128214;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-file-text"/></svg></span>
                 <div class="tile-eyebrow">Documentation</div>
                 <div class="tile-title">Docs</div>
                 <p class="tile-desc">API reference and CMS bibliography browser</p>
@@ -107,7 +128,7 @@
             <a data-subdomain="nessie" data-path="/api/v2/config" target="_blank" class="tile catalog">
                 <span class="badge data">Data</span>
                 <span class="status"></span>
-                <span class="icon">&#127795;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-versions"/></svg></span>
                 <div class="tile-eyebrow">Catalog</div>
                 <div class="tile-title">Nessie</div>
                 <p class="tile-desc">Git-like versioned data catalog for Apache Iceberg</p>
@@ -118,7 +139,7 @@
             <a data-subdomain="trino" target="_blank" class="tile query">
                 <span class="badge data">Data</span>
                 <span class="status"></span>
-                <span class="icon">&#128269;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-sql"/></svg></span>
                 <div class="tile-eyebrow">Query</div>
                 <div class="tile-title">Trino</div>
                 <p class="tile-desc">Distributed SQL query engine for the lakehouse</p>
@@ -128,7 +149,7 @@
 
             <a data-subdomain="polaris" target="_blank" class="tile catalog">
                 <span class="status"></span>
-                <span class="icon">&#11088;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-north-star"/></svg></span>
                 <div class="tile-eyebrow">Catalog</div>
                 <div class="tile-title">Polaris</div>
                 <p class="tile-desc">Apache Iceberg catalog with governance and Unity-style access control</p>
@@ -138,7 +159,7 @@
 
             <a data-subdomain="grafana" target="_blank" class="tile observability">
                 <span class="status"></span>
-                <span class="icon">&#128202;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-chart-area-line"/></svg></span>
                 <div class="tile-eyebrow">Observability</div>
                 <div class="tile-title">Grafana</div>
                 <p class="tile-desc">Observability dashboards for metrics, logs, and traces</p>
@@ -148,7 +169,7 @@
 
             <a data-subdomain="tempo" target="_blank" class="tile metrics">
                 <span class="status"></span>
-                <span class="icon">&#128065;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-timeline"/></svg></span>
                 <div class="tile-eyebrow">Tracing</div>
                 <div class="tile-title">Tempo</div>
                 <p class="tile-desc">Distributed tracing for microservices</p>
@@ -158,7 +179,7 @@
 
             <a data-subdomain="prometheus" target="_blank" class="tile logs">
                 <span class="status"></span>
-                <span class="icon">&#128200;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-activity-heartbeat"/></svg></span>
                 <div class="tile-eyebrow">Metrics</div>
                 <div class="tile-title">Prometheus</div>
                 <p class="tile-desc">Metrics collection and alerting</p>
@@ -168,7 +189,7 @@
 
             <a data-subdomain="loki" data-path="/ready" target="_blank" class="tile database">
                 <span class="status"></span>
-                <span class="icon">&#128203;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-list-details"/></svg></span>
                 <div class="tile-eyebrow">Logs</div>
                 <div class="tile-title">Loki</div>
                 <p class="tile-desc">Log aggregation system by Grafana</p>
@@ -178,7 +199,7 @@
 
             <a data-subdomain="api" data-path="/health" target="_blank" class="tile proxy">
                 <span class="status"></span>
-                <span class="icon">&#128268;</span>
+                <span class="icon" aria-hidden="true"><svg><use href="#i-api"/></svg></span>
                 <div class="tile-eyebrow">API</div>
                 <div class="tile-title">Platform API</div>
                 <p class="tile-desc">FastAPI platform backend</p>