152 lines
2.7 KiB
CSS
152 lines
2.7 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;
|
|
|
|
/* 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;
|
|
|
|
--page-nav-height: 64px;
|
|
--token: #999;
|
|
--comment: #999;
|
|
--keyword: #fff;
|
|
--name: #fff;
|
|
--highlight: #2e2e2e;
|
|
|
|
/* Dark Mode Colors */
|
|
--bg: #131415;
|
|
--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);
|
|
}
|
|
|
|
[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;
|
|
}
|
|
|
|
p,
|
|
li {
|
|
letter-spacing: -0.33px;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
kbd {
|
|
font-family: var(--font-sans);
|
|
font-size: 1rem;
|
|
padding: 2px 7px;
|
|
font-weight: 600;
|
|
background: var(--lighter-gray);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|