A facelift után a site helyenként túl csendes lett. Élet kerül vissza, de nem dekorációként: két szabály mentén, amiket egymástól függetlenül lehet olvasni. A piktogram identitást jelöl — miféle dolog ez. Minden motor és platform saját glifát kap (TIC-80, Ebitengine, LÖVE, Godot, Bevy, Phaser, C64), és ugyanazt a jelet viszi a katalógusban, a részletlapon és a build-mátrix motor-oszlopában, egyetlen PlatformIcon komponensből. A Contact IRC- és BBS-csatornája is jelet kapott, mert a másik három brandnek eddig is volt, és a hiány látszott. A szín állapotot jelöl — mi van vele. A négy státuszból három kap hangot: a megjelent az akcens zöldet, a demó egy kéket (új --c-info token, 6,7:1 fehéren és 7,8:1 feketén), a fejlesztés alatti a borostyánt. Az archivált marad semleges, mert az a "már nem történik vele semmi" állapot. A navigáció, a gombok és a szekciócímek továbbra sem kapnak ikont: ott a szöveg megmondja, mi az. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
60 lines
1.5 KiB
JavaScript
60 lines
1.5 KiB
JavaScript
const token = (name) => `rgb(var(${name}) / <alpha-value>)`
|
|
|
|
module.exports = {
|
|
content: [
|
|
"./src/**/*.{astro,html,js,ts,jsx,tsx,vue,svelte}"
|
|
],
|
|
|
|
darkMode: ['selector', '[data-theme="dark"]'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
page: token('--c-page'),
|
|
surface: token('--c-surface'),
|
|
raised: token('--c-raised'),
|
|
line: token('--c-line'),
|
|
'line-strong': token('--c-line-strong'),
|
|
fg: token('--c-fg'),
|
|
'fg-muted': token('--c-fg-muted'),
|
|
'fg-subtle': token('--c-fg-subtle'),
|
|
accent: token('--c-accent'),
|
|
'accent-hover': token('--c-accent-hover'),
|
|
'accent-fg': token('--c-accent-fg'),
|
|
'accent-quiet': token('--c-accent-quiet'),
|
|
info: token('--c-info'),
|
|
warn: token('--c-warn'),
|
|
danger: token('--c-danger'),
|
|
|
|
primary: {
|
|
50: '#f0fdf4',
|
|
100: '#dcfce7',
|
|
200: '#bbf7d0',
|
|
300: '#86efac',
|
|
400: '#4ade80',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
700: '#15803d',
|
|
800: '#166534',
|
|
900: '#14532d',
|
|
},
|
|
retro: {
|
|
green: '#33ff33',
|
|
dark: '#0a0a0a',
|
|
amber: '#ffb000',
|
|
},
|
|
},
|
|
|
|
borderRadius: {
|
|
card: '8px',
|
|
control: '6px',
|
|
},
|
|
|
|
boxShadow: {
|
|
pop: '0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)',
|
|
float: '0 8px 24px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|