From deb85f56334634ed301f8d8f5f628818199a1fe6 Mon Sep 17 00:00:00 2001
From: Nathan Steel <aney.login+rpi3@gmail.com>
Date: Sun, 18 May 2025 17:32:47 +0100
Subject: [PATCH] Add color-scheme and min-width media mixins

Also update media vars to respectable numbers rather than 0s
---
 scss/utilities/_mixins.scss    | 14 ++++++++++++++
 scss/utilities/_variables.scss | 10 +++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/scss/utilities/_mixins.scss b/scss/utilities/_mixins.scss
index c574273..3164fc0 100644
--- a/scss/utilities/_mixins.scss
+++ b/scss/utilities/_mixins.scss
@@ -2,3 +2,17 @@
     margin: 0;
     padding: 0;
 }
+
+// @include color-scheme() {}
+@mixin color-scheme($value: dark) {
+    @media (prefers-color-scheme: $value) {
+        @content;
+    }
+}
+
+// @include media($media-lg) {}
+@mixin media($value: $media-md) {
+    @media (min-width: $value) {
+        @content;
+    }
+}
diff --git a/scss/utilities/_variables.scss b/scss/utilities/_variables.scss
index 1b830da..3e2d7f5 100644
--- a/scss/utilities/_variables.scss
+++ b/scss/utilities/_variables.scss
@@ -1,9 +1,9 @@
 // Variables
-$media-xs: 0;
-$media-sm: 0;
-$media-md: 0;
-$media-lg: 0;
-$media-xl: 0;
+$media-xs: 360px;
+$media-sm: 540px;
+$media-md: 768px;
+$media-lg: 900px;
+$media-xl: 1200px;
 
 $active-brightness: .85;
 $hover-brightness: 1.2;