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-GUIDELINES.md at the repository root: 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;
|
||
}
|