94 lines
3.9 KiB
CSS
94 lines
3.9 KiB
CSS
:root {
|
|
--content-size: 1.25rem;
|
|
--content-size-sm: 1rem;
|
|
--content-line-height: 1.5;
|
|
--content-width: 52.5rem;
|
|
--content-padding: 0.65rem;
|
|
|
|
/* squish things down a little on mobile so more text fits on the screen */
|
|
@media(max-width: 640px) {
|
|
--content-line-height: 1.25;
|
|
--content-size: 1.15rem;
|
|
--content-size-sm: 0.9rem;
|
|
}
|
|
|
|
/* light-mode colors (warm "paper" theme, harmonized with dark mode) */
|
|
--bg-color: hsl(40deg 30% 97%);
|
|
/* text */
|
|
--content-color: hsl(30deg 12% 22%);
|
|
--content-color-faded: hsl(30deg 8% 38%);
|
|
/* links */
|
|
--primary-color: hsl(202deg 55% 32%);
|
|
/* indicators, hover effects, etc */
|
|
--accent-color: hsl(18deg 75% 45%);
|
|
--accent-color-faded: hsl(14deg 35% 50%);
|
|
/* misc */
|
|
--navbar-color: hsl(220deg 12% 34%);
|
|
--navbar-accent-color: hsl(18deg 80% 55%);
|
|
--heading-color: hsl(30deg 18% 25%);
|
|
--link-color: var(--primary-color);
|
|
--link-color-visited: var(--accent-color-faded);
|
|
--nav-link-color: white;
|
|
--neutral-gray: hsl(30deg 6% 32%);
|
|
--inline-code-bg: hsl(40deg 22% 91%);
|
|
--inline-code-color: var(--content-color);
|
|
|
|
/* dark-mode colors (defined here so that we only have to update them in one place) */
|
|
--dark-bg-color: hsl(220deg 10% 13%);
|
|
--dark-content-color: hsl(30deg 10% 75%);
|
|
--dark-content-color-faded: hsl(25deg 6% 50%);
|
|
--dark-primary-color: hsl(220deg 15% 40%);
|
|
--dark-accent-color: hsl(18deg 70% 55%);
|
|
--dark-accent-color-faded: hsl(18deg 30% 45%);
|
|
--dark-navbar-color: hsl(220deg 12% 18%);
|
|
/* dark mode navbar is much close to the page background,
|
|
so it doesn't need a separate accent color like light mode */
|
|
--dark-navbar-accent-color: var(--dark-accent-color);
|
|
--dark-heading-color: hsl(35deg 25% 88%);
|
|
--dark-link-color: hsl(202deg 50% 50%);
|
|
--dark-link-color-visited: hsl(270deg 33% 55%);
|
|
--dark-nav-link-color: var(--dark-heading-color);
|
|
--dark-neutral-gray: hsl(220deg 10% 45%);
|
|
--dark-inline-code-bg: hsl(220deg 7.5% 21%);
|
|
--dark-inline-code-color: hsl(18deg 10% 90%);
|
|
|
|
&[data-theme="dark"] {
|
|
--bg-color: var(--dark-bg-color);
|
|
--content-color: var(--dark-content-color);
|
|
--content-color-faded: var(--dark-content-color-faded);
|
|
--primary-color: var(--dark-primary-color);
|
|
--accent-color: var(--dark-accent-color);
|
|
--accent-color-faded: var(--dark-accent-color-faded);
|
|
--navbar-color: var(--dark-navbar-color);
|
|
--navbar-accent-color: var(--dark-navbar-accent-color);
|
|
--heading-color: var(--dark-heading-color);
|
|
--link-color: var(--dark-link-color);
|
|
--link-color-visited: var(--dark-link-color-visited);
|
|
--nav-link-color: var(--dark-nav-link-color);
|
|
--neutral-gray: var(--dark-neutral-gray);
|
|
--inline-code-bg: var(--dark-inline-code-bg);
|
|
--inline-code-color: var(--dark-inline-code-color);
|
|
}
|
|
|
|
&:not([data-theme="light"]) {
|
|
@media(prefers-color-scheme: dark) {
|
|
color-scheme: dark;
|
|
--bg-color: var(--dark-bg-color);
|
|
--content-color: var(--dark-content-color);
|
|
--content-color-faded: var(--dark-content-color-faded);
|
|
--primary-color: var(--dark-primary-color);
|
|
--navbar-color: var(--dark-navbar-color);
|
|
--navbar-accent-color: var(--dark-navbar-accent-color);
|
|
--accent-color: var(--dark-accent-color);
|
|
--accent-color-faded: var(--dark-accent-color-faded);
|
|
--heading-color: var(--dark-heading-color);
|
|
--link-color: var(--dark-link-color);
|
|
--link-color-visited: var(--dark-link-color-visited);
|
|
--nav-link-color: var(--dark-nav-link-color);
|
|
--neutral-gray: var(--dark-neutral-gray);
|
|
--inline-code-bg: var(--dark-inline-code-bg);
|
|
--inline-code-color: var(--dark-inline-code-color);
|
|
}
|
|
}
|
|
}
|