leonarski_f
8ff2abf3aa
docs/landing/ is a self-contained page (HTML, CSS, a little JS, no framework): a hero, a card per program, the download section with the archives of the newest release and the reader's own platform marked, the licence in one paragraph, light and dark. The jfjoch_downloads extension renders it into the HTML output root as index.html at the end of every Sphinx build, so it is served wherever the documentation is - Read the Docs, the gitea-pages branch and the broker's frontend bundle - and its download buttons are the same ones as on the Sphinx download pages, built from the configured release and repointed at the newest published one by the shared script. The Sphinx root page moves to documentation.html (root_doc), and the frontend's documentation frame opens that page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015CeEGgpKdfkCTJb3YNMJcu (cherry picked from commit 64cde61f0b941b3e8c99eaa9b74afeaa75aefc78)
370 lines
11 KiB
CSS
370 lines
11 KiB
CSS
/* The front page (docs/landing/index.html). Self-contained: system fonts, no framework, one
|
|
palette per theme. The download blocks use the same jfj-dl markup as the Sphinx download pages
|
|
(docs/_ext/jfjoch_downloads.py) and are styled here for this page. */
|
|
|
|
:root {
|
|
--bg: #fbfbfd;
|
|
--bg-raised: #ffffff;
|
|
--bg-tint: #eef0fa;
|
|
--fg: #1b1d2a;
|
|
--fg-muted: #5b6072;
|
|
--line: rgba(27, 29, 42, 0.12);
|
|
--primary: #3949ab;
|
|
--primary-strong: #2c3a8f;
|
|
--primary-soft: rgba(57, 73, 171, 0.1);
|
|
--on-primary: #ffffff;
|
|
--accent: #e9a23b;
|
|
--accent-soft: rgba(233, 162, 59, 0.16);
|
|
--shadow: 0 1px 2px rgba(27, 29, 42, 0.06), 0 8px 24px rgba(27, 29, 42, 0.06);
|
|
--ring: rgba(57, 73, 171, 0.22);
|
|
--spot: rgba(57, 73, 171, 0.55);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
--bg: #11131c;
|
|
--bg-raised: #181b27;
|
|
--bg-tint: #1d2130;
|
|
--fg: #e8e9f1;
|
|
--fg-muted: #9ea3b8;
|
|
--line: rgba(232, 233, 241, 0.12);
|
|
--primary: #8e9dff;
|
|
--primary-strong: #aab5ff;
|
|
--primary-soft: rgba(142, 157, 255, 0.14);
|
|
--on-primary: #0d1030;
|
|
--accent: #f0b65b;
|
|
--accent-soft: rgba(240, 182, 91, 0.16);
|
|
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
|
|
--ring: rgba(142, 157, 255, 0.24);
|
|
--spot: rgba(170, 181, 255, 0.7);
|
|
}
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
--bg: #11131c;
|
|
--bg-raised: #181b27;
|
|
--bg-tint: #1d2130;
|
|
--fg: #e8e9f1;
|
|
--fg-muted: #9ea3b8;
|
|
--line: rgba(232, 233, 241, 0.12);
|
|
--primary: #8e9dff;
|
|
--primary-strong: #aab5ff;
|
|
--primary-soft: rgba(142, 157, 255, 0.14);
|
|
--on-primary: #0d1030;
|
|
--accent: #f0b65b;
|
|
--accent-soft: rgba(240, 182, 91, 0.16);
|
|
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
|
|
--ring: rgba(142, 157, 255, 0.24);
|
|
--spot: rgba(170, 181, 255, 0.7);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a { color: var(--primary); text-decoration: none; }
|
|
a:hover { color: var(--primary-strong); text-decoration: underline; }
|
|
|
|
code {
|
|
font-family: "SFMono-Regular", Menlo, Consolas, "Roboto Mono", monospace;
|
|
font-size: 0.92em;
|
|
background: var(--primary-soft);
|
|
padding: 0.1em 0.35em;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
|
|
|
|
main > section, .top, .foot {
|
|
max-width: 1120px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
/* ---- header ---------------------------------------------------------------------------------- */
|
|
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
padding-top: 18px;
|
|
padding-bottom: 18px;
|
|
}
|
|
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--fg);
|
|
font-weight: 600;
|
|
font-size: 1.05em;
|
|
}
|
|
.brand:hover { text-decoration: none; }
|
|
.brand img { display: block; }
|
|
|
|
.top__nav { display: flex; gap: 22px; margin-left: auto; font-weight: 500; }
|
|
.top__nav a { color: var(--fg-muted); }
|
|
.top__nav a:hover { color: var(--primary); text-decoration: none; }
|
|
|
|
.theme-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 38px; height: 38px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 50%;
|
|
background: var(--bg-raised);
|
|
color: var(--fg-muted);
|
|
cursor: pointer;
|
|
}
|
|
.theme-toggle:hover { color: var(--primary); border-color: var(--primary); }
|
|
.theme-toggle__moon { display: none; }
|
|
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
|
|
:root[data-theme="dark"] .theme-toggle__moon { display: block; }
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) .theme-toggle__sun { display: none; }
|
|
:root:not([data-theme="light"]) .theme-toggle__moon { display: block; }
|
|
}
|
|
|
|
/* ---- hero ------------------------------------------------------------------------------------ */
|
|
|
|
.hero {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 32px;
|
|
padding-top: 56px;
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.hero__art {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
width: 100%;
|
|
max-width: 460px;
|
|
justify-self: end;
|
|
aspect-ratio: 1;
|
|
}
|
|
.hero__art .ring { fill: none; stroke: var(--ring); stroke-width: 1; }
|
|
.hero__art .ring--strong { stroke-width: 1.6; }
|
|
.hero__art .spot { fill: var(--spot); }
|
|
.hero__art .beam { stroke: var(--accent); stroke-width: 2; }
|
|
|
|
.hero__text { grid-column: 1; grid-row: 1; max-width: 600px; }
|
|
|
|
.eyebrow {
|
|
margin: 0 0 14px;
|
|
font-size: 0.78em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2.1rem, 4.6vw, 3.4rem);
|
|
font-weight: 700;
|
|
letter-spacing: -0.025em;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.lede { font-size: 1.2em; color: var(--fg-muted); margin: 0 0 26px; }
|
|
.lede strong { color: var(--fg); font-weight: 600; }
|
|
|
|
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 11px 20px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
border: 1px solid transparent;
|
|
transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
|
|
}
|
|
.btn:hover { text-decoration: none; transform: translateY(-1px); }
|
|
.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow); }
|
|
.btn--primary:hover { background: var(--primary-strong); color: var(--on-primary); }
|
|
.btn--ghost { border-color: var(--line); color: var(--fg); background: var(--bg-raised); }
|
|
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
|
|
|
|
.hero__run {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 10px 14px;
|
|
margin: 0;
|
|
color: var(--fg-muted);
|
|
font-size: 0.95em;
|
|
}
|
|
.hero__run code { font-size: 1em; padding: 0.35em 0.7em; }
|
|
|
|
/* ---- programs -------------------------------------------------------------------------------- */
|
|
|
|
.programs { padding-bottom: 56px; }
|
|
|
|
.programs__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.program {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 24px 24px 20px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: var(--bg-raised);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.program__kicker {
|
|
margin: 0 0 8px;
|
|
font-size: 0.74em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--primary);
|
|
}
|
|
.program h2 { font-size: 1.45em; font-weight: 650; margin-bottom: 12px; }
|
|
.program > p:not([class]) { margin: 0 0 14px; color: var(--fg); flex: 1 1 auto; }
|
|
.program__meta { margin: 0 0 14px; font-size: 0.82em; color: var(--fg-muted); }
|
|
.program__links {
|
|
margin: 0;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--line);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px 18px;
|
|
font-weight: 500;
|
|
}
|
|
.program__links a:first-child { font-weight: 700; }
|
|
|
|
/* ---- download -------------------------------------------------------------------------------- */
|
|
|
|
.download {
|
|
padding-top: 48px;
|
|
padding-bottom: 24px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.download__head { max-width: 640px; margin-bottom: 28px; }
|
|
.download__head h2 { font-size: 2em; font-weight: 700; margin-bottom: 10px; }
|
|
.download__head p { margin: 0; color: var(--fg-muted); font-size: 1.05em; }
|
|
.download__head [data-os-note]:not(:empty) { color: var(--fg); font-weight: 500; }
|
|
|
|
.download__program { margin-bottom: 36px; }
|
|
.download__program h3 { font-size: 1.3em; font-weight: 650; margin-bottom: 8px; }
|
|
.download__program > p { margin: 0 0 16px; max-width: 720px; color: var(--fg-muted); }
|
|
.download__program--text > p { color: var(--fg); }
|
|
|
|
.jfj-dl__release { margin: 0 0 14px; font-size: 0.95em; color: var(--fg-muted); }
|
|
.jfj-dl__release strong { color: var(--fg); }
|
|
|
|
.jfj-dl__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.jfj-dl__card {
|
|
position: relative;
|
|
padding: 18px 18px 8px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--bg-raised);
|
|
}
|
|
.jfj-dl__card.is-yours {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow);
|
|
}
|
|
.jfj-dl__card.is-yours::after {
|
|
content: "Your system";
|
|
position: absolute;
|
|
top: -11px; right: 14px;
|
|
padding: 2px 10px;
|
|
border-radius: 999px;
|
|
background: var(--accent);
|
|
color: #1b1d2a;
|
|
font-size: 0.72em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.jfj-dl__platform { font-size: 1.1em; font-weight: 650; margin-bottom: 12px; }
|
|
|
|
a.jfj-dl__btn {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--primary);
|
|
border-radius: 8px;
|
|
background: var(--primary);
|
|
color: var(--on-primary);
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
transition: background 0.12s, box-shadow 0.12s;
|
|
}
|
|
a.jfj-dl__btn:hover { text-decoration: none; background: var(--primary-strong); box-shadow: var(--shadow); color: var(--on-primary); }
|
|
a.jfj-dl__btn--secondary { background: transparent; color: var(--primary); }
|
|
a.jfj-dl__btn--secondary:hover { background: var(--primary-soft); color: var(--primary-strong); }
|
|
a.jfj-dl__btn--missing, a.jfj-dl__btn--missing:hover {
|
|
background: transparent;
|
|
border-style: dashed;
|
|
border-color: var(--line);
|
|
color: var(--fg-muted);
|
|
box-shadow: none;
|
|
cursor: default;
|
|
}
|
|
.jfj-dl__file {
|
|
display: block;
|
|
margin-top: 2px;
|
|
font-family: "SFMono-Regular", Menlo, Consolas, "Roboto Mono", monospace;
|
|
font-size: 0.74em;
|
|
font-weight: 400;
|
|
opacity: 0.85;
|
|
word-break: break-all;
|
|
}
|
|
.jfj-dl__req { margin: 6px 0 8px; font-size: 0.82em; line-height: 1.45; color: var(--fg-muted); }
|
|
.jfj-dl__note { margin: 10px 0 0; font-size: 0.82em; color: var(--fg-muted); }
|
|
.jfj-dl__note:empty { display: none; }
|
|
|
|
/* ---- licence, footer ------------------------------------------------------------------------- */
|
|
|
|
.licence {
|
|
padding-top: 40px;
|
|
padding-bottom: 48px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.licence h2 { font-size: 1.5em; font-weight: 650; margin-bottom: 12px; }
|
|
.licence p { margin: 0; max-width: 760px; color: var(--fg-muted); }
|
|
|
|
.foot {
|
|
padding-top: 24px;
|
|
padding-bottom: 40px;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 0.88em;
|
|
color: var(--fg-muted);
|
|
}
|
|
.foot p { margin: 0 0 6px; }
|
|
|
|
/* ---- small screens --------------------------------------------------------------------------- */
|
|
|
|
@media (max-width: 760px) {
|
|
body { font-size: 15px; }
|
|
.top { gap: 14px; flex-wrap: wrap; }
|
|
.top__nav { gap: 14px; margin-left: 0; order: 3; width: 100%; font-size: 0.95em; }
|
|
.theme-toggle { margin-left: auto; }
|
|
.hero { grid-template-columns: 1fr; padding-top: 28px; padding-bottom: 40px; }
|
|
.hero__art { grid-column: 1; grid-row: 1; max-width: 220px; justify-self: center; opacity: 0.9; }
|
|
.hero__text { grid-row: 2; }
|
|
.programs__grid { grid-template-columns: 1fr; }
|
|
}
|