From 8ab8170fea58115012d11898ee0c7feb0128bacc Mon Sep 17 00:00:00 2001
From: j4y <36337+j4y@users.noreply.github.com>
Date: Thu, 1 Jan 2026 15:36:00 -0500
Subject: [PATCH 1/2] refactor(sass): migrate to @use modules and extract
 vars/mixins

Updates theme to modern Sass module system to resolve build errors caused
by deprecated @import behavior and missing variable/mixin scope.
---
 _sass/_base.scss                |  9 +++++--
 _sass/_layout.scss              |  5 +++-
 _sass/_mixins.scss              |  6 +++++
 _sass/_syntax-highlighting.scss |  3 ++-
 _sass/_variables.scss           | 22 +++++++++++++++
 css/main.scss                   | 47 +++++----------------------------
 6 files changed, 47 insertions(+), 45 deletions(-)
 create mode 100644 _sass/_mixins.scss
 create mode 100644 _sass/_variables.scss

diff --git a/_sass/_base.scss b/_sass/_base.scss
index b4e4328..5805aed 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1,3 +1,9 @@
+@use "sass:color";
+
+@use "mixins" as *;
+@use "variables" as *;
+
+
 /**
  * Reset some basic elements
  */
@@ -9,7 +15,6 @@ dl, dd, ol, ul, figure {
 }
 
 
-
 /**
  * Basic styling
  */
@@ -160,7 +165,7 @@ pre {
     margin-left: auto;
     padding-right: $spacing-unit;
     padding-left: $spacing-unit;
-    @extend %clearfix;
+    @extend %clearfix !optional;
 
     @include media-query($on-laptop) {
         max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 04b4bb9..fa41432 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -1,3 +1,6 @@
+@use "variables" as *;
+@use "mixins" as *;
+
 /**
  * Site header
  */
@@ -111,7 +114,7 @@
     font-size: 15px;
     color: $grey-color;
     margin-left: calc($spacing-unit / 2);
-    @extend %clearfix;
+    @extend %clearfix !optional;
 }
 
 .footer-col {
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
new file mode 100644
index 0000000..e4439d7
--- /dev/null
+++ b/_sass/_mixins.scss
@@ -0,0 +1,6 @@
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+
diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss
index e36627d..3478311 100644
--- a/_sass/_syntax-highlighting.scss
+++ b/_sass/_syntax-highlighting.scss
@@ -3,7 +3,8 @@
  */
 .highlight {
     background: #fff;
-    @extend %vertical-rhythm;
+    @extend %vertical-rhythm !optional;
+
 
     .c     { color: #998; font-style: italic } // Comment
     .err   { color: #a61717; background-color: #e3d2d2 } // Error
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
new file mode 100644
index 0000000..f98fd22
--- /dev/null
+++ b/_sass/_variables.scss
@@ -0,0 +1,22 @@
+@use "sass:color";
+
+$base-font-family: Helvetica, Arial, sans-serif;
+$base-font-size: 16px;
+$small-font-size: $base-font-size * 0.875;
+$base-line-height: 1.5;
+
+$spacing-unit: 30px;
+
+$text-color: #111;
+$background-color: #fdfdfd;
+$brand-color: #2a7ae2;
+
+$grey-color: #828282;
+$grey-color-light: color.scale($grey-color, $lightness: 40%);
+$grey-color-dark: color.scale($grey-color, $lightness: -25%);
+
+$content-width: 800px;
+
+$on-palm: 600px;
+$on-laptop: 800px;
+
diff --git a/css/main.scss b/css/main.scss
index 86c857a..bdf9c9f 100755
--- a/css/main.scss
+++ b/css/main.scss
@@ -3,47 +3,12 @@
 sitemap_exclude: true
 ---
 
+
 @charset "utf-8";
 @use "sass:color";
+@use "variables" as *;
+@use "mixins" as *;
+@use "base" as *;
+@use "layout" as *;
+@use "syntax-highlighting" as *;
 
-// Variables
-$base-font-family: Helvetica, Arial, sans-serif;
-$base-font-size: 16px;
-$small-font-size: $base-font-size * 0.875;
-$base-line-height: 1.5;
-
-$spacing-unit: 30px;
-
-$text-color: #111;
-$background-color: #fdfdfd;
-$brand-color: #2a7ae2;
-
-$grey-color: #828282;
-$grey-color-light: color.scale($grey-color, $lightness: 40%);
-$grey-color-dark: color.scale($grey-color, $lightness: -25%);
-
-// Width of the content area
-$content-width: 800px;
-
-$on-palm: 600px;
-$on-laptop: 800px;
-
-// Media query mixin
-// Usage:
-// @include media-query($on-palm) {
-//   .wrapper {
-//     padding-right: $spacing-unit / 2;
-//     padding-left: $spacing-unit / 2;
-//   }
-// }
-@mixin media-query($device) {
-  @media screen and (max-width: $device) {
-    @content;
-  }
-}
-
-// Import partials from `sass_dir` (defaults to `_sass`)
-@import
-  "base",
-  "layout",
-  "syntax-highlighting";

From 78b6a9244cd15f10e3605b1243bf49c27ef8f3da Mon Sep 17 00:00:00 2001
From: j4y <36337+j4y@users.noreply.github.com>
Date: Thu, 1 Jan 2026 15:36:51 -0500
Subject: [PATCH 2/2] chore(vscode): add debug and run tasks for Jekyll
 development

---
 .vscode/launch.json | 13 +++++++++++++
 .vscode/tasks.json  | 12 ++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 .vscode/launch.json
 create mode 100644 .vscode/tasks.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..995e763
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,13 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Jekyll",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "url": "http://127.0.0.1:4000",
+      "webRoot": "${workspaceFolder}",
+      "preLaunchTask": "Run Jekyll"
+    }
+  ]
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000..ec9a14a
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,12 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Run Jekyll",
+      "type": "shell",
+      "command": "mise exec -- bundle exec jekyll serve",
+      "isBackground": true,
+      "problemMatcher": []
+    }
+  ]
+}