diff --git a/README.md b/README.md index 081edfa..d5087cb 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ The site is self-contained: layouts, styles and data live in this repository (th | `i18n/` | Small UI strings (menu label, 404 text, ...) | | `layouts/` | Templates | | `assets/` | CSS and JS, minified and fingerprinted by Hugo at build time | +| `assets/kit/`, `static/kit/` | The shared InterImm kit (styles, fonts, header and footer) that other InterImm sites link from interimm.org/kit/. See [kit/README.md](kit/README.md) | | `static/` | Files served as-is (images, video, favicons) | ## Deploy diff --git a/assets/css/main.css b/assets/css/main.css index bfb0e9b..4db0dc3 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,345 +1,170 @@ -/* InterImm site styles. - Hand-written, no framework. Colours are tokens on :root and switch with the - visitor's system light/dark preference. The home hero is always "space". */ - -/* ---------- tokens ---------- */ -:root { - color-scheme: light dark; - - --bg: #f5f7fb; - --bg-alt: #e9eef7; - --surface: #ffffff; - --text: #121a2b; - --muted: #526078; - --border: #d3dbea; - --link: #1f4fd8; - --focus: #1f4fd8; - --accent: #f5b301; - --accent-hover: #ffc72e; - --accent-text: #1a1300; - --shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 10px 28px rgb(16 24 40 / 0.07); - - --space-bg: #070b18; - --space-text: #eef2ff; - --space-muted: #b6c2e4; - - --radius: 1rem; - --wrap: 72rem; - --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", - "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Noto Color Emoji"; -} - -@media (prefers-color-scheme: dark) { - :root { - --bg: #0b1020; - --bg-alt: #0f1730; - --surface: #141c33; - --text: #e8edf8; - --muted: #a3afc8; - --border: #26304d; - --link: #8fb4ff; - --focus: #8fb4ff; - --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 28px rgb(0 0 0 / 0.35); - } - .brand-mark { filter: invert(1); } -} - -/* ---------- base ---------- */ -*, *::before, *::after { box-sizing: border-box; } - -html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } - -body { - margin: 0; - min-height: 100vh; - min-height: 100dvh; - display: flex; - flex-direction: column; - font-family: var(--font); - font-size: 1.0625rem; - line-height: 1.7; - color: var(--text); - background: var(--bg); -} -main { flex: 1; } - -h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6em; text-wrap: balance; } -p { margin: 0 0 1em; text-wrap: pretty; } -img, video, svg { max-width: 100%; height: auto; } -a { color: var(--link); text-underline-offset: 0.2em; } -a:hover { text-decoration-thickness: 2px; } -ul, ol { margin: 0 0 1em; } - -:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 0.25rem; } - -.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; } - -.sr-only { - position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; - overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; -} - -.skip-link { - position: absolute; left: 1rem; top: -4rem; z-index: 100; - padding: 0.6rem 1rem; border-radius: 0.6rem; - background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none; -} -.skip-link:focus { top: 1rem; } - -.text-center { text-align: center; } - -/* ---------- header ---------- */ -.site-header { - position: sticky; top: 0; z-index: 50; - background: color-mix(in srgb, var(--bg) 86%, transparent); - -webkit-backdrop-filter: saturate(1.4) blur(12px); - backdrop-filter: saturate(1.4) blur(12px); - border-bottom: 1px solid var(--border); -} -.header-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; min-height: 3.75rem; padding-block: 0.5rem; } - -.brand { - display: inline-flex; align-items: center; gap: 0.6rem; - font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; -} -.brand-mark { border-radius: 0.4rem; } - -.site-nav { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; } -.nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; } - -.nav-link, .dropdown > summary { - display: inline-flex; align-items: center; gap: 0.4rem; - padding: 0.45rem 0.75rem; border-radius: 0.6rem; - color: var(--text); font-weight: 500; text-decoration: none; cursor: pointer; -} -.nav-link:hover, .dropdown > summary:hover, .dropdown[open] > summary { background: var(--bg-alt); } -.nav-link[aria-current="page"], .dropdown[data-current] > summary { color: var(--link); font-weight: 600; } -.lang-link { border: 1px solid var(--border); } - -.dropdown { position: relative; } -.dropdown > summary { list-style: none; } -.dropdown > summary::-webkit-details-marker { display: none; } -.dropdown > summary::after { - content: ""; width: 0.4em; height: 0.4em; margin-top: -0.2em; - border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); -} -.dropdown-menu { - position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 60; - min-width: min(19rem, 90vw); margin: 0; padding: 0.4rem; list-style: none; - background: var(--surface); border: 1px solid var(--border); border-radius: 0.8rem; box-shadow: var(--shadow); -} -.dropdown-menu a { - display: block; padding: 0.5rem 0.75rem; border-radius: 0.5rem; - color: var(--text); text-decoration: none; -} -.dropdown-menu a:hover { background: var(--bg-alt); } -.dropdown-menu a[aria-current="page"] { color: var(--link); font-weight: 600; } - -.nav-toggle { - display: none; margin-left: auto; padding: 0.4rem; border: 1px solid var(--border); border-radius: 0.6rem; - background: transparent; color: var(--text); cursor: pointer; -} - -@media (max-width: 56rem) { - .js .nav-toggle { display: inline-flex; } - .js .site-nav { display: none; flex-basis: 100%; padding-bottom: 0.75rem; } - .js .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; } - .nav-list { flex-direction: column; align-items: stretch; } - .nav-tools { flex-direction: row; flex-wrap: wrap; padding-top: 0.5rem; border-top: 1px solid var(--border); } - .dropdown-menu { position: static; min-width: 0; margin: 0.2rem 0 0.4rem 0.75rem; box-shadow: none; } -} - -/* ---------- buttons, chips, pills ---------- */ -.btn { - display: inline-flex; align-items: center; justify-content: center; gap: 0.5ch; - padding: 0.55rem 1.15rem; border: 1px solid var(--border); border-radius: 999px; - background: var(--surface); color: var(--text); font: inherit; font-weight: 600; line-height: 1.4; - text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.15s; -} -.btn:hover { border-color: var(--link); text-decoration: none; } -.btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-text); } -.btn-primary:hover { background: var(--accent-hover); border-color: transparent; transform: translateY(-1px); } -.btn-lg { padding: 0.85rem 1.75rem; font-size: 1.15rem; } - -.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; } -.chips li { - padding: 0.15rem 0.85rem; border: 1px solid currentColor; border-radius: 999px; - font-size: 0.9rem; line-height: 1.6; opacity: 0.85; -} -.chips-small li { padding: 0.05rem 0.65rem; font-size: 0.8rem; color: var(--muted); border-color: var(--border); opacity: 1; } - -.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; list-style: none; margin: 0; padding: 0; } -.pills a { - display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--border); border-radius: 999px; - background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 0.15s, transform 0.15s; -} -.pills a:hover { border-color: var(--link); color: var(--link); transform: translateY(-1px); } +/* interimm.org page styles. The shared tokens, header, footer, buttons, cards + and page headers live in the kit (assets/kit/interimm.css); this file only + holds layouts used by the main site's own pages. */ /* ---------- home hero ---------- */ -.hero { - position: relative; overflow: hidden; color: var(--space-text); - background: - radial-gradient(48rem 26rem at 88% -8%, rgb(255 122 69 / 0.28), transparent 62%), - radial-gradient(40rem 30rem at -5% 105%, rgb(99 102 241 / 0.32), transparent 62%), - var(--space-bg); -} -/* a cheap, static starfield: a few tiny radial gradients tiled */ -.hero::before { - content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.7; - background-image: - radial-gradient(1.2px 1.2px at 12% 22%, #fff, transparent), - radial-gradient(1px 1px at 31% 71%, #fff, transparent), - radial-gradient(1.4px 1.4px at 52% 14%, #fff, transparent), - radial-gradient(1px 1px at 68% 58%, #fff, transparent), - radial-gradient(1.2px 1.2px at 83% 33%, #fff, transparent), - radial-gradient(1px 1px at 93% 82%, #fff, transparent), - radial-gradient(1px 1px at 22% 92%, #fff, transparent); - background-size: 360px 300px; -} +.hero { padding-bottom: clamp(2rem, 5vw, 3.5rem); } .hero-inner { - position: relative; display: grid; align-items: center; gap: 2rem 3rem; - grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); - padding-block: clamp(3rem, 8vw, 6rem); -} -.hero h1 { font-size: clamp(2.4rem, 1.2rem + 5vw, 4.25rem); letter-spacing: -0.01em; margin-bottom: 0.3em; } -.hero .lede { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); color: var(--space-muted); margin-bottom: 1.25rem; } -.hero .chips { margin-bottom: 1.75rem; } -.hero-art { justify-self: center; width: min(100%, 28rem); filter: drop-shadow(0 20px 40px rgb(0 0 0 / 0.45)); } - -@media (max-width: 52rem) { - .hero-inner { grid-template-columns: 1fr; text-align: center; } - .hero .chips { justify-content: center; } - .hero-art { grid-row: 1; width: min(70%, 18rem); } -} - -/* "latest" banner under the hero */ -.latest { background: var(--bg-alt); border-bottom: 1px solid var(--border); font-size: 0.95rem; } -.latest .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.4rem 0.9rem; padding-block: 0.75rem; } + display: grid; align-items: center; gap: 2.5rem 3rem; + grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); + min-height: min(44rem, calc(100svh - 9rem)); + padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem); +} +.hero h1 { + font-size: clamp(3rem, 1rem + 7.5vw, 6.75rem); font-weight: 700; + letter-spacing: -0.045em; line-height: 0.95; margin-bottom: 0.35em; + background: linear-gradient(180deg, #fff 30%, #ffc2a8 120%); + -webkit-background-clip: text; background-clip: text; color: transparent; +} +.hero h1:lang(zh) { letter-spacing: 0; line-height: 1.1; } +.hero .lede { max-width: 34rem; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); color: var(--muted); margin-bottom: 1.5rem; } +.hero .chips { margin-bottom: 2rem; } +.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; } + +.hero-visual { position: relative; display: grid; justify-items: center; gap: 1.5rem; } +.planet-wrap { position: relative; width: min(100%, 24rem); aspect-ratio: 1; display: grid; place-items: center; } +.planet { + width: 62%; aspect-ratio: 1; border-radius: 50%; + background: + radial-gradient(circle at 64% 68%, rgb(80 20 6 / 0.3), transparent 9%), + radial-gradient(circle at 30% 60%, rgb(90 25 8 / 0.25), transparent 13%), + radial-gradient(ellipse 24% 8% at 40% 18%, rgb(255 236 225 / 0.35), transparent 70%), + radial-gradient(ellipse 40% 12% at 50% 44%, rgb(120 35 12 / 0.5), transparent 70%), + radial-gradient(ellipse 30% 9% at 58% 30%, rgb(255 210 180 / 0.25), transparent 70%), + radial-gradient(circle at 34% 30%, #ffc09a 0%, #f2703f 28%, #b63c1b 58%, #4a1307 88%); + box-shadow: + inset -2.2rem -1.4rem 3.5rem rgb(0 0 0 / 0.65), + inset 0.4rem 0.3rem 1rem rgb(255 220 200 / 0.25), + 0 0 6rem rgb(255 107 61 / 0.3); +} +.orbit { position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 50%; animation: spin 40s linear infinite; } +.orbit-2 { inset: 9%; border-style: dashed; border-color: rgb(255 255 255 / 0.08); animation-duration: 26s; animation-direction: reverse; } +.moon { position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #e9e4dc; box-shadow: 0 0 12px rgb(255 255 255 / 0.6); } +.moon-2 { left: auto; right: -3px; width: 6px; height: 6px; margin-top: -3px; background: #c9b8a6; } +@keyframes spin { to { transform: rotate(360deg); } } + +.readout { + display: grid; grid-template-columns: repeat(3, auto); gap: 0 1.5rem; margin: 0; + padding: 0.9rem 1.25rem; border: 1px solid var(--border); border-radius: 0.9rem; + background: rgb(10 14 23 / 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); +} +.readout dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } +.readout dd { margin: 0; font-family: var(--font-mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--text); } +.readout div:first-child dd { color: #ffb08f; } + +.latest { + display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; + padding: 0.85rem 1.1rem; border: 1px solid var(--border); border-radius: 0.9rem; + background: var(--surface); color: var(--text); text-decoration: none; font-size: 0.95rem; + transition: border-color 0.15s, background 0.15s; +} +.latest:hover { border-color: var(--border-strong); background: var(--surface-2); } +.latest time { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; } +.latest-title { flex: 1; min-width: 12rem; font-weight: 500; } +.latest-arrow { color: var(--accent); transition: transform 0.15s; } +.latest:hover .latest-arrow { transform: translateX(4px); } .badge { - padding: 0.05rem 0.7rem; border-radius: 999px; - background: var(--accent); color: var(--accent-text); font-size: 0.8rem; font-weight: 700; + padding: 0.1rem 0.6rem; border-radius: 999px; + background: var(--accent); color: var(--accent-text); + font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; +} + +@media (max-width: 54rem) { + .hero-inner { grid-template-columns: 1fr; min-height: 0; } + .hero-visual { grid-row: 1; } + .planet-wrap { width: min(70%, 15rem); } +} +@media (max-width: 30rem) { + .readout { grid-template-columns: 1fr 1fr; gap: 0.6rem 1.25rem; } + .readout div:last-child { grid-column: span 2; } +} + +/* home: featured archive tiles, two of them wide */ +@media (min-width: 64rem) { + .bento-featured:has(> :nth-child(6):last-child) { grid-template-columns: repeat(4, 1fr); } + .bento-featured:has(> :nth-child(6):last-child) > :is(:first-child, :last-child) { grid-column: span 2; } +} + +/* what we do: three numbered columns */ +.pillars { display: grid; gap: 2rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } +.pillar { display: flex; flex-direction: column; padding-top: 1.5rem; border-top: 1px solid var(--border-strong); } +.pillar-num { margin: 0 0 1.5rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); } +.pillar-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 0.6rem; } +.pillar p { color: var(--muted); } +.pillar p:first-letter { text-transform: uppercase; } +.pillar-action { margin: auto 0 0; padding-top: 0.5rem; } + +/* research topics: numbered link rows */ +.topic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); column-gap: 3rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); } +.topic-list a { + display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0.25rem; + border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; transition: color 0.15s, padding 0.2s; +} +.topic-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); } +.topic-name { flex: 1; font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; } +.topic-arrow { color: var(--muted); transition: transform 0.2s, color 0.15s; } +.topic-list a:hover { color: var(--link); padding-left: 0.75rem; } +.topic-list a:hover .topic-arrow { color: var(--accent); transform: translate(2px, -2px); } + +/* support band */ +.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); border-top: 1px solid var(--border); } +.support-item { padding: 1.5rem 1.5rem 0.5rem 0; } +.support-item + .support-item { padding-left: 1.5rem; border-left: 1px solid var(--border); } +.support-item h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } +.support-item p { color: var(--muted); font-size: 0.97rem; } +@media (max-width: 58rem) { + .support-item, .support-item + .support-item { padding: 1.25rem 0 0.25rem; border-left: 0; border-bottom: 1px solid var(--border); } } -.latest time { color: var(--muted); font-variant-numeric: tabular-nums; } - -/* ---------- sections and cards ---------- */ -.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); } -.section-alt { background: var(--bg-alt); } -.section-title { text-align: center; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); margin-bottom: 1.5rem; } - -.card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } -.card-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); } - -.card { - position: relative; display: flex; flex-direction: column; - padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); - border-radius: var(--radius); box-shadow: var(--shadow); -} -.card > :last-child { margin-bottom: 0; } -.card-title { font-size: 1.25rem; margin-bottom: 0.5rem; } -.card-plain { box-shadow: none; } -.card-action { margin-top: auto; padding-top: 0.75rem; } -.card-icon { margin: 0 0 0.5rem; font-size: 2.25rem; line-height: 1; } -.card-cta { margin: auto 0 0; padding-top: 0.75rem; color: var(--link); font-weight: 600; } -.card-cta span { display: inline-block; transition: transform 0.15s; } -.card-wide { max-width: 52rem; margin-inline: auto; width: 100%; } - -/* whole card is clickable through its title link */ -.card-link-wrap { transition: transform 0.15s, border-color 0.15s; } -.card-link-wrap:hover { transform: translateY(-2px); border-color: var(--link); } -.card-link-wrap:hover .card-cta span { transform: translateX(3px); } -.card-link { color: var(--text); text-decoration: none; } -.card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } -.card-link:focus-visible { outline: none; } -.card-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; } - -.card-media { padding: 0; overflow: hidden; } -.card-media .card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-alt); } -.card-media .card-body { padding: 1.25rem 1.5rem 1.5rem; } - -.stack { display: grid; gap: 1.5rem; } -.figure { margin: 1rem 0 0; padding: 1rem; background: #fff; border-radius: 0.75rem; text-align: center; } -.figure img { max-height: 32rem; width: auto; margin-inline: auto; } - -/* ---------- inner pages ---------- */ -.page-hero { - padding-block: clamp(2.5rem, 7vw, 4.5rem); text-align: center; - background: linear-gradient(180deg, var(--bg-alt), var(--bg)); - border-bottom: 1px solid var(--border); -} -.page-hero h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); margin-bottom: 0.3em; } -.page-hero .lede { max-width: 42rem; margin: 0 auto 1rem; color: var(--muted); font-size: 1.15rem; } -.page-hero .chips { justify-content: center; margin: 0.75rem 0 0; color: var(--muted); } - -.prose { max-width: 46rem; } -.prose > * { margin-inline: 0; } -.prose h2 { margin-top: 2em; font-size: 1.6rem; } -.prose h3 { margin-top: 1.6em; font-size: 1.25rem; } -.prose img, .prose video { border-radius: 0.75rem; } -.prose-wide { max-width: 64rem; } -.prose-wide > p, .prose-wide > h2, .prose-wide > h3, .prose-wide > ul, .prose-wide > ol { max-width: 46rem; margin-inline: auto; } -.wrap.prose { margin-inline: auto; } -:lang(zh) { line-height: 1.85; } -:lang(zh) .card p, :lang(zh) .timeline p { line-height: 1.75; } /* about page: media + text side by side */ .split { display: grid; gap: 2rem 3rem; align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-top: 2rem; } .split-media { margin: 0; } -.split-media video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); box-shadow: var(--shadow); } -.lede-strong { padding-left: 1rem; border-left: 4px solid var(--accent); font-size: 1.2rem; font-weight: 700; } +.split-media video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } +.lede-strong { padding-left: 1rem; border-left: 3px solid var(--accent); font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.4; } .embed { aspect-ratio: 16 / 9; min-height: 18rem; } -.embed iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); background: var(--bg-alt); } +.embed iframe { width: 100%; height: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); } /* ---------- activity timeline ---------- */ -.timeline { position: relative; max-width: 46rem; margin: 0 auto; padding: 0 0 0 3.25rem; list-style: none; } -.timeline::before { content: ""; position: absolute; left: 1.2rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--border); } -.timeline-item { position: relative; padding-bottom: 2.25rem; } +.timeline { position: relative; max-width: 50rem; margin: 0 auto; padding: 0 0 0 3.5rem; list-style: none; } +.timeline::before { content: ""; position: absolute; left: 1.3rem; top: 0.5rem; bottom: 0.5rem; width: 1px; background: linear-gradient(var(--accent), var(--border) 30%); } +.timeline-item { position: relative; padding-bottom: 2.5rem; } .timeline-item:last-child { padding-bottom: 0; } -.timeline-icon { - position: absolute; left: -3.25rem; top: 0; width: 2.5rem; height: 2.5rem; - display: grid; place-items: center; font-size: 1.25rem; - background: var(--surface); border: 2px solid var(--border); border-radius: 50%; +.timeline-year { + margin: 0 0 1rem; font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; + line-height: 1; color: color-mix(in srgb, var(--muted) 55%, transparent); } -.timeline-date { margin: 0; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; } -.timeline-title { margin: 0.1rem 0 0.35rem; font-size: 1.2rem; } -.timeline-title a { color: var(--text); text-decoration-color: var(--border); } -.timeline-title a:hover { color: var(--link); } -.timeline-item p:last-child { margin-bottom: 0; } +.timeline-item:not(:first-child) .timeline-year { padding-top: 1rem; } +.timeline-icon { + position: absolute; left: -3.5rem; width: 2.6rem; height: 2.6rem; + display: grid; place-items: center; color: var(--accent); + background: var(--bg); border: 1px solid var(--border-strong); border-radius: 50%; +} +.timeline-icon .icon { width: 1.2rem; height: 1.2rem; } +.timeline-body { padding: 1.1rem 1.35rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } +.timeline-date { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; } +.timeline-title { margin: 0.2rem 0 0.35rem; font-size: 1.2rem; } +.timeline-title a { color: var(--text); text-decoration-color: var(--border-strong); } +.timeline-title a:hover { color: var(--link); text-decoration-color: currentColor; } +.timeline-body p:last-child { margin-bottom: 0; color: var(--muted); } /* ---------- image map (city plans) ---------- */ .imagemap { margin: 0 0 2rem; } -.imagemap-canvas { height: min(70vh, 34rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--space-bg); } +.imagemap-canvas { height: min(70vh, 34rem); border: 1px solid var(--border); border-radius: var(--radius); background: #05070d; } .imagemap figcaption { margin-top: 0.5rem; color: var(--muted); font-size: 0.9rem; text-align: center; } .map-pin { background: none; border: 0; } .map-pin svg { filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.5)); } .leaflet-popup-content { font-family: var(--font); line-height: 1.5; } -.leaflet-popup-content h3 { margin: 0 0 0.35rem; font-size: 1rem; color: #121a2b; } +.leaflet-popup-content h3 { margin: 0 0 0.35rem; font-size: 1rem; color: #15171d; } .leaflet-popup-content p { margin: 0 0 0.5rem; color: #2b364d; } -.leaflet-popup-content a { color: #1f4fd8; word-break: break-all; } - -/* ---------- footer ---------- */ -.site-footer { margin-top: 2rem; padding-block: 2.5rem 1.5rem; background: var(--bg-alt); border-top: 1px solid var(--border); color: var(--muted); font-size: 0.95rem; } -.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } -.footer-col h2 { margin-bottom: 0.6rem; font-size: 1rem; color: var(--text); } -.footer-col ul { margin: 0; padding: 0; list-style: none; } -.footer-col li { margin-bottom: 0.3rem; } -.footer-col a { color: var(--muted); } -.footer-col a:hover { color: var(--link); } -.footer-legal { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.85rem; } +.leaflet-popup-content a { color: #b93d12; word-break: break-all; } /* ---------- 404 ---------- */ -.not-found { min-height: 55vh; display: grid; place-items: center; background: none; border: 0; } -.not-found .code { margin: 0; font-size: clamp(4.5rem, 18vw, 10rem); font-weight: 800; line-height: 1; color: var(--accent); } - -/* ---------- motion and print ---------- */ -@media (prefers-reduced-motion: reduce) { - html { scroll-behavior: auto; } - *, *::before, *::after { transition: none !important; animation: none !important; } -} +.not-found { min-height: 60vh; display: grid; place-items: center; text-align: center; border: 0; } +.not-found .lede { margin-inline: auto; } +.not-found .code { margin: 0; font-family: var(--font-display); font-size: clamp(5rem, 20vw, 11rem); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--accent); } @media print { - .site-header, .site-footer, .skip-link, .latest { display: none; } - body { background: #fff; color: #000; } - .hero { background: none; color: #000; } + .latest, .hero-visual { display: none; } + .hero h1 { color: #000; background: none; } } diff --git a/assets/js/main.js b/assets/js/main.js index b583b9d..fb3503a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,40 +1,24 @@ -// Progressive enhancement for the site header. Without JavaScript the menu is -// simply always visible and the dropdowns are native
elements. +// Live Mars clock on the home page (NASA Mars24 algorithm, Allison & McEwen 2000). (() => { - const toggle = document.querySelector('.nav-toggle'); - const nav = document.getElementById('site-nav'); - const dropdowns = Array.from(document.querySelectorAll('.dropdown')); - - const setMenu = (open) => { - toggle.setAttribute('aria-expanded', String(open)); - nav.classList.toggle('is-open', open); + const el = document.querySelector('[data-mars-clock]'); + if (!el) return; + const mtc = el.querySelector('[data-mtc]'); + const msd = el.querySelector('[data-msd]'); + const utc = el.querySelector('[data-utc]'); + const TT_MINUS_UTC = 37 + 32.184; // TAI-UTC (leap seconds since 2017) + TT-TAI, in seconds + const pad = (n) => String(Math.floor(n)).padStart(2, '0'); + const hms = (hours) => { + const s = hours * 3600; + return `${pad(s / 3600)}:${pad((s % 3600) / 60)}:${pad(s % 60)}`; }; - - if (toggle && nav) { - toggle.addEventListener('click', () => { - setMenu(toggle.getAttribute('aria-expanded') !== 'true'); - }); - } - - const closeDropdowns = (except) => { - dropdowns.forEach((d) => { if (d !== except) d.open = false; }); + const tick = () => { + const now = Date.now(); + const jdTT = now / 86400000 + 2440587.5 + TT_MINUS_UTC / 86400; + const sol = (jdTT - 2405522.0028779) / 1.0274912517; + mtc.textContent = hms((((sol % 1) + 1) % 1) * 24); + msd.textContent = sol.toFixed(5); + utc.textContent = new Date(now).toISOString().slice(11, 19); }; - - // One dropdown open at a time; close on outside click and on Escape. - dropdowns.forEach((d) => { - d.addEventListener('toggle', () => { if (d.open) closeDropdowns(d); }); - }); - document.addEventListener('click', (e) => { - if (!e.target.closest('.dropdown')) closeDropdowns(); - }); - document.addEventListener('keydown', (e) => { - if (e.key !== 'Escape') return; - const open = dropdowns.find((d) => d.open); - closeDropdowns(); - if (open) open.querySelector('summary').focus(); - else if (toggle && toggle.getAttribute('aria-expanded') === 'true') { - setMenu(false); - toggle.focus(); - } - }); + tick(); + setInterval(tick, 1000); })(); diff --git a/assets/kit/interimm.css b/assets/kit/interimm.css new file mode 100644 index 0000000..bece0f9 --- /dev/null +++ b/assets/kit/interimm.css @@ -0,0 +1,373 @@ +/* InterImm kit: the shared look of every InterImm site. + + Source of truth: InterImm/interimm.github.io (branch `hugo`), assets/kit/. + Published at https://interimm.org/kit/interimm.css with its fonts and + https://interimm.org/kit/interimm.js. Other sites link those URLs instead of + copying them, so they pick up changes automatically. See kit/README.md. + + Hand-written, no framework. Colours are tokens on :root and switch with the + visitor's system light/dark preference. Anything with the `space` class is + always dark. Keep changes additive: other sites depend on these class names. */ + +/* ---------- fonts (self-hosted, SIL OFL; see static/kit/fonts) ---------- */ +@font-face { + font-family: "Space Grotesk"; + src: url("fonts/space-grotesk.woff2") format("woff2"); + font-weight: 300 700; + font-display: swap; + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; +} +@font-face { + font-family: "JetBrains Mono"; + src: url("fonts/jetbrains-mono-500.woff2") format("woff2"); + font-weight: 500; + font-display: swap; + unicode-range: U+0000-00FF, U+2000-206F, U+2190-2199; +} + +/* ---------- tokens ---------- */ +:root { + color-scheme: light dark; + + --bg: #f6f5f1; + --bg-alt: #eeece6; + --surface: #ffffff; + --surface-2: #faf9f6; + --text: #15171d; + --muted: #5a6070; + --border: #e2dfd7; + --border-strong: #cfcac0; + --link: #b93d12; + --focus: #d0461a; + --accent: #ff6b3d; + --accent-hover: #ff855e; + --accent-text: #1c0700; + --accent-soft: rgb(255 107 61 / 0.12); + --shadow: 0 1px 2px rgb(20 20 30 / 0.05), 0 12px 32px rgb(20 20 30 / 0.06); + + --radius: 1.1rem; + --wrap: 76rem; + --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC"; + --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; + --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", var(--cjk), sans-serif, var(--emoji); + --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, var(--cjk), sans-serif, var(--emoji); + --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, var(--cjk), monospace; +} + +/* dark values, shared by the dark scheme and every `.space` block */ +@media (prefers-color-scheme: dark) { + :root { + --bg: #07090f; + --bg-alt: #0b0f18; + --surface: #0f141f; + --surface-2: #131a27; + --text: #e8ebf2; + --muted: #98a1b4; + --border: rgb(255 255 255 / 0.08); + --border-strong: rgb(255 255 255 / 0.16); + --link: #ff9b75; + --focus: #ff9b75; + --accent-soft: rgb(255 107 61 / 0.14); + --shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 16px 40px rgb(0 0 0 / 0.35); + } + .site-header .brand-mark, .site-footer .brand-mark { filter: invert(1); } +} + +.space { + --bg: #05070d; + --bg-alt: #0a0e17; + --surface: rgb(255 255 255 / 0.04); + --surface-2: rgb(255 255 255 / 0.07); + --text: #eef1f7; + --muted: #a3acc0; + --border: rgb(255 255 255 / 0.1); + --border-strong: rgb(255 255 255 / 0.2); + --link: #ff9b75; + --focus: #ff9b75; + color: var(--text); + position: relative; + isolation: isolate; + overflow: hidden; + background: + radial-gradient(60rem 32rem at 92% -10%, rgb(255 107 61 / 0.22), transparent 60%), + radial-gradient(48rem 36rem at -10% 110%, rgb(88 92 230 / 0.22), transparent 62%), + var(--bg); +} +/* starfield + faint coordinate grid, both static */ +.space::before, .space::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } +.space::before { + opacity: 0.75; + background-image: + radial-gradient(1.2px 1.2px at 12% 22%, #fff, transparent), + radial-gradient(1px 1px at 31% 71%, #fff, transparent), + radial-gradient(1.5px 1.5px at 52% 14%, #fff, transparent), + radial-gradient(1px 1px at 68% 58%, #fff, transparent), + radial-gradient(1.2px 1.2px at 83% 33%, #fff, transparent), + radial-gradient(1px 1px at 93% 82%, #fff, transparent), + radial-gradient(1px 1px at 22% 92%, #fff, transparent), + radial-gradient(0.8px 0.8px at 44% 44%, #fff, transparent), + radial-gradient(0.8px 0.8px at 76% 8%, #fff, transparent); + background-size: 420px 340px; +} +.space::after { + background-image: + linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px); + background-size: 64px 64px; + -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%); + mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%); +} + +/* ---------- base ---------- */ +*, *::before, *::after { box-sizing: border-box; } + +html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } + +body { + margin: 0; + min-height: 100vh; + min-height: 100dvh; + display: flex; + flex-direction: column; + font-family: var(--font); + font-size: 1.0625rem; + line-height: 1.7; + color: var(--text); + background: var(--bg); + -webkit-font-smoothing: antialiased; +} +main { flex: 1; } + +h1, h2, h3 { + font-family: var(--font-display); font-weight: 600; + line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.6em; text-wrap: balance; +} +p { margin: 0 0 1em; text-wrap: pretty; } +img, video, svg { max-width: 100%; height: auto; } +a { color: var(--link); text-underline-offset: 0.2em; } +a:hover { text-decoration-thickness: 2px; } +ul, ol { margin: 0 0 1em; } +::selection { background: var(--accent); color: var(--accent-text); } + +:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 0.3rem; } + +.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } + +.sr-only { + position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; + overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; +} + +.skip-link { + position: absolute; left: 1rem; top: -4rem; z-index: 100; + padding: 0.6rem 1rem; border-radius: 0.6rem; + background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none; +} +.skip-link:focus { top: 1rem; } + +.text-center { text-align: center; } + +.kicker { + display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; + font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; + letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); +} +.kicker::before { content: ""; width: 1.5rem; height: 1px; background: var(--accent); } +.kicker:has(.pulse)::before { display: none; } +.pulse { + width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); + box-shadow: 0 0 0 0 rgb(255 107 61 / 0.6); animation: pulse 2.4s infinite; +} +@keyframes pulse { 70% { box-shadow: 0 0 0 0.6rem rgb(255 107 61 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 107 61 / 0); } } + +.icon { width: 1.5rem; height: 1.5rem; flex: none; } +.icon-emoji { display: inline-grid; place-items: center; font-size: 1.25rem; line-height: 1; } + +/* ---------- header ---------- */ +.site-header { + position: sticky; top: 0; z-index: 50; + background: color-mix(in srgb, var(--bg) 78%, transparent); + -webkit-backdrop-filter: saturate(1.6) blur(14px); + backdrop-filter: saturate(1.6) blur(14px); + border-bottom: 1px solid var(--border); +} +.header-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.25rem; min-height: 4rem; padding-block: 0.5rem; } + +.brand { + display: inline-flex; align-items: center; gap: 0.65rem; + font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; + color: var(--text); text-decoration: none; +} +.brand-mark { border-radius: 50%; } + +.site-nav { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; } +.nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem; list-style: none; margin: 0; padding: 0; } + +.nav-link, .dropdown > summary { + display: inline-flex; align-items: center; gap: 0.4rem; + padding: 0.4rem 0.8rem; border-radius: 999px; + color: var(--muted); font-size: 0.95rem; font-weight: 500; text-decoration: none; cursor: pointer; + transition: color 0.15s, background 0.15s; +} +.nav-link:hover, .dropdown > summary:hover, .dropdown[open] > summary { color: var(--text); background: var(--surface-2); } +.nav-link[aria-current="page"], .dropdown[data-current] > summary { color: var(--text); background: var(--accent-soft); } +.lang-link { border: 1px solid var(--border-strong); color: var(--text); } + +.dropdown { position: relative; } +.dropdown > summary { list-style: none; } +.dropdown > summary::-webkit-details-marker { display: none; } +.dropdown > summary::after { + content: ""; width: 0.35em; height: 0.35em; margin-top: -0.2em; + border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); +} +.dropdown-menu { + position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 60; + min-width: min(19rem, 90vw); margin: 0; padding: 0.4rem; list-style: none; + background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0.9rem; box-shadow: var(--shadow); +} +@media (prefers-color-scheme: dark) { .dropdown-menu { background: #121826; } } +.dropdown-menu a { + display: block; padding: 0.5rem 0.75rem; border-radius: 0.55rem; + color: var(--text); font-size: 0.95rem; text-decoration: none; +} +.dropdown-menu a:hover { background: var(--surface-2); } +.dropdown-menu a[aria-current="page"] { color: var(--link); font-weight: 600; } + +.nav-toggle { + display: none; margin-left: auto; padding: 0.45rem; border: 1px solid var(--border-strong); border-radius: 999px; + background: transparent; color: var(--text); cursor: pointer; +} + +@media (max-width: 58rem) { + .js .nav-toggle { display: inline-flex; } + .js .site-nav { display: none; flex-basis: 100%; padding-bottom: 0.75rem; } + .js .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; } + .nav-list { flex-direction: column; align-items: stretch; } + .nav-link, .dropdown > summary { border-radius: 0.6rem; font-size: 1rem; } + .nav-tools { flex-direction: row; flex-wrap: wrap; padding-top: 0.5rem; border-top: 1px solid var(--border); } + .dropdown-menu { position: static; min-width: 0; margin: 0.2rem 0 0.4rem 0.75rem; box-shadow: none; } +} + +/* ---------- buttons, chips ---------- */ +.btn { + display: inline-flex; align-items: center; justify-content: center; gap: 0.6ch; + padding: 0.55rem 1.15rem; border: 1px solid var(--border-strong); border-radius: 999px; + background: var(--surface); color: var(--text); font: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.4; + white-space: nowrap; text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; +} +.btn:hover { border-color: var(--accent); } +.btn span { transition: transform 0.15s; } +.btn:hover span { transform: translateX(3px); } +.btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-text); } +.btn-primary:hover { background: var(--accent-hover); border-color: transparent; box-shadow: 0 8px 30px rgb(255 107 61 / 0.35); } +.btn-ghost { background: transparent; } +.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); } +.btn-lg { padding: 0.8rem 1.6rem; font-size: 1.05rem; } + +.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; } +.chips li { + padding: 0.2rem 0.85rem; border: 1px solid var(--border-strong); border-radius: 999px; + background: var(--surface); color: var(--muted); font-size: 0.85rem; line-height: 1.6; +} +.chips-small li { padding: 0.05rem 0.65rem; font-size: 0.78rem; } + +.text-link { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 0.1rem; } +.text-link span { display: inline-block; transition: transform 0.15s; } +.text-link:hover span { transform: translateX(3px); } + +/* ---------- sections ---------- */ +.section { padding-block: clamp(3.5rem, 8vw, 6rem); } +.section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); } +.section-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } +.section-head-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; } +.section-title { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); margin-bottom: 0.4rem; } +.section-lede { max-width: 36rem; margin: 0; color: var(--muted); font-size: 1.1rem; } + +/* tiles (archives and tools) */ +.bento { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); } +.tile { + position: relative; display: flex; flex-direction: column; + padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); + background: linear-gradient(180deg, var(--surface-2), var(--surface)); +} +.tile > :last-child { margin-bottom: 0; } +.tile-icon { + display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; + border-radius: 0.75rem; background: var(--accent-soft); color: var(--accent); +} +.tile-title { font-size: 1.2rem; margin-bottom: 0.4rem; } +.tile p { color: var(--muted); font-size: 0.97rem; } +.tile .card-cta { color: var(--text); } + +/* generic cards (inner pages) */ +.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } +.card { + position: relative; display: flex; flex-direction: column; + padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); +} +.card > :last-child { margin-bottom: 0; } +.card-title { font-size: 1.25rem; margin-bottom: 0.5rem; } +.card-cta { margin: auto 0 0; padding-top: 0.75rem; color: var(--link); font-size: 0.92rem; font-weight: 600; } +.card-cta span { display: inline-block; color: var(--accent); transition: transform 0.15s; } +.card-wide { max-width: 54rem; margin-inline: auto; width: 100%; } + +/* whole card is clickable through its title link */ +.card-link-wrap { transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } +.card-link-wrap:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--shadow); } +.card-link-wrap:hover .card-cta span { transform: translateX(4px); } +.card-link { color: var(--text); text-decoration: none; } +.card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } +.card-link:focus-visible { outline: none; } +.card-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; } + +.card-media { padding: 0; overflow: hidden; } +.card-media .card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-alt); } +.card-media .card-body { padding: 1.25rem 1.5rem 1.5rem; } + +.stack { display: grid; gap: 1.5rem; } +.figure { margin: 1rem 0 0; padding: 1rem; background: #fff; border-radius: 0.75rem; text-align: center; } +.figure img { max-height: 32rem; width: auto; margin-inline: auto; } + +/* ---------- inner pages ---------- */ +.page-hero { padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--border); } +.page-hero h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.25rem); letter-spacing: -0.035em; margin-bottom: 0.3em; } +.page-hero h1:lang(zh) { letter-spacing: 0; } +.page-hero .lede { max-width: 44rem; margin: 0 0 1rem; color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); } +.page-hero .chips { margin: 1rem 0 0; } + +.prose { max-width: 46rem; } +.prose > * { margin-inline: 0; } +.prose h2 { margin-top: 2em; font-size: 1.75rem; } +.prose h3 { margin-top: 1.6em; font-size: 1.3rem; } +.prose img, .prose video { border-radius: 0.75rem; } +.prose-wide { max-width: 66rem; } +.prose-wide > p, .prose-wide > h2, .prose-wide > h3, .prose-wide > ul, .prose-wide > ol { max-width: 46rem; margin-inline: auto; } +.wrap.prose { margin-inline: auto; } +:lang(zh) { line-height: 1.85; } +:lang(zh) .tile p, :lang(zh) .card p, :lang(zh) .timeline p { line-height: 1.75; } + +/* ---------- footer ---------- */ +.site-footer { padding-block: 3.5rem 1.5rem; background: var(--bg-alt); border-top: 1px solid var(--border); color: var(--muted); font-size: 0.93rem; } +.footer-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border); } +.footer-brand .kicker { margin: 0; } +.footer-grid { display: grid; gap: 2rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } +.footer-col h2 { margin-bottom: 0.8rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); } +.footer-col ul { margin: 0; padding: 0; list-style: none; } +.footer-col li { margin-bottom: 0.35rem; } +.footer-col a { color: var(--muted); text-decoration: none; } +.footer-col a:hover { color: var(--link); text-decoration: underline; } +.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.78rem; } +.footer-legal a { color: var(--muted); text-decoration: none; } +.footer-legal a:hover { color: var(--link); } + +/* ---------- motion and print ---------- */ +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + *, *::before, *::after { transition: none !important; animation: none !important; } +} + +@media print { + .site-header, .site-footer, .skip-link { display: none; } + body, .space { background: #fff; color: #000; } + .space::before, .space::after { display: none; } +} diff --git a/assets/kit/interimm.js b/assets/kit/interimm.js new file mode 100644 index 0000000..2a60b8c --- /dev/null +++ b/assets/kit/interimm.js @@ -0,0 +1,113 @@ +// InterImm kit: shared header and footer for every InterImm site. +// +// Source of truth: InterImm/interimm.github.io (branch `hugo`), assets/kit/. +// Published at https://interimm.org/kit/interimm.js. See kit/README.md. +// +// 1. On a page that marks its header with `data-interimm-header` (and its +// footer with `data-interimm-footer`), it replaces them with the current +// interimm.org menu and footer, read from nav..json next to this +// script. The page's own markup stays as the fallback if that fails. +// 2. On every page it wires up the header menu: the mobile toggle and one +// dropdown open at a time. Without JavaScript the menu is simply always +// visible and the dropdowns are native
elements. +(() => { + document.documentElement.classList.add('js'); + const script = document.currentScript; + const base = script ? new URL('.', script.src) : new URL('/kit/', location.href); + + const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[c]); + + const GITHUB_ICON = ''; + const MENU_ICON = ''; + + const renderHeader = (nav, current) => { + const link = (item) => `${esc(item.name)}`; + const items = nav.menu.map((item) => { + if (item.children && item.children.length) { + const open = item.children.some((c) => c.id === current) ? ' data-current' : ''; + return `
  • ${esc(item.name)}
      ${item.children.map((c) => `
    • ${link(c)}
      • `).join('')}
    • `; + } + return `
  • ${link(item).replace('`; + }).join(''); + const langs = nav.languages.map((l) => `${esc(nav.labels.language)}: ${esc(l.name)}`).join(''); + return `
    + ${esc(nav.title)} + + +
    `; + }; + + const renderFooter = (nav) => `
    +
    + ${esc(nav.title)} +

    ${esc(nav.labels.kicker)}

    +
    +
    ${nav.footer.map((col) => `

    ${esc(col.title)}

    ${col.description ? `

    ${esc(col.description)}

    ` : ''}
    `).join('')}
    +

    © ${new Date().getFullYear()} ${esc(nav.author)}${esc(nav.labels.backToTop)} ↑

    +
    `; + + const initMenu = () => { + const toggle = document.querySelector('.nav-toggle'); + const nav = document.getElementById('site-nav'); + const dropdowns = Array.from(document.querySelectorAll('.dropdown')); + + const setMenu = (open) => { + toggle.setAttribute('aria-expanded', String(open)); + nav.classList.toggle('is-open', open); + }; + + if (toggle && nav) { + toggle.addEventListener('click', () => { + setMenu(toggle.getAttribute('aria-expanded') !== 'true'); + }); + } + + const closeDropdowns = (except) => { + dropdowns.forEach((d) => { if (d !== except) d.open = false; }); + }; + + // One dropdown open at a time; close on outside click and on Escape. + dropdowns.forEach((d) => { + d.addEventListener('toggle', () => { if (d.open) closeDropdowns(d); }); + }); + document.addEventListener('click', (e) => { + if (!e.target.closest('.dropdown')) closeDropdowns(); + }); + document.addEventListener('keydown', (e) => { + if (e.key !== 'Escape') return; + const open = dropdowns.find((d) => d.open); + closeDropdowns(); + if (open) open.querySelector('summary').focus(); + else if (toggle && toggle.getAttribute('aria-expanded') === 'true') { + setMenu(false); + toggle.focus(); + } + }); + }; + + const start = () => { + const header = document.querySelector('[data-interimm-header]'); + const footer = document.querySelector('[data-interimm-footer]'); + if (!header && !footer) { initMenu(); return; } + + const host = header || footer; + const lang = host.dataset.lang || (document.documentElement.lang.toLowerCase().startsWith('zh') ? 'cn' : 'en'); + fetch(new URL(`nav.${lang}.json`, base)) + .then((r) => { if (!r.ok) throw new Error(r.status); return r.json(); }) + .then((nav) => { + if (header) header.innerHTML = renderHeader(nav, header.dataset.current); + if (footer) footer.innerHTML = renderFooter(nav); + }) + .catch(() => { /* keep the page's own fallback markup */ }) + .finally(initMenu); + }; + + if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start); + else start(); +})(); diff --git a/i18n/cn.yaml b/i18n/cn.yaml index 7cdbea8..ca81168 100644 --- a/i18n/cn.yaml +++ b/i18n/cn.yaml @@ -20,3 +20,27 @@ translation: 点击标记查看详情 - id: topics translation: 探索方向 +- id: hero_kicker + translation: 火星 · 伊希地 · 成立于 2062 +- id: about_us + translation: 关于我们 +- id: what_we_do + translation: 我们做什么 +- id: explore + translation: 档案与工具 +- id: explore_lede + translation: 关于地球之外生活的书籍、地图与工具，全部开源。 +- id: all_archives + translation: 全部档案 +- id: all_activities + translation: 全部活动 +- id: mars_time + translation: 火星协调时 MTC +- id: mars_sol + translation: 火星日序 MSD +- id: earth_time + translation: 地球 UTC +- id: clock_note + translation: 实时计算，基于 NASA Mars24 算法 +- id: back_to_top + translation: 回到顶部 diff --git a/i18n/en.yaml b/i18n/en.yaml index bb56b5c..72c0ab7 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -20,3 +20,27 @@ translation: Select a marker for details - id: topics translation: Explore topics +- id: hero_kicker + translation: Isidis, Mars · Est. 2062 +- id: about_us + translation: About us +- id: what_we_do + translation: What we do +- id: explore + translation: Archives and tools +- id: explore_lede + translation: Books, maps and calculators for life beyond Earth, all open source. +- id: all_archives + translation: All archives +- id: all_activities + translation: All activities +- id: mars_time + translation: Coordinated Mars Time +- id: mars_sol + translation: Mars Sol Date +- id: earth_time + translation: Earth UTC +- id: clock_note + translation: Live, computed with the NASA Mars24 algorithm +- id: back_to_top + translation: Back to top diff --git a/kit/README.md b/kit/README.md new file mode 100644 index 0000000..fa92e4d --- /dev/null +++ b/kit/README.md @@ -0,0 +1,67 @@ +# InterImm kit + +The shared look of every InterImm site: colours, fonts, header, footer, buttons, cards and page headers. +interimm.org owns it and publishes it; every other site links it instead of copying it, so a change here +reaches all of them on their next page load and they can't drift apart again. + +| Published at | What | Source in this repo | +| --- | --- | --- | +| `https://interimm.org/kit/interimm.css` | Stylesheet, including the fonts below | `assets/kit/interimm.css` | +| `https://interimm.org/kit/interimm.js` | Header menu behaviour, and fills in the shared header and footer | `assets/kit/interimm.js` | +| `https://interimm.org/kit/nav.cn.json`, `nav.en.json` | The current menu and footer for each language | generated from `hugo.yaml` and `data/footer.yml` by `layouts/partials/kit.html` | +| `https://interimm.org/kit/fonts/` | Space Grotesk and JetBrains Mono (SIL OFL) | `static/kit/fonts/` | +| `https://interimm.org/kit/` | Live style guide showing every component | `static/kit/index.html` | + +All of it is static files on GitHub Pages, so it costs nothing. GitHub Pages sends +`Access-Control-Allow-Origin: *`, so subdomains such as cities.interimm.org can load the fonts and menu too. + +## Using it on another site + +```html + + + + + + + + +
    +
    + InterImm +
    +
    + +
    +
    +
    +

    InterImm

    +

    Page title

    +

    One sentence about the page.

    +
    +
    + ... +
    + +
    + + +``` + +`data-lang` is `en` or `cn`; without it the script uses the page's `lang`. Without JavaScript, or if +interimm.org can't be reached, the fallback markup stays. + +Main building blocks: `.wrap`, `.space` (always-dark band with stars), `.kicker`, `.section`, `.section-alt`, +`.section-title`, `.page-hero`, `.btn` / `.btn-primary` / `.btn-ghost` / `.btn-lg`, `.chips`, `.card`, +`.card-grid`, `.tile` and `.bento`, `.card-link-wrap` + `.card-link` (whole card clickable), `.text-link`, +`.prose`. Tokens such as `--bg`, `--surface`, `--text`, `--muted`, `--border`, `--accent`, `--link`, +`--radius`, `--font-display` and `--font-mono` are on `:root`; use them in site styles so light and dark +both work. The style guide at https://interimm.org/kit/ shows each one. + +## Changing it + +- Edit the files in this repo and open a PR against `hugo`; once merged it is live everywhere. +- Keep changes additive. Other sites depend on these class names and tokens, so rename or remove one only + after checking them (today: interplanetary-logistics and the cities explorer in martian-cities). +- Menu and footer changes go in `hugo.yaml` and `data/footer.yml` as before; the JSON follows automatically. diff --git a/layouts/404.html b/layouts/404.html index 3fd3c82..84d90da 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,5 +1,5 @@ {{ define "main" }} -
    +

    {{ i18n "not_found_title" }}

    diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 1eeba93..881580b 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,5 +1,5 @@ {{ define "main" }} -{{ partial "page-hero.html" (dict "title" .Title "description" .Description) }} +{{ partial "page-hero.html" (dict "title" .Title "description" .Description "kicker" site.Title) }}
    {{- with .Content }}
    {{ . }}
    {{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 4b176c2..47bf585 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -{{ partial "page-hero.html" (dict "title" .Title "description" .Description "tags" .Params.tags) }} +{{ partial "page-hero.html" (dict "title" .Title "description" .Description "tags" .Params.tags "kicker" site.Title) }}
    {{ .Content }} diff --git a/layouts/activities/list.html b/layouts/activities/list.html index b90511a..ec6c453 100644 --- a/layouts/activities/list.html +++ b/layouts/activities/list.html @@ -1,17 +1,22 @@ {{ define "main" }} {{- $d := index site.Data.activities site.Language.Lang -}} -{{ partial "page-hero.html" (dict "title" $d.title "description" $d.description) }} +{{ partial "page-hero.html" (dict "title" $d.title "description" $d.description "kicker" site.Title) }}
      + {{- $year := "" }} {{- range $d.list }} + {{- $y := substr .datetime 0 4 }}
    1. - -

      -

      - {{- if .link }}{{ .title | markdownify | emojify }}{{ else }}{{ .title | markdownify | emojify }}{{ end -}} -

      - {{- with .description }}

      {{ . }}

      {{ end }} + {{- if ne $y $year }}{{ $year = $y }}{{ end }} + {{ partial "icon.html" .icon }} +
      +

      +

      + {{- if .link }}{{ .title | markdownify | emojify }}{{ else }}{{ .title | markdownify | emojify }}{{ end -}} +

      + {{- with .description }}

      {{ . }}

      {{ end }} +
      2. {{- end }}
    diff --git a/layouts/archives/list.html b/layouts/archives/list.html index 016c8d8..81975bc 100644 --- a/layouts/archives/list.html +++ b/layouts/archives/list.html @@ -1,13 +1,13 @@ {{ define "main" }} {{- $d := index site.Data.archives site.Language.Lang -}} -{{ partial "page-hero.html" (dict "title" $d.title "description" $d.description) }} +{{ partial "page-hero.html" (dict "title" $d.title "description" $d.description "kicker" site.Title) }}
    -
    +
    {{- range $d.list }} -
    - -

    {{ .title }}

    +
    + {{ partial "icon.html" .icon }} +

    {{ .title }}

    {{ .description }}

    diff --git a/layouts/cities/list.html b/layouts/cities/list.html index ad4d4cf..089dec7 100644 --- a/layouts/cities/list.html +++ b/layouts/cities/list.html @@ -1,6 +1,6 @@ {{ define "main" }} {{- $d := index site.Data.cities site.Language.Lang -}} -{{ partial "page-hero.html" (dict "title" $d.title "description" $d.description) }} +{{ partial "page-hero.html" (dict "title" $d.title "description" $d.description "kicker" site.Title) }}
    diff --git a/layouts/cities/single.html b/layouts/cities/single.html index 9b279b6..6a407aa 100644 --- a/layouts/cities/single.html +++ b/layouts/cities/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -{{ partial "page-hero.html" (dict "title" .Title "description" .Description) }} +{{ partial "page-hero.html" (dict "title" .Title "description" .Description "kicker" .FirstSection.Title) }}
    {{ .Content }} diff --git a/layouts/index.html b/layouts/index.html index a7f0699..a0535d3 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,7 +1,10 @@ {{ define "main" }} -
    +{{- $archives := index site.Data.archives site.Language.Lang -}} +{{- $activities := index site.Data.activities site.Language.Lang -}} +
    +

    {{ i18n "hero_kicker" }}

    {{ site.Title }}

    {{- with site.Params.description }}

    {{ . }}

    {{ end }} {{- with site.Params.tags }} @@ -9,38 +12,54 @@

    {{ site.Title }}

    {{- range . }}
  • {{ . }}
    • {{ end }} {{- end }} - {{- with site.Params.primary_button }} -

    {{ .title }}

    - {{- end }} +

    + {{- with site.Params.primary_button }} + {{ .title }} + {{- end }} + {{ i18n "about_us" }} +

    +
    + +
    + +
    +
    {{ i18n "mars_time" }}
    --:--:--
    +
    {{ i18n "mars_sol" }}
    -----.-----
    +
    {{ i18n "earth_time" }}
    --:--:--
    +
    - {{- with site.Params.splash }} - - {{- end }}
    -
    -{{- /* The newest entry in the activity log doubles as the "latest" banner. */ -}} -{{- with index site.Data.activities site.Language.Lang }} -{{- with index .list 0 }} -
    + {{- /* The newest entry in the activity log doubles as the "latest" banner. */ -}} + {{- with $activities }}{{ with index .list 0 }}
    - {{ i18n "latest" }} - - {{ .title | markdownify | emojify }} + + {{ i18n "latest" }} + + {{ .title | markdownify | emojify }} + +
    -
    -{{- end }} -{{- end }} + {{- end }}{{ end }} +
    {{- with index site.Data.showcards site.Language.Lang }}
    -
    - {{- range . }} -
    -

    {{ .title }}

    +
    +

    {{ i18n "what_we_do" }}

    +
    +
    + {{- range $i, $c := . }} + {{- end }}
    @@ -48,27 +67,56 @@

    {{ .title }}

    {{- end }} -{{- with index site.Data.topics site.Language.Lang }} +{{- with $archives }}
    -

    {{ i18n "topics" }}

    -
      - {{- range . }} -
    • {{ .topic }}
      • +
      +
      +

      {{ .title }}

      +

      {{ i18n "explore" }}

      +

      {{ i18n "explore_lede" }}

      +
      + {{ i18n "all_archives" }} +
      +
      + {{- range first 6 .list }} +
      + {{ partial "icon.html" .icon }} +

      {{ .title }}

      +

      {{ .description }}

      + +
      {{- end }} -
    +
    {{- end }} -{{- with index site.Data.support site.Language.Lang }} +{{- with index site.Data.topics site.Language.Lang }}
    -

    {{ .title }}

    -
    +
    +

    {{ i18n "topics" }}

    +
    +
      + {{- range $i, $t := . }} +
    1. {{ .topic }}
      2. + {{- end }} +
    +
    +
    +{{- end }} + +{{- with index site.Data.support site.Language.Lang }} +
    +
    +
    +

    {{ .title }}

    +
    +
    {{- range .list }} -
    -

    {{ .title }}

    +
    +

    {{ .title }}

    {{ .content | markdownify }}

    {{- end }} diff --git a/layouts/institutes/list.html b/layouts/institutes/list.html index c0f7cc2..e73cb9b 100644 --- a/layouts/institutes/list.html +++ b/layouts/institutes/list.html @@ -1,6 +1,6 @@ {{ define "main" }} {{- $d := index site.Data.institutes site.Language.Lang -}} -{{ partial "page-hero.html" (dict "title" $d.title "description" $d.description "tags" $d.tags) }} +{{ partial "page-hero.html" (dict "title" $d.title "description" $d.description "tags" $d.tags "kicker" site.Title) }}
    {{- range $d.list }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 1e8ee38..6837059 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,6 +1,13 @@ {{- $columns := index site.Data.footer site.Language.Lang -}}
    +
    + + + {{ site.Title }} + +

    {{ i18n "hero_kicker" }}

    +
    {{- with $columns }}
    {{- range . }} @@ -16,6 +23,6 @@

    {{ .title }}

    {{- end }}
    {{- end }} -

    © {{ now.Year }} {{ site.Params.author }}

    +

    © {{ now.Year }} {{ site.Params.author }}{{ i18n "back_to_top" }} ↑

    diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 795f981..ad7878e 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -49,6 +49,8 @@ +{{- $kit := partialCached "kit.html" . site.Language.Lang }} + {{- with resources.Get "css/main.css" | minify | fingerprint }} {{- end }} diff --git a/layouts/partials/icon.html b/layouts/partials/icon.html new file mode 100644 index 0000000..0d3bb41 --- /dev/null +++ b/layouts/partials/icon.html @@ -0,0 +1,25 @@ +{{- /* Line icon for a data-file entry. Takes the entry's emoji `icon` and returns a matching SVG; unknown emoji are shown as-is. */ -}} +{{- $paths := dict + "📖" `` + "🪐" `` + "🏢" `` + "🏙️" `` + "🗺️" `` + "🕒" `` + "☀️" `` + "⭐" `` + "⏳" `` + "📡" `` + "🎫" `` + "🚀" `` + "🧭" `` + "🎓" `` + "🛰️" `` + "🎤" `` + "💬" `` +-}} +{{- with index $paths . -}} + +{{- else -}} + +{{- end -}} diff --git a/layouts/partials/kit.html b/layouts/partials/kit.html new file mode 100644 index 0000000..85eb8b2 --- /dev/null +++ b/layouts/partials/kit.html @@ -0,0 +1,41 @@ +{{- /* Publishes the shared kit at /kit/: interimm.css and interimm.js (unminified, + so other sites can read them) and, for the current language, + nav..json with the menu and footer that other InterImm sites render. + Use with partialCached keyed by language. Returns the stylesheet and + script so this site can link them too. */ -}} +{{- $css := resources.Get "kit/interimm.css" -}} +{{- $js := resources.Get "kit/interimm.js" -}} + +{{- $menu := slice -}} +{{- range site.Menus.main -}} + {{- $children := slice -}} + {{- range .Children }}{{ $children = $children | append (dict "id" .Identifier "name" .Name "url" (.URL | absURL)) }}{{ end -}} + {{- $menu = $menu | append (dict "id" .Identifier "name" .Name "url" (.URL | absURL) "children" $children) -}} +{{- end -}} + +{{- $languages := slice -}} +{{- range site.Sites }}{{ if ne .Language.Lang site.Language.Lang -}} + {{- $languages = $languages | append (dict "code" .Language.LanguageCode "name" .Language.LanguageName "url" .Home.Permalink) -}} +{{- end }}{{ end -}} + +{{- $footer := slice -}} +{{- range index site.Data.footer site.Language.Lang -}} + {{- $links := slice -}} + {{- range .list }}{{ $links = $links | append (dict "title" .title "url" ((partial "link.html" .link) | absURL)) }}{{ end -}} + {{- $footer = $footer | append (dict "title" .title "description" (.description | default "") "links" $links) -}} +{{- end -}} + +{{- $nav := dict + "title" site.Title + "author" site.Params.author + "home" site.Home.Permalink + "logo" ("assets/ico/favicon-96x96.png" | absURL) + "github" (printf "https://github.com/%s" site.Params.github) + "labels" (dict "menu" (i18n "menu") "language" (i18n "language") "backToTop" (i18n "back_to_top") "kicker" (i18n "hero_kicker")) + "menu" $menu + "languages" $languages + "footer" $footer +-}} +{{- $json := resources.FromString (printf "kit/nav.%s.json" site.Language.Lang) ($nav | jsonify (dict "indent" " " "noHTMLEscape" true)) -}} +{{- $_ := $json.Permalink -}} +{{- return (dict "css" $css "js" $js) -}} diff --git a/layouts/partials/page-hero.html b/layouts/partials/page-hero.html index 466b9ab..e55a9da 100644 --- a/layouts/partials/page-hero.html +++ b/layouts/partials/page-hero.html @@ -1,6 +1,7 @@ -{{- /* Expects a dict with title, and optionally description and tags. */ -}} -
    +{{- /* Expects a dict with title, and optionally kicker, description and tags. */ -}} +
    + {{- with .kicker }}

    {{ . }}

    {{ end }}

    {{ .title }}

    {{- with .description }}

    {{ . }}

    {{ end }} {{- with .tags }} diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index 8659723..9d25aba 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -1,3 +1,7 @@ +{{- $kit := partialCached "kit.html" . site.Language.Lang }} + +{{- if .IsHome }} {{- with resources.Get "js/main.js" | minify | fingerprint }} {{- end }} +{{- end }} diff --git a/static/kit/fonts/OFL-jetbrains-mono.txt b/static/kit/fonts/OFL-jetbrains-mono.txt new file mode 100644 index 0000000..8f7ed67 --- /dev/null +++ b/static/kit/fonts/OFL-jetbrains-mono.txt @@ -0,0 +1,93 @@ +Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/static/kit/fonts/OFL-space-grotesk.txt b/static/kit/fonts/OFL-space-grotesk.txt new file mode 100644 index 0000000..d5666d7 --- /dev/null +++ b/static/kit/fonts/OFL-space-grotesk.txt @@ -0,0 +1,93 @@ +Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/static/kit/fonts/jetbrains-mono-500.woff2 b/static/kit/fonts/jetbrains-mono-500.woff2 new file mode 100644 index 0000000..be878e6 Binary files /dev/null and b/static/kit/fonts/jetbrains-mono-500.woff2 differ diff --git a/static/kit/fonts/space-grotesk.woff2 b/static/kit/fonts/space-grotesk.woff2 new file mode 100644 index 0000000..0f3474e Binary files /dev/null and b/static/kit/fonts/space-grotesk.woff2 differ diff --git a/static/kit/index.html b/static/kit/index.html new file mode 100644 index 0000000..b1746da --- /dev/null +++ b/static/kit/index.html @@ -0,0 +1,140 @@ + + + + + + +InterImm kit | Style guide + + + + + + + + + + +
    +
    + InterImm +
    +
    + +
    +
    +
    +

    InterImm kit

    +

    Style guide

    +

    The shared colours, type, header, footer and components of every InterImm site. Link the kit, don't copy it.

    +
    • interimm.css
    • interimm.js
    • nav.en.json · nav.cn.json
    +
    +
    + +
    +
    +
    +

    Use

    +

    Add it to a page

    +

    The header and footer are filled in from interimm.org's live menu. Whatever is inside them is the fallback.

    +
    +
    <link rel="stylesheet" href="https://interimm.org/kit/interimm.css">
+<script src="https://interimm.org/kit/interimm.js" defer></script>
+
+<header class="site-header" data-interimm-header data-lang="en" data-current="logistics">
+  <div class="wrap header-inner"><a class="brand" href="https://interimm.org/en/">InterImm</a></div>
+</header>
+...
+<footer class="site-footer" data-interimm-footer></footer>
    +

    Full notes: kit/README.md.

    +
    +
    + +
    +
    +
    +

    Tokens

    +

    Colour

    +

    Follows the visitor's light or dark setting. Inside .space it is always dark.

    +
    +
      +
    • --bg
      • +
    • --bg-alt
      • +
    • --surface
      • +
    • --text
      • +
    • --muted
      • +
    • --border-strong
      • +
    • --accent
      • +
    • --link
      • +
    + +

    Type

    +

    Space Grotesk

    +

    JetBrains Mono · 02:07:11 MTC · 54302.08832

    +

    Body text uses the system font, with the system CJK font for Chinese. 正文使用系统字体。

    +
    +
    + +
    +
    +
    +

    Components

    +

    Buttons, chips and links

    +
    +
    + Primary + Ghost + Default + Text link +
    +
    • .chips
    • Developing Mars
    • Open source
    + +

    .bento of .tile.card-link-wrap

    +
    +
    + +

    Tile title

    +

    The whole tile is clickable through its title link.

    + +
    +
    + +

    Plain tile

    +

    Without the link wrapper it is static.

    +
    +
    +

    .card

    +

    A flat surface for forms, results and longer content.

    +
    +
    +
    +
    + +
    +
    +
    +

    .space

    +

    Always dark, with stars

    +

    Use it for page headers and the occasional band. Components inside it pick up the dark tokens.

    +
    +
    + Primary + Ghost +
    +
    +
    +
    + + + +