@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: #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); } [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 { 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; }