This commit is contained in:
137
src/app.css
137
src/app.css
@@ -2,22 +2,113 @@
|
||||
@plugin '@tailwindcss/typography';
|
||||
|
||||
@theme {
|
||||
--color-bg: #f6f4f0;
|
||||
--color-surface: #edeae4;
|
||||
--color-surface-hover: #e4e0d8;
|
||||
--color-border: #d6d2ca;
|
||||
--color-border-light: #e8e5de;
|
||||
--color-text: #2c2c2c;
|
||||
--color-text-muted: #6b6b6b;
|
||||
--color-text-dim: #999999;
|
||||
--color-text-ghost: #c5c0b8;
|
||||
--color-accent: #3d6b8e;
|
||||
--color-accent-hover: #4d7fa6;
|
||||
--color-bg: #000;
|
||||
--color-surface: #0a0a0a;
|
||||
--color-surface-hover: #171717;
|
||||
--color-border: #262626;
|
||||
--color-border-light: #1a1a1a;
|
||||
--color-text: #ededed;
|
||||
--color-text-muted: #a1a1a1;
|
||||
--color-text-dim: #888;
|
||||
--color-text-ghost: #666;
|
||||
--color-accent: #ededed;
|
||||
--color-accent-hover: #fff;
|
||||
--color-danger: #b44;
|
||||
|
||||
--font-heading: 'DM Serif Display', Georgia, serif;
|
||||
--font-heading: Montserrat, Arial, Helvetica, sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', 'Courier New', monospace;
|
||||
--font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif;
|
||||
--font-body: Montserrat, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--site-bg: #000;
|
||||
--site-surface: #0a0a0a;
|
||||
--site-hover: #171717;
|
||||
--site-text: #ededed;
|
||||
--site-muted: #a1a1a1;
|
||||
--site-border: #292929;
|
||||
}
|
||||
|
||||
:root[data-theme='light'] {
|
||||
color-scheme: light;
|
||||
--site-bg: #fff;
|
||||
--site-surface: #fafafa;
|
||||
--site-hover: #f4f4f5;
|
||||
--site-text: #171717;
|
||||
--site-muted: #646464;
|
||||
--site-border: #e5e5e5;
|
||||
--color-bg: #fff;
|
||||
--color-surface: #fafafa;
|
||||
--color-surface-hover: #f4f4f5;
|
||||
--color-border: #e5e5e5;
|
||||
--color-border-light: #eee;
|
||||
--color-text: #171717;
|
||||
--color-text-muted: #646464;
|
||||
--color-text-dim: #777;
|
||||
--color-text-ghost: #999;
|
||||
--color-accent: #171717;
|
||||
--color-accent-hover: #000;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
--tw-prose-body: var(--site-text);
|
||||
--tw-prose-headings: var(--site-text);
|
||||
--tw-prose-lead: var(--site-text);
|
||||
--tw-prose-links: var(--site-text);
|
||||
--tw-prose-bold: var(--site-text);
|
||||
--tw-prose-counters: var(--site-muted);
|
||||
--tw-prose-bullets: var(--site-muted);
|
||||
--tw-prose-hr: var(--site-border);
|
||||
--tw-prose-quotes: var(--site-text);
|
||||
--tw-prose-quote-borders: var(--site-border);
|
||||
--tw-prose-captions: var(--site-muted);
|
||||
--tw-prose-code: var(--site-text);
|
||||
--tw-prose-th-borders: var(--site-border);
|
||||
--tw-prose-td-borders: var(--site-border);
|
||||
}
|
||||
|
||||
/* Keep older project pages readable while their individual styles use light utility colors. */
|
||||
:root:not([data-theme='light']) .bg-white,
|
||||
:root:not([data-theme='light']) .bg-gray-50,
|
||||
:root:not([data-theme='light']) .bg-neutral-50 {
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
|
||||
:root:not([data-theme='light']) .bg-gray-100,
|
||||
:root:not([data-theme='light']) .bg-neutral-100 {
|
||||
background-color: #171717;
|
||||
}
|
||||
|
||||
:root:not([data-theme='light']) .bg-gray-200,
|
||||
:root:not([data-theme='light']) .bg-neutral-200 {
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
:root:not([data-theme='light']) .text-black,
|
||||
:root:not([data-theme='light']) .text-gray-900,
|
||||
:root:not([data-theme='light']) .text-gray-800 {
|
||||
color: #ededed;
|
||||
}
|
||||
|
||||
:root:not([data-theme='light']) .text-gray-700 {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
:root:not([data-theme='light']) .text-gray-600,
|
||||
:root:not([data-theme='light']) .text-gray-500 {
|
||||
color: #a1a1a1;
|
||||
}
|
||||
|
||||
:root:not([data-theme='light']) .border-gray-100,
|
||||
:root:not([data-theme='light']) .border-gray-200,
|
||||
:root:not([data-theme='light']) .border-gray-300 {
|
||||
border-color: #292929;
|
||||
}
|
||||
|
||||
:root:not([data-theme='light']) .hover\:bg-gray-50:hover,
|
||||
:root:not([data-theme='light']) .hover\:bg-gray-100:hover {
|
||||
background-color: #171717;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -36,15 +127,27 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
background: var(--site-bg);
|
||||
color: var(--site-text);
|
||||
font-family: var(--font-body);
|
||||
font-size: 15px;
|
||||
line-height: 1.65;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--site-text);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: color-mix(in srgb, var(--color-accent) 20%, transparent);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user