From 933f71a3035909a0fdbe1d9de8d06565b95d8796 Mon Sep 17 00:00:00 2001
From: Luc Perkins <lucperkins@gmail.com>
Date: Thu, 12 Jun 2025 15:16:36 -0700
Subject: [PATCH 1/2] Add initial responsiveness mixins

---
 src/sass/_mixins.scss | 23 +++++++++++++++++++++++
 src/sass/_tokens.scss | 10 ++++++++++
 2 files changed, 33 insertions(+)

diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss
index e9318c9..9eb2310 100644
--- a/src/sass/_mixins.scss
+++ b/src/sass/_mixins.scss
@@ -51,3 +51,26 @@
     @include svg-icon;
   }
 }
+
+///  Responsiveness
+
+// Between a minimum and maximum breakpoint
+@mixin between-breakpoints($min, $max) {
+  @media (min-width: map.get(tokens.$breakpoints, $min)) and (max-width: (map.get(tokens.$breakpoints, $max) - 1px)) {
+    @content;
+  }
+}
+
+// Apply styling past a specific breakpoint
+@mixin from-breakpoint($w) {
+  @media (min-width: map.get(tokens.$breakpoints, $w)) {
+    @content;
+  }
+}
+
+// Helper for constructing to-* mixins
+@mixin to-breakpoint($w) {
+  @media (max-width: (map.get(tokens.$breakpoints, $w) - 1px)) {
+    @content;
+  }
+}
diff --git a/src/sass/_tokens.scss b/src/sass/_tokens.scss
index 5fc5b2c..b6273d7 100644
--- a/src/sass/_tokens.scss
+++ b/src/sass/_tokens.scss
@@ -80,3 +80,13 @@ $duration: (
 $spacing: (
   xs: 0.25rem,
 );
+
+// Responsiveness and sizing
+$breakpoints: (
+  zero: 0px,
+  sm: 640px,
+  base: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  "2xl": 1536px,
+);

From b6f97feeb7260865fc66c961deb1e01d1db066b4 Mon Sep 17 00:00:00 2001
From: Luc Perkins <lucperkins@gmail.com>
Date: Thu, 12 Jun 2025 15:19:43 -0700
Subject: [PATCH 2/2] Add link to Tailwind docs

---
 src/sass/_tokens.scss | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/sass/_tokens.scss b/src/sass/_tokens.scss
index b6273d7..46fbbf9 100644
--- a/src/sass/_tokens.scss
+++ b/src/sass/_tokens.scss
@@ -81,12 +81,13 @@ $spacing: (
   xs: 0.25rem,
 );
 
-// Responsiveness and sizing
+// Responsiveness
+// These values are borrowed from Tailwind: https://tailwindcss.com/docs/responsive-design#overview
 $breakpoints: (
-  zero: 0px,
-  sm: 640px,
-  base: 768px,
-  lg: 1024px,
-  xl: 1280px,
-  "2xl": 1536px,
+  zero: 0,
+  sm: 40rem,
+  base: 48rem,
+  lg: 64rem,
+  xl: 80rem,
+  "2xl": 96rem,
 );