light mode css

8 files changed, 100 insertions, 2 deletions

diff --git a/components/tag.tsx b/components/tag.tsx
new file mode 100644
index 0000000..6cacb89
--- /dev/null
+++ b/components/tag.tsx
@@ -0,0 +1,24 @@
+import { CSSProperties } from 'react';
+
+export default function Tags(props: {
+	tags: Array<string>;
+}) {
+	return <div className="tags">
+		<span>Tags:</span>
+		{props.tags.map(tag => <Tag name={tag}/>)}
+	</div>
+}
+
+export function Tag(props: {
+	name: string;
+}) {
+	return <a className="tag" href={"/search?tag=" + props.name} style={{
+		"--tag-hue": props.name
+			.split("")
+			.map(char => char.charCodeAt(0))
+			.reduce((a, b) => a + b)
+			% 360
+	} as CSSProperties}>
+		{props.name}
+	</a>
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 435fa0e..bc96369 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -6,6 +6,7 @@ import '../styles/globals.css';
 import '../styles/navbar.css';
 import '../styles/button.css';
 import '../styles/image.css';
+import '../styles/tags.css';
 
 export default function Blog({ Component, pageProps }) {
 	return <div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 675d159..a08825a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,6 +3,7 @@ import Navbar from '../components/navbar';
 import Button from '../components/button';
 import Image from '../components/image';
 import Chapters from '../components/chapters';
+import Tags from '../components/tag';
 
 import ReactMarkdown from 'react-markdown';
 
@@ -12,6 +13,7 @@ export default function Home() {
 			<div className="titleWrapper">
 				<h1>Loek’s excruciatingly interesting blog</h1>
 				<p className="subtile">Loek heeft dit geschreven</p>
+				<Tags tags={[ "gert", "banaan", "komkommer" ]}/>
 			</div>
 			<div className="navAreaWrapper">
 				<div className="sticky">
diff --git a/styles/button.css b/styles/button.css
index ff5ecec..d3a44e3 100644
--- a/styles/button.css
+++ b/styles/button.css
@@ -23,3 +23,6 @@
 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/colors.css b/styles/colors.css
index afe051f..5cce897 100644
--- a/styles/colors.css
+++ b/styles/colors.css
@@ -11,3 +11,14 @@
 	--fg: var(--almond);
 }
 
+@media (prefers-color-scheme: light) {
+	:root {
+		--heliotrope-gray: #c9c9dd;
+		--purple-navy: #989abb;
+		--fire-opal: #ba3321;
+
+		--bg: var(--magnolia);
+		--fg: var(--xiketic);
+	}
+}
+
diff --git a/styles/globals.css b/styles/globals.css
index c1c4658..d0e0e4b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -64,3 +64,10 @@ h3 { font-size: 32px; }
 	background-color: var(--fg);
 }
 
+@media (prefers-color-scheme: light) {
+	.subtile {
+		opacity: .6;
+		color: var(--fg);
+	}
+}
+
diff --git a/styles/navbar.css b/styles/navbar.css
index bfd48c5..7e66aa3 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -1,6 +1,6 @@
 .navbarItem .inner {
 	background-color: var(--oxford-blue);
-	color: var(--almond);
+	color: var(--fg);
 
 	padding: 8px;
 	border-radius: 8px;
@@ -35,7 +35,7 @@
 .navbarItem.indentLevel0 { margin-bottom: 12px; }
 
 .navbarItem.active .inner,
-.navbarItem:hover .inner {
+.navbarItem:not(.chapter):hover .inner {
 	background-color: var(--heliotrope-gray);
 	color: var(--oxford-blue);
 }
@@ -79,3 +79,13 @@
 .navbarItem > div > svg {
 	vertical-align: super;
 }
+
+@media (prefers-color-scheme: light) {
+	.navbarItem .inner { background-color: var(--heliotrope-gray); }
+
+	.navbarItem.active .inner,
+	.navbarItem:not(.chapter):hover .inner {
+		color: var(--bg);
+		background-color: var(--fg);
+	}
+}
diff --git a/styles/tags.css b/styles/tags.css
new file mode 100644
index 0000000..95ce012
--- /dev/null
+++ b/styles/tags.css
@@ -0,0 +1,40 @@
+.titleWrapper .tags {
+	margin-top: 12px;
+}
+
+.titleWrapper .tags .tag {
+	--tag-color: hsl(var(--tag-hue), 75%, 70%);
+
+	padding: 4px 12px;
+	border-radius: 999px;
+
+	text-decoration: none;
+	color: var(--fg);
+
+	box-shadow: inset 0 0 0 2px var(--tag-color);
+
+	position: relative;
+	z-index: 1;
+}
+
+@media (prefers-color-scheme: light) {
+	.titleWrapper .tags .tag {
+		--tag-color: hsl(var(--tag-hue), 50%, 40%);
+	}
+}
+
+.titleWrapper .tags .tag::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: -1;
+
+	border-radius: 999px;
+	background-color: var(--tag-color);
+	opacity: .25;
+}
+
+.titleWrapper .tags > * { margin-right: 6px; }