102 lines
1.6 KiB
CSS
102 lines
1.6 KiB
CSS
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
src: url("/JetBrainsMono.woff2");
|
|
font-display: swap;
|
|
}
|
|
|
|
html,
|
|
html.light {
|
|
--accent: #00a584;
|
|
--accent-translucent: #00a58498;
|
|
--font-primary: "JetBrains Mono", monospace;
|
|
--primary: #ffffff;
|
|
--secondary: #e9e9e9;
|
|
--tertiary: #939393;
|
|
--text: #444444;
|
|
--grey: #cecece;
|
|
--alt: #ddd;
|
|
--alt-text: #333;
|
|
--black: #151515;
|
|
--body-text: #666;
|
|
color-scheme: light;
|
|
}
|
|
|
|
html.dark {
|
|
--primary: #151515;
|
|
--secondary: #1d1d1d;
|
|
--tertiary: #353535;
|
|
--text: #ffffffde;
|
|
--grey: #5454547a;
|
|
--alt: #333;
|
|
--alt-text: #ddd;
|
|
--body-text: #bbb;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
--primary: #151515;
|
|
--secondary: #1d1d1d;
|
|
--tertiary: #353535;
|
|
--text: #ffffffde;
|
|
--grey: #5454547a;
|
|
--alt: #333;
|
|
--alt-text: #ddd;
|
|
--body-text: #bbb;
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
body {
|
|
@apply bg-primary text-text font-primary m-0 leading-loose min-h-screen transition-colors duration-200;
|
|
}
|
|
|
|
::selection {
|
|
@apply bg-accentTranslucent;
|
|
}
|
|
|
|
a {
|
|
@apply text-accent underline underline-offset-4 transition-filter duration-200;
|
|
}
|
|
|
|
a:hover {
|
|
@apply brightness-70;
|
|
}
|
|
|
|
h1 {
|
|
@apply text-4xl font-bold mt-8 mb-2 border-b-2 border-accent pb-2;
|
|
}
|
|
|
|
.h1-no-lg {
|
|
@apply mt-8 mb-2 border-b-2 border-accent pb-2;
|
|
}
|
|
|
|
h2 {
|
|
@apply text-3xl font-bold mt-8 mb-2;
|
|
}
|
|
|
|
h3 {
|
|
@apply text-2xl font-bold mt-8 mb-2;
|
|
}
|
|
|
|
h4 {
|
|
@apply text-xl font-bold mt-8 mb-2;
|
|
}
|
|
|
|
p {
|
|
color: var(--body-text);
|
|
}
|
|
|
|
/* Between-paragraph spacing */
|
|
p + p {
|
|
@apply mt-4;
|
|
}
|
|
|
|
summary {
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
.button {
|
|
@apply px-2 py-1 bg-accent text-primary rounded no-underline flex flex-row items-center gap-2;
|
|
}
|