CoastalCommitsPastes/client/styles/globals.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;
	--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;
	--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;
	}
}