CoastalCommitsPastes/client/styles/globals.css

148 lines
2.6 KiB
CSS
Raw Normal View History

@import "./syntax.css";
@import "./markdown.css";
@import "./inter.css";
2022-03-06 19:46:59 -05:00
:root {
2022-03-23 19:28:39 -04:00
/* 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;
--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);
2022-03-06 19:46:59 -05:00
}
[data-theme="light"] {
2022-03-23 19:28:39 -04:00
--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;
--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);
}
* {
2022-03-23 19:28:39 -04:00
box-sizing: border-box;
}
::selection {
2022-03-23 19:28:39 -04:00
text-shadow: none;
background: var(--selection);
2022-03-07 01:16:08 -05:00
}
2022-03-06 19:46:59 -05:00
html,
body {
2022-03-23 19:28:39 -04:00
padding: 0;
margin: 0;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
2022-03-23 19:28:39 -04:00
min-height: 100vh;
font-family: var(--font-sans);
display: flex;
flex-direction: column;
}
p,
li {
2022-03-23 19:28:39 -04:00
letter-spacing: -0.33px;
font-size: 1.125rem;
}
blockquote {
2022-03-23 19:28:39 -04:00
font-style: italic;
margin: 0;
padding-left: 1rem;
border-left: 3px solid var(--light-gray);
}
a.reset {
2022-03-23 19:28:39 -04:00
outline: none;
text-decoration: none;
2022-03-06 19:46:59 -05:00
}
pre,
code {
2022-03-23 19:28:39 -04:00
font-family: var(--font-mono) !important;
}
kbd {
2022-03-23 19:28:39 -04:00
font-family: var(--font-sans);
font-size: 1rem;
padding: 2px 7px;
font-weight: 600;
background: var(--lighter-gray);
border-radius: 5px;
}
@media print {
2022-03-23 19:28:39 -04:00
: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;
}
}