add dark mode

6 files changed, 28 insertions, 16 deletions

diff --git a/public/footer.css b/public/footer.css
index 7d0360f..93b6a7b 100644
--- a/public/footer.css
+++ b/public/footer.css
@@ -1,8 +1,12 @@
-footer { margin-top: 96px; }
+footer, :root { background-color: var(--bg-alt); }
+footer {
+	margin-top: 96px;
+	padding: 24px 0;
+}
+footer .inner { margin: 0 auto; }
 
 footer .flex {
 	display: flex;
 	justify-content: space-between;
 }
 
-footer .inner { margin: 20px auto; }
diff --git a/public/global.css b/public/global.css
index cbe8d1c..e3fcea0 100644
--- a/public/global.css
+++ b/public/global.css
@@ -9,11 +9,21 @@
 	--fg-alt: #111111;
 }
 
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg: #000000;
+		--bg-alt: #222222;
+		--fg: #dddddd;
+		--fg-alt: #ffffff;
+	}
+}
+
 body, html {
 	background-color: var(--bg);
 	color: var(--fg);
 	margin: 0;
 	font-family: "Inter", "Neue Haas Grotesk", "Helvetica", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;
+	color-scheme: light dark;
 }
 
 .limwidth {
diff --git a/public/head.php b/public/head.php
index eddf94b..c1645ae 100644
--- a/public/head.php
+++ b/public/head.php
@@ -2,4 +2,3 @@
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1'>
 <link rel='stylesheet' type='text/css' media='screen' href='global.css'>
-<link rel='stylesheet' type='text/css' media='screen' href='mdi.css'>
diff --git a/public/mdi.css b/public/mdi.css
deleted file mode 100644
index 04060b7..0000000
--- a/public/mdi.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.mdi {
-	display: inline-block;
-	width: 24px;
-	height: 24px;
-}
-
-.mdi.cart-outline { background-image: url("img/cart-outline.svg"); }
-
diff --git a/public/nav.css b/public/nav.css
index b1f5666..11815c1 100644
--- a/public/nav.css
+++ b/public/nav.css
@@ -11,5 +11,14 @@ nav .site-icon {
 	display: inline-block;
 }
 
-nav .site-icon .icon { margin: 12px 2px; }
 nav .site-icon .label { font-weight: 500; }
+nav .site-icon .icon {
+	display: inline-block;
+	line-height: 0;
+	margin: 12px 2px;
+}
+
+nav .site-icon .icon svg {
+	width: 24px;
+	height: 24px;
+}
diff --git a/public/navbar.php b/public/navbar.php
index fca4663..a157c76 100644
--- a/public/navbar.php
+++ b/public/navbar.php
@@ -2,7 +2,7 @@
 <nav>
 	<div class="limwidth">
 		<a href="/" class="site-icon nolinkstyle">
-			<span class="icon mdi cart-outline"></span>
+			<span class="icon"><?php include "img/cart-outline.svg" ?></span>
 			<span class="label">winkel</span>
 		</a>
 		<a href="/products.php" class="nolinkstyle"><span>producten</span></a>
@@ -10,9 +10,7 @@
 		<a href="/cart.php" class="nolinkstyle">
 			<?php 
 				echo "<span>mand";
-				if ($logged_in) {
-					echo " (".$cart_count.")";
-				}
+				if ($logged_in) echo " (".$cart_count.")";
 				echo "</span>";
 			?>
 		</a>