Web dashboard v2 step 2: Tailwind design system, theme toggle, reader pages
Replaces the hand-written stylesheet with a Tailwind CSS v4 source (src/web/tailwind.css) whose minified build is committed as src/web/static/app.css and still embedded with include_str!, so the binary and the test suite never need Node. package.json pins tailwindcss and @tailwindcss/cli to 4.3.3 and adds css, css:watch and css:check. Colours are semantic CSS variables swapped per theme and exposed to Tailwind through @theme inline, so templates write bg-paper/text-ink/border-rule once and both themes work. theme.js runs synchronously in <head> to set data-theme before paint; app.js cycles the toggle system -> light -> dark and persists the choice. Newsreader is self-hosted and served from web::static_asset with the same ETag/304 logic as the other assets. Every reader template is restyled: ears row, centred masthead with its rules, tracked section labels, the drop cap on The Brief, "Why it's here" with its accent bar, the segmented rating control, prev/next cards, and the colophon as a two-column definition grid. Dashboard templates are untouched (step 3). Also fixes a .block collision with Tailwind's display utility, the SVG `hidden` property that never toggled the theme icon, and points the dev seed's profile_path at ./dev so previewing cannot rewrite data/profile.md. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NHyYupFdBiR4VfoUM7NjSM
This commit is contained in:
thalladaandClaude Fable 5.1 committed
1 parent
61ed37fc20
commit
12134f3596
27 files changed
+874
-248
No files matched your search
+2
-157
@@ -1,157 +1,2 @@
|
||||
:root { --bg:#fbfaf6; --fg:#171713; --muted:#68665f; --rule:#c9c5b9; --accent:#8b1e1e; --loved:#286a3b; --good:#34688a; --down:#943b35; color-scheme:light dark; }
|
||||
@media (prefers-color-scheme:dark) { :root { --bg:#171714; --fg:#eeeae0; --muted:#aaa69b; --rule:#4c4a44; --accent:#ef8c82; --loved:#75c58a; --good:#75aed0; --down:#e5867d; } }
|
||||
* { box-sizing:border-box; }
|
||||
body { margin:0 auto; padding:0 1rem; background:var(--bg); color:var(--fg); font:1rem/1.55 Georgia,serif; }
|
||||
a { color:var(--accent); }
|
||||
.masthead { max-width:72ch; margin:1.5rem auto .4rem; border-block:3px double var(--fg); padding:.45rem 0; text-align:center; font-size:2rem; font-weight:700; }
|
||||
.masthead a { color:inherit; text-decoration:none; }
|
||||
.primary,.admin,footer { max-width:72ch; margin:.7rem auto; text-align:center; color:var(--muted); }
|
||||
.admin { max-width:1200px; font-family:system-ui,sans-serif; }
|
||||
.flash { max-width:72rem; margin:1rem auto; padding:.75rem 1rem; border:1px solid var(--rule); }
|
||||
main { min-height:70vh; }
|
||||
.reading { max-width:72ch; margin:2rem auto; }
|
||||
.narrow { max-width:34rem; }
|
||||
.dateline,.stats,.byline,.comments,.strap,.meta,.social,.index-meta { color:var(--muted); }
|
||||
.issue section { border-top:1px solid var(--rule); margin-top:2rem; }
|
||||
.issue article { border-bottom:1px solid var(--rule); padding:.4rem 0 .8rem; }
|
||||
.issue .lead h3 { font-size:1.45rem; }
|
||||
.comments a,.downloads a { margin-right:.8rem; }
|
||||
.downloads { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0; }
|
||||
.button { border:1px solid currentColor; padding:.45rem .7rem; text-decoration:none; }
|
||||
.index-list { list-style:none; padding:0; }
|
||||
.index-entry { border-bottom:1px solid var(--rule); padding:.5rem 0 1rem; }
|
||||
.index-entry h3 { margin-bottom:.1rem; }
|
||||
.index-entry p { margin:.35rem 0; }
|
||||
.issue-chapters { border-block:1px solid var(--rule); margin:2rem 0; padding:1rem 0; text-align:center; font-size:1.15rem; }
|
||||
.colophon { max-width:none; margin:2rem 0; text-align:left; }
|
||||
.rule { border:0; border-top:1px solid var(--rule); margin:1.5rem 0; }
|
||||
.article-header h1 a { color:inherit; }
|
||||
.article-body img { display:block; max-width:100%; height:auto; margin:1rem auto; }
|
||||
.article-body pre { max-width:100%; overflow-x:auto; }
|
||||
.discussion { border-top:1px solid var(--rule); margin-top:2rem; padding-top:1rem; }
|
||||
.discussion blockquote { border-left:2px solid var(--rule); margin-left:.5rem; padding-left:1rem; }
|
||||
.discussion blockquote.reply { margin-left:1.5rem; }
|
||||
.comment-meta { color:var(--muted); font-size:.9rem; }
|
||||
.prev-next { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0; }
|
||||
.prev-next a:last-child { text-align:right; }
|
||||
form { display:grid; gap:.8rem; margin:1.5rem 0; }
|
||||
label { display:grid; gap:.25rem; }
|
||||
input,textarea,button { font:inherit; padding:.45rem; }
|
||||
.error { color:var(--down); }
|
||||
.dashboard { max-width:1200px; margin:2rem auto; font-family:system-ui,sans-serif; }
|
||||
.scroll-x { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
|
||||
table { width:100%; border-collapse:collapse; font:0.9rem/1.35 system-ui,sans-serif; }
|
||||
th,td { border-bottom:1px solid var(--rule); padding:.35rem .5rem; text-align:left; }
|
||||
thead { position:sticky; top:0; background:var(--bg); }
|
||||
.badge { border:1px solid currentColor; border-radius:999px; padding:.1rem .45rem; }
|
||||
.badge.selected,.badge.loved { color:var(--loved); } .badge.good,.badge.assessed,.badge.triaged { color:var(--good); } .badge.down,.badge.excluded { color:var(--down); }
|
||||
.badge.shortlisted,.badge.admitted,.badge.eligible,.badge.cleared { color:var(--muted); }
|
||||
.kv { display:grid; grid-template-columns:minmax(10rem,1fr) 3fr; } .kv dt { color:var(--muted); }
|
||||
.funnel > * { background:var(--good); min-width:1px; margin:.2rem 0; }
|
||||
.spark { max-width:100%; height:auto; }
|
||||
.rating { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; }
|
||||
.rating button { border:1px solid var(--rule); background:transparent; color:var(--fg); cursor:pointer; }
|
||||
.rating button.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
|
||||
.rating button.clear { border:0; color:var(--muted); padding-inline:.25rem; text-decoration:underline; }
|
||||
.rating button.clear.active { background:transparent; color:var(--fg); font-weight:700; }
|
||||
.rating-prompt { margin-right:.25rem; }
|
||||
.rating-note { flex-basis:100%; }
|
||||
@media (max-width:40rem) { .masthead { font-size:1.55rem; } .kv { display:block; } }
|
||||
/* step 4: ratings and profile pages */
|
||||
.preference-summary { font-size:1.05rem; }
|
||||
.notice { border-left:3px solid var(--accent); padding:.4rem .8rem; }
|
||||
.how ol { padding-left:1.2rem; } .how li { margin:.4rem 0; }
|
||||
.tabs { margin:1rem 0; } .tabs a { padding:.3rem .7rem; border:1px solid var(--rule); text-decoration:none; } .tabs a.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
|
||||
form.filters { display:flex; flex-wrap:wrap; align-items:end; gap:.8rem; margin:1rem 0; } form.filters label { gap:.15rem; }
|
||||
form.inline { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:.8rem 0; }
|
||||
.contributions td { vertical-align:top; } .contributions .rating { margin-top:.3rem; font-size:.85rem; } .contributions .rating-prompt { display:none; }
|
||||
tr.superseded td { color:var(--muted); }
|
||||
.pager { display:flex; gap:1rem; align-items:center; margin:1rem 0; }
|
||||
.profile-grid { display:grid; grid-template-columns:3fr 2fr; gap:1.5rem; }
|
||||
.profile-form textarea { width:100%; font:.9rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; resize:vertical; }
|
||||
pre.preview { white-space:pre-wrap; overflow-wrap:anywhere; font:.85rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; border:1px solid var(--rule); padding:.6rem; max-height:28rem; overflow:auto; margin:0; }
|
||||
.versions pre.preview { max-height:6rem; border:0; padding:0; }
|
||||
.versions form { margin:0; }
|
||||
@media (max-width:60rem) { .profile-grid { display:block; } }
|
||||
/* step 3: dashboard reads (overview, runs, articles) */
|
||||
.dashboard h1 { font-size:1.5rem; margin:.5rem 0; }
|
||||
.dashboard h1 a { color:inherit; }
|
||||
.dashboard h2 { font-size:1.1rem; margin:1.75rem 0 .5rem; }
|
||||
.dashboard h3 { font-size:1rem; margin:.5rem 0; }
|
||||
.dashboard table td { vertical-align:top; }
|
||||
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:1rem; margin:1rem 0; }
|
||||
.card { border:1px solid var(--rule); padding:.75rem 1rem; min-width:0; }
|
||||
.card h2 { margin-top:0; }
|
||||
.block { white-space:pre-wrap; overflow-wrap:anywhere; font:.85rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; margin:.5rem 0; }
|
||||
.muted { color:var(--muted); }
|
||||
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
|
||||
.filters { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:end; margin:1rem 0; }
|
||||
.filters label { font-size:.85rem; }
|
||||
.filters input,.filters select { padding:.3rem; font-size:.9rem; }
|
||||
.run-nav { display:flex; flex-wrap:wrap; gap:1.5rem; margin:.5rem 0 1rem; }
|
||||
.funnel-cell { min-width:12rem; width:40%; }
|
||||
.funnel svg { display:block; }
|
||||
.funnel-table .reasons { color:var(--muted); font-size:.8rem; }
|
||||
.badge.reason,.badge.running,.badge.requested { color:var(--muted); }
|
||||
.badge.ok { color:var(--loved); } .badge.degraded { color:var(--good); } .badge.failed,.badge.dry_run { color:var(--down); }
|
||||
.pager { display:flex; flex-wrap:wrap; gap:1rem; margin:1rem 0; align-items:center; }
|
||||
details.signals summary { cursor:pointer; }
|
||||
details.signals summary a { display:inline; }
|
||||
.signals-body { margin:.5rem 0 .5rem 1rem; font-size:.85rem; }
|
||||
.signals-body table { width:auto; }
|
||||
.signals-body tr.muted td { color:var(--muted); }
|
||||
details.explain { margin:1rem 0; }
|
||||
.diff .before { color:var(--down); } .diff .after { color:var(--loved); }
|
||||
.picks,.jobs,.warnings { list-style:none; padding:0; }
|
||||
.picks li { border-bottom:1px solid var(--rule); padding:.5rem 0; }
|
||||
.budget meter { width:60%; max-width:14rem; height:.8rem; vertical-align:middle; margin-right:.5rem; }
|
||||
.table-filter { margin:.5rem 0; padding:.3rem; width:20rem; max-width:100%; }
|
||||
/* step 5: settings */
|
||||
.settings .card { border:1px solid var(--rule); padding:.75rem 1rem; margin:1rem 0; }
|
||||
.settings .card h2 { margin:.2rem 0 .6rem; font-size:1.1rem; font-family:ui-monospace,monospace; }
|
||||
.settings-form { display:block; }
|
||||
.setting { display:grid; grid-template-columns:minmax(14rem,1fr) 2fr; gap:.5rem 1rem; padding:.5rem 0; border-top:1px solid var(--rule); }
|
||||
.setting .help,.setting .default,.settings .meta { color:var(--muted); font-size:.85rem; margin:.2rem 0; }
|
||||
.setting-input input,.setting-input select,.setting-input textarea { width:100%; max-width:36rem; }
|
||||
.setting-input textarea { min-height:5rem; font-family:ui-monospace,monospace; }
|
||||
.setting-input input:disabled,.setting-input textarea:disabled { opacity:.6; }
|
||||
.setting .lines { white-space:pre-line; }
|
||||
.settings .banner { padding:.6rem .8rem; border:1px solid var(--down); margin:1rem 0; }
|
||||
.settings .reset,.settings .danger { font:inherit; font-size:.85rem; border:0; background:transparent; color:var(--accent); text-decoration:underline; padding:0; cursor:pointer; }
|
||||
.settings .actions { position:sticky; bottom:0; background:var(--bg); padding:.7rem 0; border-top:1px solid var(--rule); }
|
||||
.settings form.inline { display:none; }
|
||||
.settings .add-provider { max-width:36rem; }
|
||||
.history pre { margin:0; white-space:pre-wrap; font-size:.8rem; }
|
||||
@media (max-width:40rem) { .setting { display:block; } }
|
||||
/* step 6: jobs and stats */
|
||||
.sparklines { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1rem 1.5rem; margin:1rem 0; }
|
||||
.spark-figure { margin:0; min-width:0; } .spark-figure figcaption { font-size:.9rem; margin-bottom:.2rem; }
|
||||
.spark { display:block; width:100%; max-width:26rem; height:auto; border-bottom:1px solid var(--rule); }
|
||||
.spark .s0 { fill:var(--good); } .spark .s1 { fill:var(--loved); } .spark .s2 { fill:var(--down); } .spark .s3 { fill:var(--accent); } .spark .s4 { fill:var(--muted); } .spark .s5 { fill:var(--fg); }
|
||||
.spark .line { stroke:var(--accent); }
|
||||
.spark-axis { display:flex; justify-content:space-between; max-width:26rem; font-size:.75rem; }
|
||||
.spark-legend { list-style:none; padding:0; margin:.3rem 0 0; display:flex; flex-wrap:wrap; gap:.2rem .8rem; font-size:.8rem; }
|
||||
.spark-legend svg { vertical-align:middle; }
|
||||
.job-cards form.inline { margin:.4rem 0 0; } .job-cards label { display:inline-grid; }
|
||||
td.message,dd.message { overflow-wrap:anywhere; max-width:32rem; }
|
||||
pre.journal { max-height:40rem; }
|
||||
/* step 7: dark-mode and narrow-screen polish */
|
||||
.primary,.admin { display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem 1rem; }
|
||||
.masthead { line-height:1.15; overflow-wrap:anywhere; }
|
||||
.scroll-x > table { min-width:max-content; }
|
||||
input,textarea,select,button { max-width:100%; border-color:var(--rule); background:var(--bg); color:var(--fg); }
|
||||
button { border-style:solid; }
|
||||
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
|
||||
code,pre,.message { overflow-wrap:anywhere; }
|
||||
.prev-next a { overflow-wrap:anywhere; }
|
||||
@media (max-width:40rem) {
|
||||
body { padding-inline:.75rem; }
|
||||
.masthead { margin-top:.75rem; padding-inline:.25rem; }
|
||||
.primary,.admin { gap:.25rem .75rem; line-height:1.35; }
|
||||
.dashboard,.reading { margin-block:1.25rem; }
|
||||
.cards { grid-template-columns:minmax(0,1fr); }
|
||||
.card { padding:.65rem .75rem; }
|
||||
.prev-next { display:flex; flex-wrap:wrap; justify-content:space-between; }
|
||||
.rating { align-items:stretch; }
|
||||
.rating-prompt,.rating-note { flex-basis:100%; }
|
||||
}
|
||||
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
||||
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-duration:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--spacing:.25rem;--container-md:28rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--tracking-normal:0em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--radius-sm:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--default-mono-font-family:ui-monospace, SFMono-Regular, Menlo, monospace}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0Line truncated
|
||||
Reference in new issue
Block a user