new theme.css

1 files changed, 110 insertions, 0 deletions

diff --git a/styles/theme.css b/styles/theme.css
new file mode 100644
index 0000000..c3a8dee
--- /dev/null
+++ b/styles/theme.css
@@ -0,0 +1,110 @@
+:root {
+	--almond: #F4DEC9;
+	--heliotrope-gray: #A69CAC;
+	--purple-navy: #474973;
+	--oxford-blue: #161B33;
+	--xiketic: #0D0C1A;
+	--magnolia: #EFE9F4;
+
+	--fire-opal: #EE6352;
+	--cyan-process: #08B2E3;
+	--forest-green-crayola: #57A773;
+
+	--bg: var(--xiketic);
+	--fg: var(--almond);
+
+	--bg-alt: var(--oxford-blue);
+	--fg-alt: var(--heliotrope-gray);
+	--links: var(--fire-opal);
+}
+
+html,
+.searchBar .input {
+	font-family: "Inter", sans-serif;
+	font-size: 16px;
+}
+
+code, pre {
+	font-family: "JetBrainsMono", monospace;
+	font-size: 12px;
+}
+
+.subtile {
+	font-style: italic;
+	opacity: .75;
+	color: var(--heliotrope-gray);
+}
+
+h1, h2, h3 {
+	font-weight: 700;
+	margin: 0;
+}
+
+h1 { font-size: 64px; }
+h2 { font-size: 48px; }
+h3 { font-size: 32px; }
+
+::-webkit-scrollbar-track { background-color: var(--bg); }
+::-webkit-scrollbar-thumb { background-color: var(--purple-navy); }
+::-webkit-scrollbar-thumb:hover { background-color: var(--fg); }
+
+.button {
+	background-color: var(--fire-opal);
+	color: var(--fg) !important;
+}
+
+::selection {
+	background-color: var(--fire-opal);
+}
+
+blockquote {
+	position: relative;
+	padding-left: 12px;
+	font-style: italic;
+	color: var(--fg-alt);
+}
+
+blockquote:before {
+	position: absolute;
+	content: '';
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 3px;
+	background-color: var(--cyan-process);
+}
+
+.mobileNav .button {
+	background-color: var(--fire-opal);
+	color: var(--fg);
+}
+
+.mobileNav .button.small {
+	background-color: var(--fg-alt);
+	color: var(--bg) !important;
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--heliotrope-gray: #dbdbe6;
+		--purple-navy: #989abb;
+
+		--fire-opal: #ba3321;
+		--cyan-process: #397889;
+		--forest-green-crayola: #376848;
+
+		--bg: var(--magnolia);
+		--fg: var(--xiketic);
+		--bg-alt: var(--heliotrope-gray);
+		--fg-alt: var(--oxford-blue);
+	}
+
+	.subtile {
+		opacity: .6;
+		color: var(--fg);
+	}
+
+	blockquote { opacity: .8; }
+	.button { color: var(--bg) !important; }
+}
+