EmilandClaude Sonnet 5
04c1cc5877
Adds a Russian version (data/resume.ru.json, default language) with an RU/EN switch stored under the key shared with the front page and the portfolio. The top bar becomes the site-wide one (brand, Resume, Portfolio, Gitea, Contact, language, theme) with a second row of anchors for this page's sections, and the fonts move to Unbounded and Onest so the three pages share one type system. Portfolio links now point at /portfolio/. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9
129 lines
5.1 KiB
CSS
129 lines
5.1 KiB
CSS
/* Bundled fonts (SIL Open Font License): Unbounded for headings, Onest for text; Latin and Cyrillic subsets. */
|
|
@font-face { font-family: 'Unbounded'; font-weight: 200 900; font-display: swap; src: url('./fonts/unbounded-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
|
|
@font-face { font-family: 'Unbounded'; font-weight: 200 900; font-display: swap; src: url('./fonts/unbounded-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
|
|
@font-face { font-family: 'Onest'; font-weight: 100 900; font-display: swap; src: url('./fonts/onest-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
|
|
@font-face { font-family: 'Onest'; font-weight: 100 900; font-display: swap; src: url('./fonts/onest-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
|
|
|
|
/* Design tokens: a studio-lit 3D viewport. Axis colours (X red, Y green, Z blue) are marks and lines, not text. */
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
/* Palette. The page is a 3D viewport: a studio backdrop and the three axis colours (X red, Y green, Z blue),
|
|
which are marks and lines rather than text. Dark is the default theme; see :root[data-theme='dark']. */
|
|
--paper: #f4f6f8;
|
|
--ink: #15181d;
|
|
--muted: #5b6571;
|
|
--x: #e0384b;
|
|
--y: #5aa300;
|
|
--z: #2c63e0;
|
|
--z-text: #2455c9;
|
|
|
|
/* Surfaces */
|
|
--hero-top: #f5f7fa;
|
|
--hero-bottom: #e6e9ee;
|
|
--stage-top: #d8dde4;
|
|
--stage-bottom: #cdd3db;
|
|
--plate-a: #f3f5f8;
|
|
--plate-b: #e6e9ed;
|
|
--plate-c: #d3d9e0;
|
|
--pill-bg: rgba(255, 255, 255, 0.72);
|
|
--disc-bg: rgba(244, 246, 248, 0.62);
|
|
--topbar-bg: rgba(244, 246, 248, 0.86);
|
|
--grid: rgba(21, 24, 29, 0.2);
|
|
--img-shadow: rgba(21, 24, 29, 0.28);
|
|
--dot-glow: rgba(90, 163, 0, 0.2);
|
|
|
|
/* Voxel covers of projects without a demo image */
|
|
--cube-top: #f9fafb;
|
|
--cube-left: #d6dbe2;
|
|
--cube-right: #b8c0cb;
|
|
--cube-edge: rgba(21, 24, 29, 0.16);
|
|
--cover-grid: rgba(21, 24, 29, 0.09);
|
|
|
|
/* The closing contact band is the inverse of the page */
|
|
--band-bg: #15181d;
|
|
--band-ink: #f4f6f8;
|
|
|
|
|
|
/* Derived from the palette above, so they follow the theme */
|
|
--line: color-mix(in srgb, var(--ink) 14%, transparent);
|
|
--ring: color-mix(in srgb, var(--ink) 9%, transparent);
|
|
--horizon: color-mix(in srgb, var(--ink) 22%, transparent);
|
|
--chip: color-mix(in srgb, var(--ink) 7%, transparent);
|
|
--ink-2: color-mix(in srgb, var(--ink) 86%, transparent);
|
|
--ink-3: color-mix(in srgb, var(--ink) 76%, transparent);
|
|
--ink-line: color-mix(in srgb, var(--ink) 32%, transparent);
|
|
--band-2: color-mix(in srgb, var(--band-ink) 70%, transparent);
|
|
--band-3: color-mix(in srgb, var(--band-ink) 58%, transparent);
|
|
--band-line: color-mix(in srgb, var(--band-ink) 22%, transparent);
|
|
--band-underline: color-mix(in srgb, var(--band-ink) 38%, transparent);
|
|
|
|
--radius-plate: 18px;
|
|
--radius-control: 10px;
|
|
--shell: min(1240px, calc(100% - 48px));
|
|
--gutter: clamp(20px, 3vw, 32px);
|
|
--section: clamp(84px, 11vw, 148px);
|
|
|
|
--font-body: 'Onest', 'Segoe UI', system-ui, sans-serif;
|
|
--font-head: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
|
|
}
|
|
|
|
:root[data-theme='dark'] {
|
|
color-scheme: dark;
|
|
--paper: #1c2026;
|
|
--ink: #e9edf2;
|
|
--muted: #9aa5b1;
|
|
--x: #ff5a6e;
|
|
--y: #86d62c;
|
|
--z: #5b8dff;
|
|
--z-text: #8db0ff;
|
|
|
|
--hero-top: #282d35;
|
|
--hero-bottom: #1c2026;
|
|
--stage-top: #14171b;
|
|
--stage-bottom: #0f1114;
|
|
--plate-a: #363c46;
|
|
--plate-b: #2a2f37;
|
|
--plate-c: #1f2329;
|
|
--pill-bg: rgba(255, 255, 255, 0.07);
|
|
--disc-bg: rgba(40, 45, 53, 0.72);
|
|
--topbar-bg: rgba(28, 32, 38, 0.86);
|
|
--grid: rgba(255, 255, 255, 0.15);
|
|
--img-shadow: rgba(0, 0, 0, 0.55);
|
|
--dot-glow: rgba(134, 214, 44, 0.24);
|
|
|
|
--cube-top: #e9edf2;
|
|
--cube-left: #9aa5b3;
|
|
--cube-right: #69737f;
|
|
--cube-edge: rgba(0, 0, 0, 0.4);
|
|
--cover-grid: rgba(255, 255, 255, 0.09);
|
|
|
|
--band-bg: #e8ebef;
|
|
--band-ink: #15181d;
|
|
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: 124px; }
|
|
body {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
font: 400 17px/1.6 var(--font-body);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
a { color: inherit; }
|
|
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
|
|
ul { padding: 0; list-style: none; }
|
|
::selection { background: var(--z); color: #fff; }
|
|
:focus-visible { outline: 3px solid var(--z); outline-offset: 3px; border-radius: 4px; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
|
|
}
|
|
|
|
/* Bilingual text: both languages are in the markup, the html[data-lang] attribute picks one. */
|
|
html[data-lang='ru'] [data-en],
|
|
html[data-lang='en'] [data-ru] { display: none !important; }
|