stroblmeandClaude Opus 5
d12c81c8a0
A zensical site under docs/, served by a new `docs` compose service behind Traefik, built with --strict in CI. Same pattern the sibling n3xd workspace uses. Getting started splits the way the landing page does — one path is `pip install fluksio` and a training script, the other is a Docker stack and an afternoon in the browser — because the two audiences will not spend the same amount of time. Everything after that is shared: the concepts, the web interface (app and portal), the CLI and the API, and a reference for node types, payload types and configuration. The three flow guides move here from the docs submodule rather than being copied, so there is one version of them. Styling mirrors DESIGN-GUIDELINES.md: the app's token palette remapped onto Material's variables in both schemes, Inter, the 16px panel radius, and the one terracotta accent spent on the facility lane of the audience split. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01M7Xv3cJEW5c8AXxn2hoojV
178 lines
6.3 KiB
CSS
178 lines
6.3 KiB
CSS
/* Fluksio brand theming for the documentation site.
|
||
*
|
||
* Follows the zensical custom color scheme approach
|
||
* (https://zensical.org/docs/setup/colors/#custom-color-schemes): override the
|
||
* Material `--md-*` CSS variables per [data-md-color-scheme]. Colors mirror the
|
||
* design tokens in ../DESIGN.md → ../../DESIGN-GUIDELINES.md: neutral white /
|
||
* near-black surfaces carrying one slate-blue accent, with terracotta reserved
|
||
* for the single secondary affordance per view. The built-in `default` (light)
|
||
* and `slate` (dark) schemes stay as the base so all of Material's derived
|
||
* styling keeps working; only the brand-relevant variables are remapped.
|
||
*
|
||
* NOTE: the modern theme paints a frosted, translucent header via
|
||
* `.md-header { backdrop-filter: blur(...); background: var(--md-default-bg-color--light) }`,
|
||
* which is the same `bg-card/80 backdrop-blur` shell both frontends float their
|
||
* chrome on. `--md-default-bg-color--light` therefore has to stay a
|
||
* *translucent* alpha of the background — an opaque value stops the header
|
||
* being see-through.
|
||
*/
|
||
|
||
/* Slate-blue brand primary, shared by both schemes.
|
||
*
|
||
* `#59849b` is the identity blue in the wordmark, and deliberately not used
|
||
* here: it measures 4.04:1 against white, below WCAG AA for normal text. The
|
||
* values below are the same ones the apps ship as `--primary`. */
|
||
[data-md-color-scheme="default"],
|
||
[data-md-color-scheme="slate"] {
|
||
--md-primary-fg-color: #4a7189;
|
||
--md-primary-fg-color--light: #7ba3b8;
|
||
--md-primary-fg-color--dark: #395767;
|
||
--md-primary-bg-color: #ffffff;
|
||
--md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
|
||
|
||
/* The one secondary accent. Used for the facility lane on Getting started
|
||
* and nowhere else, mirroring "one --brand-secondary affordance per view". */
|
||
--fluksio-brand-secondary: #de8f6e;
|
||
|
||
/* Footer stays dark in both schemes (Material convention), neutral tokens. */
|
||
--md-footer-bg-color: #1a1a1a;
|
||
--md-footer-bg-color--dark: #0a0a0a;
|
||
}
|
||
|
||
/* Light: white page, near-black text (--foreground is #333232, not pure black). */
|
||
[data-md-color-scheme="default"] {
|
||
--md-default-bg-color: #ffffff;
|
||
--md-default-bg-color--light: rgba(255, 255, 255, 0.7);
|
||
--md-default-bg-color--lighter: rgba(255, 255, 255, 0.3);
|
||
--md-default-bg-color--lightest: rgba(255, 255, 255, 0.12);
|
||
|
||
--md-default-fg-color: #333232;
|
||
--md-default-fg-color--light: #6b6b6b;
|
||
--md-default-fg-color--lighter: #9e9e9e;
|
||
--md-default-fg-color--lightest: #e4e4e4;
|
||
|
||
--md-accent-fg-color: #395767;
|
||
--md-typeset-a-color: #4a7189;
|
||
|
||
--md-code-bg-color: #f2f2f2;
|
||
--md-code-fg-color: #333232;
|
||
}
|
||
|
||
/* Dark: near-black page, off-white text. Surfaces lift to #1a1a1a (--card) so
|
||
* code and quoted blocks read against the #0a0a0a backdrop. */
|
||
[data-md-color-scheme="slate"] {
|
||
--md-default-bg-color: #0a0a0a;
|
||
--md-default-bg-color--light: rgba(10, 10, 10, 0.7);
|
||
--md-default-bg-color--lighter: rgba(10, 10, 10, 0.3);
|
||
--md-default-bg-color--lightest: rgba(10, 10, 10, 0.12);
|
||
|
||
--md-default-fg-color: #f5f5f5;
|
||
--md-default-fg-color--light: #a3a3a3;
|
||
--md-default-fg-color--lighter: #6b6b6b;
|
||
--md-default-fg-color--lightest: #2a2a2a;
|
||
|
||
--md-accent-fg-color: #7ba3b8;
|
||
--md-typeset-a-color: #7ba3b8;
|
||
|
||
--md-code-bg-color: #1a1a1a;
|
||
--md-code-fg-color: #f5f5f5;
|
||
|
||
--fluksio-brand-secondary: #e5a184;
|
||
}
|
||
|
||
/* The theme highlights the active sidebar entry with a
|
||
* `--md-accent-fg-color--transparent` fill, which is still the built-in indigo
|
||
* because only the opaque accent is remapped above. Drop the fill in both
|
||
* schemes; the brand accent colour and the heavier weight the theme also
|
||
* applies keep the selection visible. */
|
||
.md-nav--primary .md-nav__item .md-nav__link--active {
|
||
background: none;
|
||
}
|
||
|
||
/* Radius follows the app's map: 16px for panels and cards, 12px for the
|
||
* smaller inline surfaces. */
|
||
.md-typeset .admonition,
|
||
.md-typeset details,
|
||
.md-typeset pre > code,
|
||
.md-typeset .tabbed-content pre > code {
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.md-typeset code {
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* Tables are the one place these docs go wide. Nothing may scroll the page
|
||
* sideways, so the box scrolls instead — DESIGN-GUIDELINES.md → Responsive. */
|
||
.md-typeset .md-typeset__table {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
/* ── Audience cards ────────────────────────────────────────────────
|
||
*
|
||
* Used on Getting started, where the split mirrors the landing page's audience
|
||
* switch: data science takes --primary, facility automation takes the one
|
||
* terracotta accent. Built out of Markdown lists via attr_list + md_in_html,
|
||
* so there is no HTML soup in the page source.
|
||
*/
|
||
.fluksio-lanes {
|
||
display: grid;
|
||
gap: 1rem;
|
||
margin: 1.5rem 0;
|
||
}
|
||
|
||
@media screen and (min-width: 768px) {
|
||
.fluksio-lanes {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
|
||
.fluksio-lane {
|
||
border: 1px solid var(--md-default-fg-color--lightest);
|
||
border-radius: 16px;
|
||
padding: 1.25rem 1.5rem;
|
||
/* min-width:0 keeps a long line from stretching the grid track and, with it,
|
||
* the page. */
|
||
min-width: 0;
|
||
}
|
||
|
||
.fluksio-lane > :first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.fluksio-lane > :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.fluksio-lane--science {
|
||
border-color: var(--md-primary-fg-color);
|
||
}
|
||
|
||
.fluksio-lane--science h3 {
|
||
color: var(--md-primary-fg-color);
|
||
}
|
||
|
||
.fluksio-lane--facility {
|
||
border-color: var(--fluksio-brand-secondary);
|
||
}
|
||
|
||
.fluksio-lane--facility h3 {
|
||
color: var(--fluksio-brand-secondary);
|
||
}
|
||
|
||
/* ── Brand mark ────────────────────────────────────────────────────
|
||
*
|
||
* The mark's disc is painted `--foreground`, so the light file is a dark disc
|
||
* and disappears on the dark header. The theme renders the logo as an <img>,
|
||
* whose src CSS cannot swap — so the image is hidden under `slate` and the
|
||
* anchor paints the dark mark instead. Both files are the same 24×24 viewBox,
|
||
* so the two look identical apart from that inversion.
|
||
*/
|
||
[data-md-color-scheme="slate"] .md-logo img {
|
||
visibility: hidden;
|
||
}
|
||
|
||
[data-md-color-scheme="slate"] .md-logo {
|
||
background: url("../assets/favicon-dark.svg") center / 1.2rem 1.2rem no-repeat;
|
||
}
|