187 lines
No EOL
3.3 KiB
CSS
187 lines
No EOL
3.3 KiB
CSS
:root {
|
|
/* Spacing */
|
|
--gap-quarter: 0.25rem;
|
|
--gap-half: 0.5rem;
|
|
--gap: 1rem;
|
|
--gap-double: 2rem;
|
|
|
|
--small-gap: 4rem;
|
|
--big-gap: 4rem;
|
|
--main-content: 55rem;
|
|
--radius: 8px;
|
|
--inline-radius: 5px;
|
|
|
|
--gap-negative: calc(-1 * var(--gap));
|
|
--gap-half-negative: calc(-1 * var(--gap-half));
|
|
--gap-quarter-negative: calc(-1 * var(--gap-quarter));
|
|
|
|
/* Typography */
|
|
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
|
|
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
--font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono",
|
|
"Menlo", monospace;
|
|
|
|
/* Transitions */
|
|
--transition: 0.1s ease-in-out;
|
|
--transition-slow: 0.3s ease-in-out;
|
|
|
|
--token: #999;
|
|
--comment: #999;
|
|
--keyword: #fff;
|
|
--name: #fff;
|
|
--highlight: #2e2e2e;
|
|
|
|
/* Dark Mode Colors */
|
|
--bg: #000;
|
|
--fg: #fafbfc;
|
|
--gray: #666;
|
|
--light-gray: #444;
|
|
--lighter-gray: #222;
|
|
--lightest-gray: #1a1a1a;
|
|
--darker-gray: #b4b4b4;
|
|
--darkest-gray: #efefef;
|
|
--article-color: #eaeaea;
|
|
--header-bg: rgba(19, 20, 21, 0.45);
|
|
--gray-alpha: rgba(255, 255, 255, 0.5);
|
|
--selection: rgba(255, 255, 255, 0.99);
|
|
--border: var(--light-gray);
|
|
--warning: #ff6700;
|
|
--link: #3291ff;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--token: #666;
|
|
--comment: #999;
|
|
--keyword: #000;
|
|
--name: #333;
|
|
--highlight: #eaeaea;
|
|
|
|
--bg: #fff;
|
|
--fg: #000;
|
|
--gray: #888;
|
|
|
|
--light-gray: #dedede;
|
|
--lighter-gray: #f2f2f2;
|
|
--lightest-gray: #fafafa;
|
|
--darker-gray: #555;
|
|
--darkest-gray: #222;
|
|
--article-color: #212121;
|
|
--header-bg: rgba(255, 255, 255, 0.8);
|
|
--gray-alpha: rgba(19, 20, 21, 0.5);
|
|
--selection: var(0, 0, 0, .6);
|
|
color-scheme: light;
|
|
}
|
|
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// TODO: replace this with an accessible alternative
|
|
*:focus-visible {
|
|
outline: none !important;
|
|
}
|
|
|
|
::selection {
|
|
text-shadow: none;
|
|
background: var(--fg) !important;
|
|
color: var(--bg) !important;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
font-family: var(--font-sans);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg);
|
|
}
|
|
|
|
p {
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
input,
|
|
button,
|
|
textarea,
|
|
select {
|
|
border: none;
|
|
font-size: 1rem;
|
|
background: var(--bg);
|
|
}
|
|
|
|
blockquote {
|
|
font-style: italic;
|
|
margin: 0;
|
|
padding-left: 1rem;
|
|
border-left: 3px solid var(--light-gray);
|
|
}
|
|
|
|
a.reset {
|
|
outline: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-bottom: 1px solid var(--light-gray);
|
|
margin: var(--gap) 0;
|
|
}
|
|
|
|
@media print {
|
|
:root {
|
|
--bg: #fff;
|
|
--fg: #000;
|
|
--gray: #888;
|
|
--light-gray: #dedede;
|
|
--lighter-gray: #f5f5f5;
|
|
--lightest-gray: #fafafa;
|
|
--article-color: #212121;
|
|
--header-bg: rgba(255, 255, 255, 0.8);
|
|
--gray-alpha: rgba(19, 20, 21, 0.5);
|
|
--selection: rgba(0, 0, 0, 0.99);
|
|
|
|
--token: #666;
|
|
--comment: #999;
|
|
--keyword: #000;
|
|
--name: #333;
|
|
--highlight: #eaeaea;
|
|
}
|
|
|
|
* {
|
|
text-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
#root,
|
|
#__next {
|
|
isolation: isolate;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
border: 1px solid var(--border);
|
|
font-family: var(--font-sans);
|
|
padding: var(--gap-half);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
textarea:focus {
|
|
border-color: var(--light-gray);
|
|
outline: none;
|
|
} |