50 lines
1.9 KiB
CSS
50 lines
1.9 KiB
CSS
/* Self-hosted webfonts — no runtime CDN (cf. spec §7). */
|
|
@import '@fontsource/jetbrains-mono/300.css';
|
|
@import '@fontsource/jetbrains-mono/400.css';
|
|
@import '@fontsource/jetbrains-mono/500.css';
|
|
@import '@fontsource/jetbrains-mono/600.css';
|
|
@import '@fontsource/jetbrains-mono/700.css';
|
|
@import '@fontsource/ibm-plex-sans/300.css';
|
|
@import '@fontsource/ibm-plex-sans/400.css';
|
|
@import '@fontsource/ibm-plex-sans/500.css';
|
|
@import '@fontsource/ibm-plex-sans/600.css';
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html,
|
|
body,
|
|
#root {
|
|
@apply min-h-screen;
|
|
}
|
|
body {
|
|
@apply bg-bg text-text font-sans;
|
|
line-height: 1.6;
|
|
}
|
|
/* No transitions / hovers / animations baseline (cf. design.md §7). */
|
|
*:focus-visible {
|
|
outline: 1px solid theme('colors.cyan');
|
|
outline-offset: 2px;
|
|
}
|
|
::selection {
|
|
background: rgb(6 182 212 / 0.25);
|
|
color: theme('colors.text-bright');
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* Tinted accent fill — see design.md §2 "tinted fills". */
|
|
.accent-fill-red { background: rgb(239 68 68 / 0.15); color: theme('colors.red'); }
|
|
.accent-fill-orange { background: rgb(245 158 11 / 0.15); color: theme('colors.orange'); }
|
|
.accent-fill-yellow { background: rgb(234 179 8 / 0.15); color: theme('colors.yellow'); }
|
|
.accent-fill-green { background: rgb(16 185 129 / 0.15); color: theme('colors.green'); }
|
|
.accent-fill-cyan { background: rgb(6 182 212 / 0.15); color: theme('colors.cyan'); }
|
|
.accent-fill-blue { background: rgb(59 130 246 / 0.15); color: theme('colors.blue'); }
|
|
.accent-fill-purple { background: rgb(139 92 246 / 0.15); color: theme('colors.purple'); }
|
|
.accent-fill-pink { background: rgb(236 72 153 / 0.15); color: theme('colors.pink'); }
|
|
.accent-fill-rose { background: rgb(244 63 94 / 0.15); color: theme('colors.rose'); }
|
|
.accent-fill-teal { background: rgb(20 184 166 / 0.15); color: theme('colors.teal'); }
|
|
}
|