diff --git a/404.html b/404.html index 2719299..7c3177d 100644 --- a/404.html +++ b/404.html @@ -4,10 +4,18 @@ Page not found — DrobyshevDev - + + + +
diff --git a/assets/site.css b/assets/site.css index 42ebb66..f05421a 100644 --- a/assets/site.css +++ b/assets/site.css @@ -2,27 +2,22 @@ DrobyshevDev - organisation site One stylesheet, no build step, no external requests. - One scheme, dark. A toggle means designing the whole thing twice, and the - second design is always the one nobody checks - the same reasoning the lemma - documentation is built on. - - The visual language is hairlines, flat surfaces and type. There are no - rounded corners, no shadows and no gradients outside the mark, because every - one of those is a decoration standing in for a fact. What carries weight - here is a number with the conditions it was measured under printed beneath - it. + Colour-blocked bands - ground, a bright band, a dark band - with cards on a + 4px radius and pill controls. Two themes: the system preference decides, + the toggle overrides it, and the choice is remembered. + + No webfont. The typography is a system stack set heavy and tracked tight, + because a display face would be a third-party request and this site is + checked in CI for making none. --------------------------------------------------------------------------- */ /* --- Reset ---------------------------------------------------------------- */ -*, -*::before, -*::after { box-sizing: border-box; } +*, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } -body, -h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } +body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul[role="list"], ol[role="list"] { list-style: none; } @@ -30,30 +25,86 @@ img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } -/* --- Tokens --------------------------------------------------------------- */ +/* --- Tokens: light -------------------------------------------------------- */ :root { - --bg: #08080a; - --bg-2: #0d0d11; - --bg-3: #121217; + --ground: #fdfcfa; + --ground-2: #f5f2ec; + --card: #ffffff; + + --ink: #1b1b1e; + --ink-2: #56565f; /* 7.0:1 on --ground */ + --ink-3: #74747d; /* 4.6:1 on --ground */ - --line: #1d1d23; - --line-2: #2b2b34; + --line: #e6e2da; + --line-2: #d3cec3; - --fg: #ffffff; - --fg-2: #a3a3ae; /* 7.4:1 on --bg */ - --fg-3: #74747f; /* 4.6:1 on --bg: small labels still pass AA */ + --bright: #f0b429; /* the band that carries the page */ + --bright-ink: #1b1b1e; + --dark: #1b1b1e; + --dark-ink: #f7f6f3; + --dark-ink-2: #a8a8b0; + --dark-line: #34343a; - --accent: #7c83ff; - --accent-2: #b4b9ff; - --accent-dim: rgba(124, 131, 255, .12); + --accent: #4f46e5; + --accent-2: #b4b1ff; + --accent-wash: #eeecfd; - --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif; + --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; - --wrap: 1240px; - --gutter: clamp(20px, 5vw, 56px); - --band: clamp(72px, 9vw, 132px); + --wrap: 1200px; + --gutter: clamp(20px, 5vw, 48px); + --band: clamp(64px, 8vw, 116px); + --radius: 4px; + + color-scheme: light; +} + +/* --- Tokens: dark --------------------------------------------------------- */ + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --ground: #131316; + --ground-2: #0c0c0e; + --card: #1a1a1e; + + --ink: #f5f4f1; + --ink-2: #a8a8b1; + --ink-3: #8a8a94; + + --line: #2a2a31; + --line-2: #3a3a43; + + --bright-ink: #16160f; + --dark: #0c0c0e; + --dark-line: #26262c; + + --accent: #8f8bff; + --accent-wash: #1d1b33; + + color-scheme: dark; + } +} + +:root[data-theme="dark"] { + --ground: #131316; + --ground-2: #0c0c0e; + --card: #1a1a1e; + + --ink: #f5f4f1; + --ink-2: #a8a8b1; + --ink-3: #8a8a94; + + --line: #2a2a31; + --line-2: #3a3a43; + + --bright-ink: #16160f; + --dark: #0c0c0e; + --dark-line: #26262c; + + --accent: #8f8bff; + --accent-wash: #1d1b33; color-scheme: dark; } @@ -61,25 +112,21 @@ button, input, select, textarea { font: inherit; color: inherit; } /* --- Base ----------------------------------------------------------------- */ body { - background: var(--bg); - color: var(--fg); + background: var(--ground); + color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; } a { color: inherit; } -code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; } +code, kbd, samp, pre { font-family: var(--font-mono); font-size: .9em; } -::selection { background: var(--accent); color: #fff; } +::selection { background: var(--bright); color: var(--bright-ink); } -:focus-visible { - outline: 2px solid var(--accent-2); - outline-offset: 3px; -} +:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wrap { width: 100%; @@ -89,600 +136,358 @@ code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; } } .skip-link { - position: absolute; - left: -9999px; - top: 0; - z-index: 100; - background: var(--fg); - color: var(--bg); - padding: 10px 16px; - font-weight: 600; + position: absolute; left: -9999px; top: 0; z-index: 100; + background: var(--ink); color: var(--ground); + padding: 10px 16px; font-weight: 600; } .skip-link:focus { left: 0; } /* --- Type ----------------------------------------------------------------- */ h1, h2, h3, h4 { - font-weight: 600; - line-height: 1.05; - letter-spacing: -.028em; + font-weight: 800; + line-height: 1.06; + letter-spacing: -.03em; text-wrap: balance; } -h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -.038em; } -h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); } -h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); letter-spacing: -.022em; } -h4 { font-size: .8125rem; } +h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -.038em; } +h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } +h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: -.022em; } .eyebrow { - font-size: .6875rem; - font-weight: 600; - letter-spacing: .16em; - text-transform: uppercase; - color: var(--fg-3); - margin-bottom: 22px; -} -.eyebrow .rule { - display: inline-block; - width: 28px; - height: 1px; - background: var(--accent); - vertical-align: middle; - margin-right: 12px; - margin-bottom: 2px; + display: inline-flex; align-items: center; gap: 10px; + font-size: .6875rem; font-weight: 700; + letter-spacing: .14em; text-transform: uppercase; + color: var(--ink-3); + margin-bottom: 20px; +} +.eyebrow::before { + content: ""; width: 24px; height: 3px; + background: var(--bright); border-radius: 2px; } .lead { - font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); - line-height: 1.65; - color: var(--fg-2); - max-width: 62ch; + font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); + line-height: 1.65; color: var(--ink-2); max-width: 62ch; } -.note { - font-size: .8125rem; - line-height: 1.55; - color: var(--fg-3); -} +.note { font-size: .8125rem; line-height: 1.55; color: var(--ink-3); } /* --- Header --------------------------------------------------------------- */ .site-header { - position: sticky; - top: 0; - z-index: 50; - background: rgba(8, 8, 10, .78); - backdrop-filter: saturate(160%) blur(14px); + position: sticky; top: 0; z-index: 50; + background: color-mix(in srgb, var(--ground) 86%, transparent); + backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); } -.site-header .wrap { - display: flex; - align-items: center; - gap: 32px; - height: 62px; -} +.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 66px; } .brand { - display: inline-flex; - align-items: center; - gap: 10px; - font-weight: 600; - font-size: .9375rem; - letter-spacing: -.01em; - text-decoration: none; - flex: none; + display: inline-flex; align-items: center; gap: 10px; + font-weight: 800; font-size: .9375rem; letter-spacing: -.02em; + text-decoration: none; flex: none; } -.brand .mark { width: 22px; height: 22px; } +.brand .mark { width: 24px; height: 24px; border-radius: var(--radius); } -.nav { - display: flex; - align-items: center; - gap: 28px; - margin-left: auto; -} +.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; } .nav a { - font-size: .8125rem; - color: var(--fg-2); - text-decoration: none; - padding: 6px 0; - position: relative; + font-size: .875rem; font-weight: 500; color: var(--ink-2); + text-decoration: none; padding: 6px 0; position: relative; transition: color .15s; } .nav a::after { - content: ""; - position: absolute; - left: 0; right: 0; bottom: 0; - height: 1px; - background: var(--accent); - transform: scaleX(0); - transition: transform .18s; -} -.nav a:hover { color: var(--fg); } + content: ""; position: absolute; left: 0; right: 0; bottom: 0; + height: 3px; background: var(--bright); border-radius: 2px; + transform: scaleX(0); transform-origin: left; transition: transform .18s; +} +.nav a:hover { color: var(--ink); } .nav a:hover::after { transform: scaleX(1); } -.nav-tools { - display: flex; - align-items: center; - gap: 6px; - flex: none; -} +.nav-tools { display: flex; align-items: center; gap: 8px; flex: none; } .lang-switch { - font-size: .75rem; - font-weight: 600; - letter-spacing: .08em; - color: var(--fg-2); - text-decoration: none; - padding: 7px 11px; - border: 1px solid var(--line-2); + font-size: .75rem; font-weight: 700; letter-spacing: .08em; + color: var(--ink-2); text-decoration: none; + padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; transition: border-color .15s, color .15s; } -.lang-switch:hover { color: var(--fg); border-color: var(--fg-3); } +.lang-switch:hover { color: var(--ink); border-color: var(--ink-3); } .icon-btn { - display: none; - align-items: center; - justify-content: center; - width: 36px; - height: 34px; - background: none; - border: 1px solid var(--line-2); - color: var(--fg-2); - cursor: pointer; -} -.icon-btn svg { width: 18px; height: 18px; } + display: inline-flex; align-items: center; justify-content: center; + width: 36px; height: 36px; + background: none; border: 1px solid var(--line-2); border-radius: 999px; + color: var(--ink-2); cursor: pointer; + transition: border-color .15s, color .15s; +} +.icon-btn:hover { color: var(--ink); border-color: var(--ink-3); } +.icon-btn svg { width: 17px; height: 17px; } +.nav-toggle { display: none; } + +/* The toggle shows the theme it switches to, so only one icon is ever up. */ +.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; } +} /* --- Buttons -------------------------------------------------------------- */ .btn { - display: inline-flex; - align-items: center; - gap: 10px; - padding: 14px 24px; - font-size: .875rem; - font-weight: 600; - letter-spacing: .01em; - text-decoration: none; - border: 1px solid transparent; - transition: background-color .15s, border-color .15s, color .15s; + display: inline-flex; align-items: center; gap: 9px; + padding: 13px 24px; border-radius: 999px; + font-size: .875rem; font-weight: 700; letter-spacing: .01em; + text-decoration: none; border: 2px solid transparent; + transition: background-color .15s, border-color .15s, color .15s, transform .12s; } .btn svg { width: 16px; height: 16px; flex: none; } +.btn:active { transform: translateY(1px); } + +.btn-primary { background: var(--ink); color: var(--ground); } +.btn-primary:hover { background: var(--accent); color: #fff; } -.btn-primary { background: var(--fg); color: var(--bg); } -.btn-primary:hover { background: var(--accent-2); } +.btn-secondary { border-color: var(--line-2); color: var(--ink); } +.btn-secondary:hover { border-color: var(--ink); } -.btn-secondary { border-color: var(--line-2); color: var(--fg); } -.btn-secondary:hover { border-color: var(--fg-3); background: var(--bg-2); } +.btn-bright { background: var(--bright); color: var(--bright-ink); } +.btn-bright:hover { background: var(--ink); color: var(--ground); } .actions { display: flex; flex-wrap: wrap; gap: 12px; } +/* --- Bands ---------------------------------------------------------------- */ + +.band { padding-block: var(--band); } +.band-2 { background: var(--ground-2); } +.band-bright { background: var(--bright); color: var(--bright-ink); } +.band-dark { background: var(--dark); color: var(--dark-ink); } + +.band-bright .eyebrow, .band-bright .lead { color: color-mix(in srgb, var(--bright-ink) 84%, transparent); } +.band-bright .eyebrow::before { background: var(--bright-ink); } +.band-dark .eyebrow { color: var(--dark-ink-2); } +.band-dark .lead, .band-dark p { color: var(--dark-ink-2); } +.band-dark h2, .band-dark h3 { color: var(--dark-ink); } + +.section-head { max-width: 66ch; margin-bottom: clamp(36px, 4.5vw, 60px); } +.section-head h2 { margin-bottom: 16px; } + /* --- Hero ----------------------------------------------------------------- */ -.hero { - padding-top: clamp(64px, 9vw, 128px); - padding-bottom: 0; - border-bottom: 1px solid var(--line); +.hero { padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 80px); } +.hero h1 { max-width: 17ch; margin-bottom: 24px; } +.hero .lead { margin-bottom: 32px; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); } +.hero .actions { margin-bottom: 40px; } +.hero-since { + display: inline-flex; align-items: center; gap: 10px; + font-size: .875rem; color: var(--ink-3); } +.hero-since .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--bright); } -.hero h1 { max-width: 19ch; margin-bottom: 28px; } -.hero .lead { margin-bottom: 36px; } -.hero .actions { margin-bottom: clamp(56px, 7vw, 96px); } +/* --- Card grid ------------------------------------------------------------ */ -/* The specification strip: the first thing a reader gets after the claim is - the set of facts that back it, in the shape a datasheet uses. */ -.spec-strip { +.cards { display: grid; - grid-template-columns: repeat(4, 1fr); - border-top: 1px solid var(--line); -} -.spec-strip > div { - padding: 26px 28px 30px 0; - border-right: 1px solid var(--line); -} -.spec-strip > div:last-child { border-right: 0; } -.spec-strip dt { - font-size: .6875rem; - font-weight: 600; - letter-spacing: .13em; - text-transform: uppercase; - color: var(--fg-3); - margin-bottom: 10px; -} -.spec-strip dd { - font-size: clamp(1.5rem, 2.3vw, 2rem); - font-weight: 600; - letter-spacing: -.03em; - line-height: 1.1; - font-variant-numeric: tabular-nums; -} -.spec-strip .sub { - display: block; - margin-top: 8px; - font-size: .75rem; - font-weight: 400; - letter-spacing: 0; - color: var(--fg-3); - line-height: 1.45; + grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); + gap: 20px; } -/* --- Bands ---------------------------------------------------------------- */ - -.band { padding-block: var(--band); border-bottom: 1px solid var(--line); } -.band-2 { background: var(--bg-2); } - -.section-head { max-width: 68ch; margin-bottom: clamp(44px, 5vw, 72px); } -.section-head h2 { margin-bottom: 20px; } +.card { + display: flex; flex-direction: column; + background: var(--card); + border: 1px solid var(--line); + border-radius: var(--radius); + padding: 26px 24px 22px; + transition: border-color .15s, transform .15s, box-shadow .15s; +} +.card:hover { + border-color: var(--line-2); + transform: translateY(-2px); + box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .45); +} +.band-dark .card { background: color-mix(in srgb, var(--dark-ink) 6%, transparent); border-color: var(--dark-line); } -/* --- Projects ------------------------------------------------------------- */ +.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } +.card h3 { font-family: var(--font-mono); font-weight: 700; font-size: 1.1875rem; } +.card h3 a { text-decoration: none; } +.card h3 a:hover { color: var(--accent); } +.card p { color: var(--ink-2); font-size: .9375rem; margin-bottom: 18px; } +.band-dark .card p { color: var(--dark-ink-2); } -.project { - display: grid; - grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); - gap: clamp(32px, 5vw, 80px); - padding-block: clamp(44px, 5vw, 68px); - border-top: 1px solid var(--line); -} -.project:last-child { border-bottom: 1px solid var(--line); } - -.project-name { - display: flex; - align-items: baseline; - gap: 14px; - margin-bottom: 18px; -} -.project-name h3 { - font-family: var(--font-mono); - font-size: clamp(1.5rem, 2.4vw, 2rem); - font-weight: 600; - letter-spacing: -.02em; -} -.project-name h3 a { text-decoration: none; } -.project-name h3 a:hover { color: var(--accent-2); } -.project-name .licence { - font-size: .6875rem; - font-weight: 600; - letter-spacing: .1em; - text-transform: uppercase; - color: var(--fg-3); - border: 1px solid var(--line-2); - padding: 3px 8px; -} - -.project .claim { - font-size: clamp(1.125rem, 1.6vw, 1.375rem); - line-height: 1.4; - letter-spacing: -.018em; - font-weight: 500; - margin-bottom: 18px; - text-wrap: balance; +.tag { + font-size: .6875rem; font-weight: 700; letter-spacing: .07em; + text-transform: uppercase; color: var(--ink-3); + border: 1px solid var(--line-2); border-radius: 999px; + padding: 3px 10px; white-space: nowrap; } -.project p { color: var(--fg-2); margin-bottom: 24px; max-width: 60ch; } +.band-dark .tag { color: var(--dark-ink-2); border-color: var(--dark-line); } + +.card-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } -.project-links { display: flex; flex-wrap: wrap; gap: 22px; } -.project-links a { - font-size: .8125rem; - font-weight: 600; - color: var(--fg); +.more { + display: inline-flex; align-items: center; gap: 7px; + font-size: .8125rem; font-weight: 700; color: var(--accent); text-decoration: none; - border-bottom: 1px solid var(--line-2); - padding-bottom: 3px; - transition: border-color .15s, color .15s; } -.project-links a:hover { color: var(--accent-2); border-color: var(--accent); } +.more svg { width: 14px; height: 14px; transition: transform .15s; } +.more:hover svg { transform: translateX(3px); } +.band-dark .more { color: var(--accent-2); } -/* Datasheet block beside each project. */ -.datasheet { border-top: 1px solid var(--line-2); } -.datasheet > div { - display: grid; - grid-template-columns: 1fr auto; - gap: 20px; - align-items: baseline; - padding: 13px 0; - border-bottom: 1px solid var(--line); -} -.datasheet dt { - font-size: .75rem; - letter-spacing: .06em; - text-transform: uppercase; - color: var(--fg-3); -} -.datasheet dd { - font-size: .9375rem; - font-weight: 600; - text-align: right; - font-variant-numeric: tabular-nums; -} - -.command { - position: relative; - margin-top: 24px; - background: var(--bg); - border: 1px solid var(--line-2); - padding: 16px 52px 16px 18px; - font-family: var(--font-mono); - font-size: .8125rem; - line-height: 1.9; - overflow-x: auto; -} -.band-2 .command { background: var(--bg-3); } -.command .p { color: var(--fg-3); user-select: none; } -.command .c { color: var(--fg-3); } -.command .s { color: var(--accent-2); } - -.copy-btn { - position: absolute; - top: 10px; - right: 10px; - width: 30px; - height: 30px; - display: inline-flex; - align-items: center; - justify-content: center; - background: none; - border: 1px solid var(--line-2); - color: var(--fg-3); - cursor: pointer; - transition: color .15s, border-color .15s; -} -.copy-btn:hover { color: var(--fg); border-color: var(--fg-3); } -.copy-btn svg { width: 14px; height: 14px; } -.copy-btn[data-copied] { color: var(--accent-2); border-color: var(--accent); } - -/* A measured table inside a project block. The caption carries the conditions, - so the figures above it can be read without the repository open. */ -.measure { - margin: 0 0 24px; - overflow-x: auto; -} -.measure table { - width: 100%; - border-collapse: collapse; - font-variant-numeric: tabular-nums; +.card .command { + font-family: var(--font-mono); font-size: .8125rem; + background: var(--ground-2); border: 1px solid var(--line); + border-radius: var(--radius); padding: 9px 12px; margin-bottom: 18px; + overflow-x: auto; white-space: nowrap; } +.band-dark .card .command { background: rgba(0, 0, 0, .28); border-color: var(--dark-line); } +.card .command .p { color: var(--ink-3); user-select: none; } + +/* --- Evidence ------------------------------------------------------------- */ + +.measure { overflow-x: auto; } +.measure table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .measure caption { - caption-side: bottom; - padding-top: 12px; - text-align: left; - font-size: .8125rem; - line-height: 1.5; - color: var(--fg-3); + caption-side: bottom; padding-top: 14px; text-align: left; + font-size: .8125rem; line-height: 1.5; + color: color-mix(in srgb, var(--bright-ink) 84%, transparent); } .measure th { - text-align: left; - font-size: .6875rem; - font-weight: 600; - letter-spacing: .12em; - text-transform: uppercase; - color: var(--fg-3); + text-align: left; font-size: .6875rem; font-weight: 700; + letter-spacing: .12em; text-transform: uppercase; padding: 0 20px 10px 0; - border-bottom: 1px solid var(--line-2); + border-bottom: 2px solid color-mix(in srgb, var(--bright-ink) 30%, transparent); + color: color-mix(in srgb, var(--bright-ink) 84%, transparent); } .measure td { - padding: 11px 20px 11px 0; - border-bottom: 1px solid var(--line); - font-size: .9375rem; -} -.measure td:first-child { color: var(--fg-2); } -.measure td:nth-child(2) { font-weight: 600; } -.measure td:last-child { color: var(--fg-3); font-size: .8125rem; padding-right: 0; } -.measure code { color: var(--fg-2); } - -/* --- Course --------------------------------------------------------------- */ - -.course { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 380px); - gap: clamp(32px, 5vw, 80px); - align-items: start; + padding: 11px 20px 11px 0; font-size: .9375rem; + border-bottom: 1px solid color-mix(in srgb, var(--bright-ink) 14%, transparent); +} +.measure td:nth-child(2) { font-weight: 800; } +.measure td:last-child { font-size: .8125rem; padding-right: 0; opacity: .86; } +.measure code { font-weight: 600; } + +.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin-top: 44px; } +.figure dt { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .86; margin-bottom: 8px; } +.figure dd { font-size: clamp(1.75rem, 2.6vw, 2.375rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; } +.figure .sub { display: block; margin-top: 8px; font-size: .8125rem; font-weight: 400; letter-spacing: 0; line-height: 1.45; opacity: .86; } + +/* --- Notes ---------------------------------------------------------------- */ + +.feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } +.feed .card h3 { font-family: var(--font-sans); letter-spacing: -.02em; } +.meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .75rem; color: var(--ink-3); margin-bottom: 14px; } +.meta time { font-variant-numeric: tabular-nums; } +.meta .sep { opacity: .5; } +.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } +.chip { + font-size: .6875rem; font-weight: 600; color: var(--accent); + background: var(--accent-wash); border-radius: 999px; padding: 3px 10px; } -.course h2 { margin-bottom: 20px; } -.course p { color: var(--fg-2); margin-bottom: 28px; max-width: 60ch; } /* --- Method --------------------------------------------------------------- */ -.rules { border-top: 1px solid var(--line); } -.rule { - display: grid; - grid-template-columns: 64px minmax(0, 26ch) minmax(0, 1fr); - gap: clamp(20px, 3vw, 48px); - padding-block: 32px; - border-bottom: 1px solid var(--line); - align-items: start; -} -.rule .num { - font-family: var(--font-mono); - font-size: .8125rem; - color: var(--fg-3); - padding-top: 6px; - font-variant-numeric: tabular-nums; -} -.rule h3 { padding-top: 1px; } -.rule p { color: var(--fg-2); margin: 0; } -.rule code { - color: var(--accent-2); - background: var(--accent-dim); - padding: 1px 5px; -} +.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } +.rule { border-top: 3px solid var(--bright); padding-top: 18px; } +.rule .num { font-family: var(--font-mono); font-size: .75rem; font-weight: 700; color: var(--ink-3); display: block; margin-bottom: 8px; } +.band-dark .rule .num { color: var(--dark-ink-2); } +.rule h3 { margin-bottom: 10px; } +.rule p { color: var(--ink-2); font-size: .9375rem; } +.rule code { color: var(--accent); background: var(--accent-wash); padding: 1px 5px; border-radius: 3px; } -/* --- Definition rows (licensing, contributing) ---------------------------- */ +/* `.band-dark p` and `.rule p` have the same specificity, so on the dark band + the later rule won and the paragraphs came out at 2.4:1. These overrides are + one class deeper on purpose, so the band always beats the component. */ +.band-dark .rule p { color: var(--dark-ink-2); } +.band-dark .rule code { color: var(--accent-2); background: rgba(255, 255, 255, .07); } + +/* --- Definition rows ------------------------------------------------------ */ .rows { border-top: 1px solid var(--line); } .rows > div { - display: grid; - grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); - gap: clamp(20px, 3vw, 48px); - padding-block: 24px; - border-bottom: 1px solid var(--line); + display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); + gap: clamp(16px, 3vw, 44px); + padding-block: 22px; border-bottom: 1px solid var(--line); } -.rows dt { font-weight: 600; font-size: .9375rem; } -.rows dd { color: var(--fg-2); } -.rows dd a { color: var(--fg); text-underline-offset: 3px; } +.rows dt { font-weight: 700; font-size: .9375rem; } +.rows dd { color: var(--ink-2); } +.rows dd a { color: var(--accent); text-underline-offset: 3px; } +.rows code { background: var(--ground-2); padding: 1px 5px; border-radius: 3px; } /* --- Footer --------------------------------------------------------------- */ -.site-footer { padding-block: clamp(56px, 6vw, 88px) 40px; } - +.site-footer { background: var(--dark); color: var(--dark-ink); padding-block: clamp(48px, 6vw, 76px) 32px; } +.site-footer .brand { color: var(--dark-ink); } .footer-grid { - display: grid; - grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); - gap: clamp(28px, 4vw, 64px); - padding-bottom: 48px; -} -.footer-brand p { color: var(--fg-3); font-size: .875rem; margin-top: 16px; max-width: 34ch; } -.footer-col h4 { - font-size: .6875rem; - font-weight: 600; - letter-spacing: .13em; - text-transform: uppercase; - color: var(--fg-3); - margin-bottom: 16px; -} -.footer-col li { margin-bottom: 10px; } -.footer-col a { - font-size: .875rem; - color: var(--fg-2); - text-decoration: none; - transition: color .15s; -} -.footer-col a:hover { color: var(--fg); } - -/* A link whose destination is in the other language says so, rather than - showing the reader a label they cannot read and letting them find out by - clicking. The switcher itself is exempt: it is written in the language it - points at on purpose, because that is what a speaker of that language - recognises. */ -.lang-note { color: var(--fg-3); } - + display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); + gap: clamp(24px, 4vw, 56px); padding-bottom: 40px; +} +.footer-brand p { color: var(--dark-ink-2); font-size: .875rem; margin-top: 14px; max-width: 34ch; } +.footer-col h4 { font-size: .6875rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--dark-ink-2); margin-bottom: 14px; } +.footer-col li { margin-bottom: 9px; } +.footer-col a { font-size: .875rem; color: var(--dark-ink); text-decoration: none; opacity: .82; transition: opacity .15s, color .15s; } +.footer-col a:hover { opacity: 1; color: var(--bright); } .footer-bottom { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: 12px; - padding-top: 28px; - border-top: 1px solid var(--line); - color: var(--fg-3); - font-size: .8125rem; + display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; + padding-top: 26px; border-top: 1px solid var(--dark-line); + color: var(--dark-ink-2); font-size: .8125rem; } +.footer-bottom a { color: var(--dark-ink); } /* --- Legal page and 404 --------------------------------------------------- - These two pages keep the class names they were written with. The legal text - is a document with its own edition date, so it is styled here rather than + These two keep the class names they were written with. The legal text is a + document with its own edition date, so it is styled here rather than rewritten to match a new set of classes. --------------------------------------------------------------------------- */ -/* Tokens the two pages reference from inline styles. */ -:root { - --text-faint: var(--fg-3); - --text-muted: var(--fg-2); - --border: var(--line); -} - -.prose, -.legal { max-width: 78ch; } -.prose h2, -.legal h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin: 56px 0 18px; } -.prose h3, -.legal h3 { font-size: 1.0625rem; margin: 30px 0 10px; } -.prose p, .prose li, -.legal p, .legal li { color: var(--fg-2); margin-bottom: 13px; } -.prose ul, .prose ol, -.legal ul, .legal ol { padding-left: 22px; } -.prose a, -.legal a { color: var(--fg); text-underline-offset: 3px; } -.legal code, -.prose code { color: var(--accent-2); background: var(--accent-dim); padding: 1px 5px; } - -.lm-fine { font-size: .8125rem; color: var(--fg-3); } - -/* The eyebrow marker on pages written before the rule replaced the dot. */ -.eyebrow .dot { - display: inline-block; - width: 28px; - height: 1px; - background: var(--accent); - vertical-align: middle; - margin-right: 12px; - margin-bottom: 2px; -} - -/* Section index on the legal page: sharp bordered links, not pills. */ -.chips { display: flex; flex-wrap: wrap; gap: 10px; } -.chip { - font-size: .8125rem; - color: var(--fg-2); - text-decoration: none; - border: 1px solid var(--line-2); - padding: 8px 14px; - transition: color .15s, border-color .15s; -} -.chip:hover { color: var(--fg); border-color: var(--fg-3); } -.chip-accent:hover { border-color: var(--accent); color: var(--accent-2); } +:root { --text-faint: var(--ink-3); --text-muted: var(--ink-2); --border: var(--line); } + +.prose, .legal { max-width: 78ch; } +.prose h2, .legal h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 52px 0 16px; } +.prose h3, .legal h3 { font-size: 1.0625rem; margin: 28px 0 10px; } +.prose p, .prose li, .legal p, .legal li { color: var(--ink-2); margin-bottom: 12px; } +.prose ul, .prose ol, .legal ul, .legal ol { padding-left: 22px; } +.prose a, .legal a { color: var(--accent); text-underline-offset: 3px; } +.legal code, .prose code { background: var(--ground-2); padding: 1px 5px; border-radius: 3px; } +.lm-fine { font-size: .8125rem; color: var(--ink-3); } + +.eyebrow .dot { display: none; } -/* The "what the site actually does" table reuses the datasheet rhythm. */ .facts { border-top: 1px solid var(--line-2); } .facts > div { - display: grid; - grid-template-columns: 1fr auto; - gap: 20px; - align-items: baseline; - padding: 12px 0; - border-bottom: 1px solid var(--line); + display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline; + padding: 12px 0; border-bottom: 1px solid var(--line); } -.facts dt { font-size: .875rem; color: var(--fg-3); } -.facts dd { font-size: .9375rem; font-weight: 600; text-align: right; } +.facts dt { font-size: .875rem; color: var(--ink-3); } +.facts dd { font-size: .9375rem; font-weight: 700; text-align: right; } -/* 404 */ -.notfound { padding-block: clamp(80px, 12vw, 160px); } +.notfound { padding-block: clamp(72px, 11vw, 140px); } .notfound .code { - font-family: var(--font-mono); - font-size: clamp(3rem, 9vw, 5.5rem); - font-weight: 600; - letter-spacing: -.04em; - color: var(--fg-3); - margin-bottom: 12px; + font-family: var(--font-mono); font-size: clamp(3rem, 9vw, 5rem); + font-weight: 800; letter-spacing: -.04em; color: var(--ink-3); margin-bottom: 12px; } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 1000px) { - .project, - .course { grid-template-columns: minmax(0, 1fr); } - .spec-strip { grid-template-columns: repeat(2, 1fr); } - .spec-strip > div:nth-child(2n) { border-right: 0; } - .spec-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { - .icon-btn { display: inline-flex; } - + .nav-toggle { display: inline-flex; } .nav { - display: none; - position: absolute; - top: 62px; - left: 0; - right: 0; - flex-direction: column; - align-items: stretch; - gap: 0; - background: var(--bg-2); - border-bottom: 1px solid var(--line); - padding: 8px var(--gutter) 20px; + display: none; position: absolute; top: 66px; left: 0; right: 0; + flex-direction: column; align-items: stretch; gap: 0; + background: var(--ground); border-bottom: 1px solid var(--line); + padding: 6px var(--gutter) 18px; } .nav[data-open="true"] { display: flex; } .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; } .nav a::after { display: none; } - .rule { grid-template-columns: 40px minmax(0, 1fr); } - .rule p { grid-column: 2; } - - .rows > div { grid-template-columns: minmax(0, 1fr); gap: 8px; } - - .spec-strip { grid-template-columns: minmax(0, 1fr); } - .spec-strip > div { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; } - .spec-strip > div:last-child { border-bottom: 0; } - + .rows > div { grid-template-columns: minmax(0, 1fr); gap: 6px; } .footer-grid { grid-template-columns: minmax(0, 1fr); } } diff --git a/assets/site.js b/assets/site.js index 58d6c51..acd6215 100644 --- a/assets/site.js +++ b/assets/site.js @@ -1,11 +1,32 @@ /* DrobyshevDev — site behaviour. Progressive enhancement only: - every section is readable and every link works with this file removed. - - There is no theme code here any more. The site commits to one scheme, so - there is nothing to toggle and nothing to remember between visits. */ + every section is readable and every link works with this file removed. */ (function () { "use strict"; + /* --- Theme ------------------------------------------------------------ */ + // The stored value is applied by an inline script in so the page never + // paints in the wrong theme; this only handles the toggle itself. With + // nothing stored the system preference decides, which is why the toggle + // reads the media query rather than assuming light. + var root = document.documentElement; + + function currentTheme() { + var explicit = root.getAttribute("data-theme"); + if (explicit === "dark" || explicit === "light") return explicit; + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + } + + var toggle = document.querySelector(".theme-toggle"); + if (toggle) { + toggle.setAttribute("aria-label", toggle.getAttribute("data-label-" + currentTheme())); + toggle.addEventListener("click", function () { + var next = currentTheme() === "dark" ? "light" : "dark"; + root.setAttribute("data-theme", next); + try { localStorage.setItem("theme", next); } catch (e) { /* private mode */ } + toggle.setAttribute("aria-label", toggle.getAttribute("data-label-" + next)); + }); + } + /* --- Mobile navigation ------------------------------------------------ */ var navToggle = document.querySelector(".nav-toggle"); var nav = document.getElementById("primary-nav"); @@ -35,34 +56,6 @@ }); } - /* --- Copy buttons ----------------------------------------------------- */ - // The command text lives in data-copy rather than being scraped from the - // DOM, so the prompt characters ($, #) are never copied with it. - document.querySelectorAll("[data-copy]").forEach(function (btn) { - btn.addEventListener("click", function () { - var text = btn.getAttribute("data-copy"); - var done = function () { - btn.setAttribute("data-copied", "true"); - setTimeout(function () { btn.removeAttribute("data-copied"); }, 1600); - }; - if (navigator.clipboard && window.isSecureContext) { - navigator.clipboard.writeText(text).then(done, fallback); - } else { - fallback(); - } - function fallback() { - var ta = document.createElement("textarea"); - ta.value = text; - ta.setAttribute("readonly", ""); - ta.style.cssText = "position:absolute;left:-9999px"; - document.body.appendChild(ta); - ta.select(); - try { document.execCommand("copy"); done(); } catch (e) { /* nothing to do */ } - document.body.removeChild(ta); - } - }); - }); - /* --- Current year ----------------------------------------------------- */ document.querySelectorAll("[data-year]").forEach(function (el) { el.textContent = String(new Date().getFullYear()); diff --git a/index.html b/index.html index 67649ff..8f63a62 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@ - + + @@ -29,6 +30,14 @@ + + + @@ -34,7 +43,7 @@ @@ -191,11 +200,15 @@

6. Защита персональных данных

гарантирующих их сохранность и исключающих несанкционированный доступ.

7. Файлы cookie

-

7.1. Сайт не устанавливает файлы cookie и не сохраняет никаких данных в браузере - Пользователя: ни в локальном хранилище (localStorage), ни в хранилище - сессии, ни иным способом.

-

7.2. Запрет локального хранилища настройками браузера не влияет на работу Сайта, - потому что Сайт им не пользуется.

+

7.1. Сайт не устанавливает файлы cookie. Единственное, что он сохраняет в браузере + Пользователя, — выбранная тема оформления, светлая или тёмная, в локальном хранилище + (localStorage) под ключом theme. Это значение не передаётся + на сервер, не связано с личностью Пользователя и удаляется вместе с данными сайта + средствами браузера.

+

7.2. Пока выбор не сделан, тема берётся из системной настройки и не сохраняется + никуда. Пользователь может в любое время очистить локальное хранилище или запретить + его использование настройками браузера: тогда тема перестанет запоминаться между + посещениями, а остальные функции Сайта продолжат работать.

8. Заключительные положения

8.1. Настоящая политика является общедоступным документом и размещена на Сайте в diff --git a/ru/index.html b/ru/index.html index 08bd38f..9600185 100644 --- a/ru/index.html +++ b/ru/index.html @@ -9,7 +9,8 @@ - + + @@ -29,6 +30,14 @@ + +