mirror of https://github.com/MaxLeiter/Drift
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
3.1 KiB
CSS
170 lines
3.1 KiB
CSS
@import "./syntax.css";
|
|
@import "./markdown.css";
|
|
@import "./inter.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(--lighter-gray);
|
|
--warning: rgb(27, 134, 23);
|
|
--link: #3291ff;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--token: #666;
|
|
--comment: #999;
|
|
--keyword: #000;
|
|
--name: #333;
|
|
--highlight: #eaeaea;
|
|
|
|
--bg: #fff;
|
|
--fg: #000;
|
|
--gray: #888;
|
|
|
|
--light-gray: #dedede;
|
|
--lighter-gray: #f5f5f5;
|
|
--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: rgba(0, 0, 0, 0.99);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
::selection {
|
|
text-shadow: none;
|
|
background: var(--selection);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 15px;
|
|
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;
|
|
/* TODO: this should be unnecessary. Overides the browser background for color-scheme while geist-ui catches up */
|
|
background: var(--bg);
|
|
}
|
|
|
|
p {
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
input,
|
|
button,
|
|
textarea,
|
|
select {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
/* TODO: this should not be necessary. */
|
|
main {
|
|
margin-top: 0 !important;
|
|
padding-top: 0 !important;
|
|
}
|