new theme.css

11 files changed, 146 insertions, 142 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 119d817..a6c53d3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react';
 import '../styles/button.css';
 import '../styles/card.css';
 import '../styles/code.css';
-import '../styles/colors.css';
 import '../styles/globals.css';
 import '../styles/image.css';
 import '../styles/layout.css';
@@ -12,6 +11,7 @@ import '../styles/navbar.css';
 import '../styles/print.css';
 import '../styles/search.css';
 import '../styles/tags.css';
+import '../styles/theme.css';
 
 export default function Blog({ Component, pageProps }) {
 	var [dark, setDark] = useState(false);
diff --git a/readme.md b/readme.md
index 49caab0..4daca90 100644
--- a/readme.md
+++ b/readme.md
@@ -4,13 +4,13 @@ this is the source of my blog website
 
 ## important locations for stuff
 
-|**what**              | **location**        |
-|----------------------|---------------------|
-|**home page content** | `posts/index.md`    |
-|**posts**             | `posts/*.md`        |
-|**pinned posts**      | `pages/index.tsx`   |
-|**images**            | `public/img/*`      |
-|**rss feed info**     | `rss/base.xml`      |
-|**theme stuff**       | `styles/colors.css` |
+|**what**              | **location**       |
+|----------------------|--------------------|
+|**home page content** | `posts/index.md`   |
+|**posts**             | `posts/*.md`       |
+|**pinned posts**      | `pages/index.tsx`  |
+|**images**            | `public/img/*`     |
+|**rss feed info**     | `rss/base.xml`     |
+|**theme stuff**       | `styles/theme.css` |
 
 it's mit licensed so you can basically shamelessly copy it and i won't cry
diff --git a/styles/button.css b/styles/button.css
index d3a44e3..9efe41f 100644
--- a/styles/button.css
+++ b/styles/button.css
@@ -1,7 +1,4 @@
 .button {
-	background-color: var(--fire-opal);
-	color: var(--fg) !important;
-
 	padding: 12px;
 	min-width: 200px;
 	text-align: center;
@@ -23,6 +20,3 @@
 a.button { min-width: calc(200px - 2 * 12px); }
 a.button::after { display: none; }
 
-@media (prefers-color-scheme: light) {
-	.button { color: var(--bg) !important; }
-}
diff --git a/styles/card.css b/styles/card.css
index 0b3a20c..f49b40e 100644
--- a/styles/card.css
+++ b/styles/card.css
@@ -1,5 +1,5 @@
 .postCard {
-	background-color: var(--oxford-blue);
+	background-color: var(--bg-alt);
 	padding: 12px;
 	border-radius: 8px;
 
@@ -27,9 +27,3 @@
 	font-weight: 500;
 }
 
-@media (prefers-color-scheme: light) {
-	.postCard {
-		background-color: var(--heliotrope-gray);
-	}
-}
-
diff --git a/styles/code.css b/styles/code.css
index f43381d..dde7bdb 100644
--- a/styles/code.css
+++ b/styles/code.css
@@ -1,5 +1,5 @@
 pre {
-	background-color: var(--oxford-blue);
+	background-color: var(--bg-alt);
 	border-radius: 6px;
 	padding: 6px;
 }
diff --git a/styles/colors.css b/styles/colors.css
deleted file mode 100644
index 3cb13d5..0000000
--- a/styles/colors.css
+++ /dev/null
@@ -1,30 +0,0 @@
-: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);
-}
-
-@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);
-	}
-}
-
diff --git a/styles/globals.css b/styles/globals.css
index a1a58c5..5ccd71f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -5,33 +5,11 @@ html, body {
 	background-color: var(--bg);
 	color: var(--fg);
 
-	font-family: "Inter", sans-serif;
 	hyphens: auto;
 }
 
-code { font-family: "JetBrainsMono", monospace; }
-
-::selection {
-	background-color: var(--fire-opal);
-}
-
-h1, h2, h3 {
-	font-weight: 700;
-	margin: 0;
-}
-
-h1 { font-size: 64px; }
-h2 { font-size: 48px; }
-h3 { font-size: 32px; }
-
-.subtile {
-	font-style: italic;
-	opacity: .75;
-	color: var(--heliotrope-gray);
-}
-
 .contentWrapper a {
-	color: var(--fire-opal);
+	color: var(--links);
 	text-decoration: none;
 	position: relative;
 	display: inline-block;
@@ -41,10 +19,16 @@ h3 { font-size: 32px; }
 	content: '';
 	position: absolute;
 	left: 0;
-	right: 0;
 	bottom: 0;
 	height: 1px;
-	background-color: var(--fire-opal);
+	width: 0%;
+	transition: width;
+	transition-duration: 150ms;
+	background-color: var(--links);
+}
+
+.contentWrapper a:hover::after {
+	width: 100%;
 }
 
 ::-webkit-scrollbar {
@@ -52,30 +36,14 @@ h3 { font-size: 32px; }
 	height: 12px;
 }
 
-::-webkit-scrollbar-track {
-	background-color: var(--bg);
-}
-
 ::-webkit-scrollbar-thumb {
-	background-color: var(--purple-navy);
 	border-radius: 6px;
 	border: 4px solid var(--bg);
 }
 
-::-webkit-scrollbar-thumb:hover {
-	background-color: var(--fg);
-}
-
 :focus { outline: none; }
 
 li {
 	margin-bottom: 6px;
 }
 
-@media (prefers-color-scheme: light) {
-	.subtile {
-		opacity: .6;
-		color: var(--fg);
-	}
-}
-
diff --git a/styles/layout.css b/styles/layout.css
index aac9da4..706f5c9 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -80,34 +80,6 @@
 	display: none;
 }
 
-blockquote {
-	position: relative;
-	padding-left: 12px;
-	font-style: italic;
-	color: var(--heliotrope-gray);
-}
-
-blockquote:before {
-	position: absolute;
-	content: '';
-	top: 0;
-	bottom: 0;
-	left: 0;
-	width: 3px;
-	background-color: var(--cyan-process);
-}
-
-@media (prefers-color-scheme: light) {
-	blockquote {
-		color: var(--oxford-blue);
-		opacity: .8;
-	}
-}
-
-@media screen and (max-device-width: 550px) and (prefers-color-scheme: light) {
-	.navAreaWrapper { background-color: #dbdbe688 !important; }
-}
-
 @media screen and (max-device-width: 550px) {
 	.centeredPage {
 		grid-template-columns: 0 1fr;
@@ -132,8 +104,15 @@ blockquote:before {
 		opacity: 0;
 		pointer-events: none;
 		backdrop-filter: blur(50px);
+	}
+
+	.navAreaWrapper:before {
+		content: '';
+		position: absolute;
+		inset: 0px 0px 0px 0px;
 
-		background-color: #161B33a0;
+		background-color: var(--bg-alt);
+		opacity: .7;
 	}
 	
 	.navAreaWrapper.navVisible {
diff --git a/styles/navbar.css b/styles/navbar.css
index 9c697da..26d0b1d 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -1,5 +1,5 @@
 .navbarItem .inner {
-	background-color: var(--oxford-blue);
+	background-color: var(--bg-alt);
 	color: var(--fg);
 
 	padding: 8px;
@@ -36,8 +36,8 @@
 
 .navbarItem.active .inner,
 .navbarItem.link:hover .inner {
-	background-color: var(--heliotrope-gray);
-	color: var(--oxford-blue);
+	background-color: var(--fg-alt);
+	color: var(--bg-alt);
 }
 
 .navbarItem.chapter .inner,
@@ -53,7 +53,7 @@
 	margin: 0;
 	font-style: italic;
 	opacity: .8;
-	color: var(--heliotrope-gray)
+	color: var(--fg-alt)
 }
 .navbarItem.pinned * { cursor: default !important; }
 
@@ -88,18 +88,14 @@
 .navbarItem > div > svg { vertical-align: super; }
 
 @media (prefers-color-scheme: light) {
-	.navbarItem .inner { background-color: var(--heliotrope-gray); }
-	.mobileNav .button.small { background-color: var(--cyan-process) !important; }
-
 	.navbarItem.active .inner,
 	.navbarItem.link:hover .inner {
-		color: var(--bg);
 		background-color: var(--fg);
 	}
 
 	.navbarItem.pinned .inner .title {
 		opacity: .6;
-		color: var(--oxford-blue)
+		color: var(--fg-alt);
 	}
 }
 
@@ -115,7 +111,6 @@
 
 .mobileNav .button {
 	padding: 12px;
-	background-color: var(--fire-opal);
 	display: inline-block !important;
 	min-width: 0;
 	border-radius: 24px;
@@ -137,7 +132,6 @@
 
 .mobileNav .button.small {
 	padding: 6px;
-	background-color: var(--purple-navy);
 	margin-bottom: 12px;
 
 	opacity: 0;
diff --git a/styles/search.css b/styles/search.css
index 270f2f6..e424b6b 100644
--- a/styles/search.css
+++ b/styles/search.css
@@ -1,5 +1,5 @@
 .searchBar {
-	background-color: var(--heliotrope-gray);
+	background-color: var(--fg-alt);
 	border-radius: 8px;
 	padding: 12px;
 	margin-bottom: 24px;
@@ -16,9 +16,6 @@
 	padding: 14px 0;
 
 	vertical-align: top;
-
-	font-family: "Inter", sans-serif;
-	font-size: 16px;
 }
 
 .searchBar .input::placeholder {
@@ -34,7 +31,7 @@
 	line-height: 0;
 	min-width: unset;
 	background-color: var(--bg);
-	color: var(--heliotrope-gray) !important;
+	color: var(--fg-alt) !important;
 }
 
 .searchResults .post::after {
@@ -47,7 +44,7 @@
 
 	padding: 12px;
 	margin-bottom: 12px;
-	background-color: var(--oxford-blue);
+	background-color: var(--bg-alt);
 
 	color: var(--fg);
 }
@@ -66,7 +63,5 @@
 @media (prefers-color-scheme: light) {
 	.searchBar { background-color: var(--fg); }
 	.searchBar .button { color: var(--fg) !important; }
-
-	.searchResults .post { background-color: var(--heliotrope-gray); }
 }
 
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; }
+}
+