leonarski_fandClaude Opus 5.5
3c4ba5f24f
The J. Synchrotron Rad. and J. Appl. Cryst. cards show the paper's first page, the Rugnux card Fig. 2a of the preprint (the open datasets by source), each a ~20-30 kB WebP credited CC BY 4.0 under it, in place of the title pages drawn in HTML/CSS. All three are CC BY 4.0 (Crossref licence records, and the pages say so); the IUCr pages were rendered from the PMC open-access PDFs. The images are added to LANDING_FILES so the documentation build copies them beside index.html. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVeDQqrMy3Kh9NQw823gEb
466 lines
14 KiB
CSS
466 lines
14 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);
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
|
|
: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);
|
|
}
|
|
|
|
* { 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); }
|
|
|
|
/* The PSI logo is black only, so the dark theme shows it inverted (as the viewer does). */
|
|
.psi-logo { display: inline-flex; }
|
|
.psi-logo img { display: block; }
|
|
:root[data-theme="dark"] .psi-logo img { filter: invert(1); }
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) .psi-logo img { filter: invert(1); }
|
|
}
|
|
.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, 1fr) minmax(0, 560px);
|
|
align-items: center;
|
|
gap: 32px;
|
|
padding-top: 56px;
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.hero__art {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
width: 100%;
|
|
max-width: 560px;
|
|
justify-self: end;
|
|
margin: 0;
|
|
}
|
|
/* A detector frame beside the placed model in its density, over the live analysis' timeline, drawn
|
|
on the page's own colours: one file per theme, shown by the same rules that pick the theme's tokens. */
|
|
.hero__art img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.hero__art .hero__art-dark { display: none; }
|
|
:root[data-theme="dark"] .hero__art .hero__art-light { display: none; }
|
|
:root[data-theme="dark"] .hero__art .hero__art-dark { display: block; }
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) .hero__art .hero__art-light { display: none; }
|
|
:root:not([data-theme="light"]) .hero__art .hero__art-dark { display: block; }
|
|
}
|
|
.hero__art figcaption {
|
|
margin-top: 10px;
|
|
font-size: 0.78em;
|
|
color: var(--fg-muted);
|
|
text-align: right;
|
|
}
|
|
|
|
.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 14px; }
|
|
.hero__ops { 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-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
margin: 0;
|
|
font-size: 0.95em;
|
|
}
|
|
.hero__run code { font-size: 1em; padding: 0.35em 0.7em; max-width: 100%; overflow-wrap: anywhere; }
|
|
|
|
/* ---- 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; }
|
|
|
|
/* ---- publications ---------------------------------------------------------------------------- */
|
|
|
|
.papers {
|
|
padding-top: 48px;
|
|
padding-bottom: 48px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.papers__head { max-width: 640px; margin-bottom: 28px; }
|
|
.papers__head h2 { font-size: 2em; font-weight: 700; margin-bottom: 10px; }
|
|
.papers__head p { margin: 0; color: var(--fg-muted); font-size: 1.05em; }
|
|
.papers__all { font-weight: 600; white-space: nowrap; }
|
|
|
|
.papers__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.paper {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
align-content: start;
|
|
gap: 20px;
|
|
padding: 22px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: var(--bg-raised);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
/* The paper's first page, or a figure of it, as published (CC BY 4.0), credited under it. */
|
|
.paper__page { margin: 0; width: 200px; }
|
|
.paper__page > a { display: block; transition: transform 0.12s; }
|
|
.paper__page > a:hover { transform: translateY(-2px); }
|
|
.paper__page img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
/* One page shape for all three; a figure of another shape sits in it on white. */
|
|
aspect-ratio: 200 / 261;
|
|
object-fit: contain;
|
|
background: #fff;
|
|
border: 1px solid var(--line);
|
|
border-radius: 3px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.paper__page figcaption { margin-top: 6px; font-size: 0.72em; color: var(--fg-muted); }
|
|
|
|
.paper__text { min-width: 0; }
|
|
.paper__kicker {
|
|
margin: 0 0 8px;
|
|
font-size: 0.74em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--primary);
|
|
}
|
|
.paper h3 { font-size: 1.2em; font-weight: 650; margin-bottom: 10px; }
|
|
.paper h3 a { color: var(--fg); }
|
|
.paper h3 a:hover { color: var(--primary); }
|
|
.paper h3 sup, .paper__cite sup { font-size: 0.7em; line-height: 0; }
|
|
.paper__authors { margin: 0 0 6px; font-size: 0.92em; }
|
|
.paper__venue { margin: 0 0 12px; font-size: 0.92em; color: var(--fg-muted); }
|
|
.paper__venue a { overflow-wrap: anywhere; }
|
|
.paper__cite {
|
|
margin: 0;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 0.85em;
|
|
color: var(--fg-muted);
|
|
}
|
|
|
|
/* ---- 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 0 12px; 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: 8px 14px; flex-wrap: wrap; 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: 360px; justify-self: center; }
|
|
.hero__art figcaption { text-align: center; }
|
|
.hero__text { grid-row: 2; }
|
|
.programs__grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.paper { gap: 18px; padding: 18px; }
|
|
.paper__page { width: 180px; }
|
|
}
|