From 9bf3d08f4d66d64d9760e28ef846589b95cc5ccd Mon Sep 17 00:00:00 2001 From: kert Date: Tue, 27 Oct 2026 12:17:36 -0400 Subject: [PATCH] style(landing): line-icon plates on the dashboard; flat cards on the marimo home MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Dashboard (infra/nginx/index.html, assets/css/dashboard.css) - The emoji tile icons (octopus, eye, star, tree, ...) clashed with the HTI-5 editorial system and read as toys. Each tile now shows one navy Tabler 3.41.0 outline glyph (the set the marimo overlay already uses) at a 1.5 stroke, in a 44px hairline plate — an inline sprite, so no extra requests. The sprite also carries i-file-invoice for the BCDA tile on feat/bcda-v3. - GPU / DATA badges move from 1.25rem to the 1.5rem tile padding so they sit flush with the plate and text below. marimo home (assets/css/marimo.css, loaded via custom_css) - marimo mixed a 4px solid offset shadow (Create a new notebook) with soft 2px ones (running / recent / workspace lists, search box); on the flat palette they looked like smudged double borders. Shadows are removed under the home container only, so editor cells are untouched. - The blanket `input { padding: 8px 12px !important }` erased the inset for the search box's magnifier, which sat on the placeholder; restore 28px left padding on input#search. Checked headless (chromium, playwright 1.61) at 1440px and 390px: no console errors, no horizontal scroll at phone width. --- assets/css/dashboard.css | 39 +++++++++++++++++++++++++----- assets/css/marimo.css | 16 ++++++++++++- infra/nginx/index.html | 51 ++++++++++++++++++++++++++++------------ 3 files changed, 84 insertions(+), 22 deletions(-) diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index 8bcb9d0..7b80471 100644 --- a/assets/css/dashboard.css +++ b/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; - margin-bottom: 0.75rem; - display: block; - line-height: 1; + width: 44px; + height: 44px; + display: grid; + 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; diff --git a/assets/css/marimo.css b/assets/css/marimo.css index dd17b77..a6e9278 100644 --- a/assets/css/marimo.css +++ b/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, diff --git a/infra/nginx/index.html b/infra/nginx/index.html index 82c2117..f25a755 100644 --- a/infra/nginx/index.html +++ b/infra/nginx/index.html @@ -10,6 +10,27 @@ + + +
@@ -34,7 +55,7 @@ GPU - 💬 +
Chat
Comment Chat

RAG chat over indexed CMS rulemaking comments, with cited sources

@@ -44,7 +65,7 @@ - 🔗 +
Networking
Traefik

Cloud-native reverse proxy and load balancer with automatic TLS

@@ -54,7 +75,7 @@ - 💾 +
Storage
RustFS

S3-compatible object storage for all your data needs

@@ -64,7 +85,7 @@ - 🐙 +
Version Control
Gitea

Self-hosted Git service with packages and CI

@@ -75,7 +96,7 @@ GPU - 📑 +
Analysis
Notebooks

Marimo reactive notebooks with CUDA acceleration

@@ -86,7 +107,7 @@ GPU - 📚 +
Research
Zotero

Research reference manager in the cloud

@@ -96,7 +117,7 @@ - 📖 +
Documentation
Docs

API reference and CMS bibliography browser

@@ -107,7 +128,7 @@ Data - 🌳 +
Catalog
Nessie

Git-like versioned data catalog for Apache Iceberg

@@ -118,7 +139,7 @@ Data - 🔍 +
Query
Trino

Distributed SQL query engine for the lakehouse

@@ -128,7 +149,7 @@ - ⭐ +
Catalog
Polaris

Apache Iceberg catalog with governance and Unity-style access control

@@ -138,7 +159,7 @@ - 📊 +
Observability
Grafana

Observability dashboards for metrics, logs, and traces

@@ -148,7 +169,7 @@ - 👁 +
Tracing
Tempo

Distributed tracing for microservices

@@ -158,7 +179,7 @@ - 📈 +
Metrics
Prometheus

Metrics collection and alerting

@@ -168,7 +189,7 @@ - 📋 +
Logs
Loki

Log aggregation system by Grafana

@@ -178,7 +199,7 @@ - 🔌 +
API
Platform API

FastAPI platform backend