EmilandClaude Sonnet 5
7471d65f54
The top bar's accent button becomes Portfolio (Email stays in the hero and the contact band), the hero gets a Full portfolio button, and the project list ends with a large block linking to it. The link points at Gitea's list of repos with the portfolio topic; the sync supplies the count and the resume file can override the target and label. Also eases the display weight and tracking of the name in the dark theme. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XtcZtnG4GQA1d6mW5PNrS9
124 lines
3.9 KiB
CSS
124 lines
3.9 KiB
CSS
/* 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;
|
|
|
|
/* Light type on a dark ground looks heavier, so the display weight is eased off there */
|
|
--name-weight: 800;
|
|
--name-tracking: -0.048em;
|
|
|
|
/* 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: var(--font-text), 'Segoe UI', system-ui, sans-serif;
|
|
--font-head: var(--font-display), '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;
|
|
|
|
--name-weight: 700;
|
|
--name-tracking: -0.036em;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: 88px; }
|
|
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; }
|
|
}
|