From c57ebf3acaccc70f4ac01bb677ea08ff4092885e Mon Sep 17 00:00:00 2001
From: Chris Buckley <chris@cmbuckley.co.uk>
Date: Mon, 23 Mar 2026 00:07:48 +0000
Subject: [PATCH 1/6] Properly use _data folder for global config

---
 _ci/fingerprints.sh         |  2 --
 _data/global/navigation.yml | 13 ++++++++++++-
 _data/global/social.yml     | 14 +++++++++++++-
 _includes/header.html       | 20 +-------------------
 _includes/navigation.yml    | 12 ------------
 _includes/social.html       | 14 ++------------
 _includes/social.yml        | 13 -------------
 _includes/v.html            |  3 +--
 8 files changed, 29 insertions(+), 62 deletions(-)
 mode change 120000 => 100644 _data/global/navigation.yml
 mode change 120000 => 100644 _data/global/social.yml
 delete mode 100644 _includes/navigation.yml
 delete mode 100644 _includes/social.yml

diff --git a/_ci/fingerprints.sh b/_ci/fingerprints.sh
index 5edbeb40..b75a09e2 100755
--- a/_ci/fingerprints.sh
+++ b/_ci/fingerprints.sh
@@ -20,6 +20,4 @@ for data in "${files[@]}"; do
     echo "$id: $(md5sum "_site/$file" | cut -c1-8)" >> $fingerprints
 done
 
-sed -i'' "s/fingerprints = '[^']*'/fingerprints = '$(grep -vF . $fingerprints | tr '\n' ',' | sed 's/,$//')'/" _includes/v.html
-
 git add $fingerprints _includes/v.html
diff --git a/_data/global/navigation.yml b/_data/global/navigation.yml
deleted file mode 120000
index 41a95ac4..00000000
--- a/_data/global/navigation.yml
+++ /dev/null
@@ -1 +0,0 @@
-../../_includes/navigation.yml
\ No newline at end of file
diff --git a/_data/global/navigation.yml b/_data/global/navigation.yml
new file mode 100644
index 00000000..66282d24
--- /dev/null
+++ b/_data/global/navigation.yml
@@ -0,0 +1,12 @@
+ - title: Home
+   url: /
+ - title: CV
+   url: /cv/
+ - title: Contact
+   url: /contact/
+ - title: Blog
+   url: /blog/
+ - title: Interests
+   url: /interests/
+ - title: Projects
+   url: /projects/
diff --git a/_data/global/social.yml b/_data/global/social.yml
deleted file mode 120000
index 38f3ef14..00000000
--- a/_data/global/social.yml
+++ /dev/null
@@ -1 +0,0 @@
-../../_includes/social.yml
\ No newline at end of file
diff --git a/_data/global/social.yml b/_data/global/social.yml
new file mode 100644
index 00000000..d305dcdd
--- /dev/null
+++ b/_data/global/social.yml
@@ -0,0 +1,13 @@
+pgp:       2A57 C8E4 6506 FABA
+keybase:   cmbuckley
+hackerone: cmbuckley
+github:    cmbuckley
+linkedin:  cmbuckley
+email:     chris@cmbuckley.co.uk
+x:         _cmbuckley
+facebook:  cmbuckley
+fbid:      61201039
+instagram: c.m.buckley
+amazon:    https://bux.re/amzn
+mastodon:  cmbuckley@mastodon.social
+bsky:      cmbuckley.co.uk
diff --git a/_includes/header.html b/_includes/header.html
index 8e6a36a7..5a0c22fe 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -7,30 +7,12 @@
         </{{ tag }}>
         <nav class="nav-collapse" aria-label="Menu">
             <ul class="list--inline">
-              {%- if site.data.global.navigation -%}
-                {%- assign navigation = site.data.global.navigation -%}
-              {%- else -%}
-                {%- assign navigation = '' | split: ',' -%}
-
-                {%- capture nav_data -%}
-                {%- include navigation.yml -%}
-                {%- endcapture -%}
-
-                {%- assign nav_array = nav_data | split: ' - ' %}
-                {%- for nav_item in nav_array -%}
-                  {%- if nav_item != '' -%}
-                    {%- assign nav_cleaned = nav_item | strip | replace: 'title: ', '' | replace: '   url: ', '' -%}
-                    {%- assign navigation = navigation | push: nav_cleaned -%}
-                  {%- endif -%}
-                {%- endfor -%}
-              {%- endif -%}
-
               {%- if layout.nav_current or site.nav_current -%}
                 {%- assign url_prefix = layout.nav_current | default: site.nav_current | prepend: '/' -%}
               {%- endif -%}
               {%- assign page_url = page.url | relative_url | prepend: url_prefix -%}
 
-              {%- for link in navigation -%}
+              {%- for link in site.data.global.navigation -%}
                 {%- assign current = false -%}
                 {%- if link.url -%}
                   {%- assign title = link.title -%}
diff --git a/_includes/navigation.yml b/_includes/navigation.yml
deleted file mode 100644
index 66282d24..00000000
--- a/_includes/navigation.yml
+++ /dev/null
@@ -1,12 +0,0 @@
- - title: Home
-   url: /
- - title: CV
-   url: /cv/
- - title: Contact
-   url: /contact/
- - title: Blog
-   url: /blog/
- - title: Interests
-   url: /interests/
- - title: Projects
-   url: /projects/
diff --git a/_includes/social.html b/_includes/social.html
index c9e66a92..97457067 100644
--- a/_includes/social.html
+++ b/_includes/social.html
@@ -1,12 +1,2 @@
-{%- if site.data.global.social -%}
-  {{ site.data.global.social[include.id] }}
-{%- else -%}
-  {%- capture social -%}
-  {%- include social.yml -%}
-  {%- endcapture -%}
-  {%- capture newline %}
-{% endcapture -%}
-
-  {%- assign item = social | split: newline | where_exp: 'i', 'i contains include.id' | first -%}
-  {{ item | split: ': ' | last | strip }}
-{%- endif -%}
+{{ site.data.global.social[include.id] }}
+{%- comment -%}avoid trailing newline{%- endcomment -%}
diff --git a/_includes/social.yml b/_includes/social.yml
deleted file mode 100644
index d305dcdd..00000000
--- a/_includes/social.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-pgp:       2A57 C8E4 6506 FABA
-keybase:   cmbuckley
-hackerone: cmbuckley
-github:    cmbuckley
-linkedin:  cmbuckley
-email:     chris@cmbuckley.co.uk
-x:         _cmbuckley
-facebook:  cmbuckley
-fbid:      61201039
-instagram: c.m.buckley
-amazon:    https://bux.re/amzn
-mastodon:  cmbuckley@mastodon.social
-bsky:      cmbuckley.co.uk
diff --git a/_includes/v.html b/_includes/v.html
index a508634e..733eeaec 100644
--- a/_includes/v.html
+++ b/_includes/v.html
@@ -1,11 +1,10 @@
 {%- unless site.suppress_fingerprints -%}
   ?v=
 
-  {%- assign fingerprints = 'icons: 715715b9,maths: 5414f235,scripts: 5220ed99,search: b74b56ab,style: 1fcbb8ed' | split: ',' -%}
   {%- assign found = false -%}
 
   {%- unless jekyll.environment == 'development' -%}
-    {%- for fingerprint in fingerprints -%}
+    {%- for fingerprint in site.data.fingerprints -%}
       {%- assign info = fingerprint | split: ': ' -%}
       {%- if info[0] == include.id -%}
         {%- assign found = true -%}

From 4e729c44d22f063f32b3090a603bb8045335afdc Mon Sep 17 00:00:00 2001
From: Chris Buckley <chris@cmbuckley.co.uk>
Date: Mon, 23 Mar 2026 01:15:32 +0000
Subject: [PATCH 2/6] Upgrade to Jekyll 4.4

Removes some default excludes and automatically installed extensions
See https://jekyllrb.com/docs/upgrading/3-to-4/
---
 Gemfile     | 3 +--
 _config.yml | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/Gemfile b/Gemfile
index 1faa661d..8d2d446d 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,7 +1,7 @@
 source 'http://rubygems.org'
 ruby "~> 3.3"
 
-gem 'jekyll', '~> 3.10.0'
+gem 'jekyll', '~> 4.4'
 
 # liquid former stdlibs
 gem 'base64'
@@ -16,7 +16,6 @@ group :jekyll_plugins do
   gem 'jekyll-redirect-from'
   gem 'jekyll-relative-links'
   gem 'jekyll-titles-from-headings'
-  gem 'kramdown-parser-gfm'
 end
 
 group :development, :test do
diff --git a/_config.yml b/_config.yml
index 72febf96..f68e94a2 100755
--- a/_config.yml
+++ b/_config.yml
@@ -20,7 +20,6 @@ include:
 
 exclude:
   - CNAME
-  - Gemfile
   - LICENCE
   - LICENCE-CODE
   - README.md
@@ -29,7 +28,6 @@ exclude:
   - package.json
   - staticman.yml
   - vendor
-  - node_modules
 
 plugins:
   - jekyll-github-metadata

From efb2404d20729d87e1a3fa5e12668fa0069aeb77 Mon Sep 17 00:00:00 2001
From: Chris Buckley <chris@cmbuckley.co.uk>
Date: Tue, 24 Mar 2026 01:20:44 +0000
Subject: [PATCH 3/6] Sass 1.80 udpates

Mainly updates to config and module scoping
---
 _data/fingerprints.yml          |  2 +-
 _sass/_config.scss              | 74 ++++++++++++++-------------------
 _sass/modules/_buttons.scss     |  4 +-
 _sass/modules/_forms.scss       | 12 +++---
 _sass/partials/_font.scss       | 12 +++---
 _sass/partials/_typography.scss |  4 +-
 6 files changed, 52 insertions(+), 56 deletions(-)

diff --git a/_data/fingerprints.yml b/_data/fingerprints.yml
index 1d24f20a..4802517f 100644
--- a/_data/fingerprints.yml
+++ b/_data/fingerprints.yml
@@ -3,4 +3,4 @@ icons: 715715b9
 maths: 5414f235
 scripts: 5220ed99
 search: b74b56ab
-style: 1fcbb8ed
+style: 94a85e85
diff --git a/_sass/_config.scss b/_sass/_config.scss
index 285e6d64..d0cceccb 100755
--- a/_sass/_config.scss
+++ b/_sass/_config.scss
@@ -1,3 +1,7 @@
+@use "sass:color";
+@use "sass:map";
+@use "sass:meta";
+
 /***************
 COLOR VARIABLES
 ***************/
@@ -47,12 +51,12 @@ $theme: (
         caption: $grey,
 
         btn-fg: $white,
-        btn-fg-hover: darken($white, 20%),
+        btn-fg-hover: color.scale($white, $lightness: -20%),
         overlay-fg: $white,
         overlay-shadow: black,
-        nav-active: change-color($white, $alpha: 0.4),
-        nav-separator: lighten($primary-color, 5%),
-        separator: darken($white, 15%),
+        nav-active: color.change($white, $alpha: 0.4),
+        nav-separator: color.scale($primary-color, $lightness: 5%),
+        separator: color.scale($white, $lightness: -15%),
 
         input-bg: #e6e6e6,
         input-fg: #333,
@@ -60,8 +64,8 @@ $theme: (
 
         comments-bg: $offwhite,
         comments-border: $tertiary-color,
-        comments-target: scale-color($primary-color, $lightness: 75%),
-        comments-author-bg: scale-color($primary-color, $lightness: 95%),
+        comments-target: color.scale($primary-color, $lightness: 75%),
+        comments-author-bg: color.scale($primary-color, $lightness: 95%),
         comments-author-meta: $grey,
 
         table-bg-alt: $offwhite,
@@ -90,13 +94,13 @@ $theme: (
     ),
     dark: (
         bg: $blackish,
-        fg: darken($offwhite, 15%),
-        meta: lighten($silver, 10%),
+        fg: color.scale($offwhite, $lightness: -15%),
+        meta: color.scale($silver, $lightness: 10%),
         caption: #a1a1a1,
 
         btn-fg: $blackish,
         btn-fg-hover: black,
-        nav-separator: darken($dark-primary-color, 5%),
+        nav-separator: color.scale($dark-primary-color, $lightness: -5%),
 
         input-bg: #333,
         input-fg: #999,
@@ -104,12 +108,12 @@ $theme: (
 
         comments-bg: #191a1c,
         comments-border: $dark-tertiary-color,
-        comments-target: scale-color($dark-primary-color, $lightness: 75%),
-        comments-author-bg: scale-color($dark-primary-color, $lightness: -80%),
-        comments-author-meta: lighten($silver, 10%),
+        comments-target: color.scale($dark-primary-color, $lightness: 75%),
+        comments-author-bg: color.scale($dark-primary-color, $lightness: -80%),
+        comments-author-meta: color.scale($silver, $lightness: 10%),
 
         table-bg-alt: #191a1c,
-        mark: change-color($dark-primary-color, $alpha: 0.3),
+        mark: color.change($dark-primary-color, $alpha: 0.3),
         kbd-border: #555,
         kbd-shadow: (0 1px 1px rgba(127, 127, 127, 0.4),
                     0 1px 0 0 rgba(255, 255, 255, 0.3) inset),
@@ -120,42 +124,26 @@ $theme: (
     ),
 );
 
-// recursive merge from https://pentzzsolt.medium.com/f91637f87b2e
-@function map-deep-merge($map1, $map2) {
-	$result: $map1;
-
-	@each $key, $value in $map2 {
-		@if (not map-has-key($result, $key)) or (type-of(map-get($result, $key)) != type-of($value)) or (not (type-of(map-get($result, $key)) == map and type-of($value) == map)) {
-			$result: map-merge($result, ($key: $value));
-		}
-		@else {
-			$result: map-merge($result, ($key: map-deep-merge(map-get($result, $key), $value)));
-		}
-	}
-
-	@return $result;
-}
-
 @each $message-type in 'error', 'warning', 'info', 'ok' {
-    $default-theme: map-get($theme, default);
+    $default-theme: map.get($theme, default);
 
-    $theme: map-deep-merge($theme, (default: (
-        #{$message-type}-bg: change-color(map-get($default-theme, $message-type), $alpha: 0.08),
-        #{$message-type}-highlight: change-color(map-get($default-theme, $message-type), $alpha: 0.5),
-        #{$message-type}-fg-hover: darken(map-get($default-theme, $message-type), 15%),
+    $theme: map.deep-merge($theme, (default: (
+        #{$message-type}-bg: color.change(map.get($default-theme, $message-type), $alpha: 0.08),
+        #{$message-type}-highlight: color.change(map.get($default-theme, $message-type), $alpha: 0.5),
+        #{$message-type}-fg-hover: color.scale(map.get($default-theme, $message-type), $lightness: -15%),
     )));
 }
 
 @each $button-type in 'primary', 'secondary', 'tertiary' {
-    $default-theme: map-get($theme, default);
-    $dark-theme: map-get($theme, dark);
+    $default-theme: map.get($theme, default);
+    $dark-theme: map.get($theme, dark);
 
-    $theme: map-deep-merge($theme, (default: (
-        #{$button-type}-fg: darken(map-get($default-theme, $button-type), 10%),
-        #{$button-type}-hover: darken(map-get($default-theme, $button-type), 10%),
+    $theme: map.deep-merge($theme, (default: (
+        #{$button-type}-fg: color.scale(map.get($default-theme, $button-type), $lightness: -10%),
+        #{$button-type}-hover: color.scale(map.get($default-theme, $button-type), $lightness: -10%),
     ), dark: (
-        #{$button-type}-fg: lighten(map-get($dark-theme, $button-type), 10%),
-        #{$button-type}-hover: lighten(map-get($dark-theme, $button-type), 10%),
+        #{$button-type}-fg: color.scale(map.get($dark-theme, $button-type), $lightness: 10%),
+        #{$button-type}-hover: color.scale(map.get($dark-theme, $button-type), $lightness: 10%),
     )));
 }
 
@@ -183,14 +171,14 @@ ROOT VARIABLES
 ***************/
 
 :root {
-    @each $key, $value in map-get($theme, default) {
+    @each $key, $value in map.get($theme, default) {
         --color-#{$key}: #{$value};
     }
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        @each $key, $value in map-get($theme, dark) {
+        @each $key, $value in map.get($theme, dark) {
             --color-#{$key}: #{$value};
         }
     }
diff --git a/_sass/modules/_buttons.scss b/_sass/modules/_buttons.scss
index 2cf8ca4a..f3c2697d 100755
--- a/_sass/modules/_buttons.scss
+++ b/_sass/modules/_buttons.scss
@@ -1,3 +1,5 @@
+@use "../config";
+
 /***************
 BUTTON DEFAULTS
 ***************/
@@ -6,7 +8,7 @@ BUTTON DEFAULTS
   background-color: var(--color-primary);
   display: inline-block;
   position: relative;
-  font-family: $serif;
+  font-family: config.$serif;
   text-align: center;
   text-decoration: none;
   color: var(--color-btn-fg);
diff --git a/_sass/modules/_forms.scss b/_sass/modules/_forms.scss
index 08d6fa5b..27a19ed4 100755
--- a/_sass/modules/_forms.scss
+++ b/_sass/modules/_forms.scss
@@ -1,3 +1,5 @@
+@use "../config";
+
 /***************
 FORM STYLING
 ***************/
@@ -15,7 +17,7 @@ input[type=number],
 input[type=search],
 textarea {
     font-size: 18px;
-    font-family: $serif;
+    font-family: config.$serif;
     color: var(--color-input-fg);
     background: var(--color-input-bg);
     border: 1px solid var(--color-input-bg);
@@ -23,7 +25,7 @@ textarea {
     -webkit-appearance: none;
     padding: 5px;
     outline: none;
-    height: $line-height;
+    height: config.$line-height;
     width: 300px;
     margin-bottom: .5rem;
 
@@ -40,16 +42,16 @@ textarea {
     }
 }
 textarea {
-    height: $line-height * 3;
+    height: config.$line-height * 3;
 }
 
 form {
     @extend %screen-only;
-    margin-bottom: $padding;
+    margin-bottom: config.$padding;
 
     // Wrap each form input/element in a field div
     .field {
-        margin-bottom: $padding / 2;
+        margin-bottom: calc(config.$padding / 2);
     }
 
     // Notes go under the input fields
diff --git a/_sass/partials/_font.scss b/_sass/partials/_font.scss
index a301e9d9..56c66c16 100644
--- a/_sass/partials/_font.scss
+++ b/_sass/partials/_font.scss
@@ -1,3 +1,5 @@
+@use "../config";
+
 // Text Selection Styling
 ::-moz-selection {
     background: var(--color-primary);
@@ -13,7 +15,7 @@
 body {
     background-color: var(--color-bg);
     color: var(--color-fg);
-    font-family: $serif;
+    font-family: config.$serif;
 }
 
 figure {
@@ -78,7 +80,7 @@ MENU STYLING
 }
 
 .nav-toggle {
-    font-family: $serif;
+    font-family: config.$serif;
     color: var(--color-btn-fg);
     background-color: var(--color-primary);
 
@@ -98,7 +100,7 @@ HEADER STYLING
     background-color: var(--color-primary);
 
     .logo {
-        font-family: $sans-serif;
+        font-family: config.$sans-serif;
         font-weight: 800;
         text-transform: uppercase;
 
@@ -139,7 +141,7 @@ POST STYLING
 }
 
 .date, .meta {
-    font-family: $sans-serif;
+    font-family: config.$sans-serif;
 }
 
 .img--shadow {
@@ -182,7 +184,7 @@ POST NAV STYLING
 ***************/
 .post__nav {
     .prev, .next {
-        font-family: $sans-serif;
+        font-family: config.$sans-serif;
         font-weight: 800;
 
         &.image {
diff --git a/_sass/partials/_typography.scss b/_sass/partials/_typography.scss
index 4304cef6..ab937bc8 100755
--- a/_sass/partials/_typography.scss
+++ b/_sass/partials/_typography.scss
@@ -3,6 +3,8 @@ A MORE MODERN SCALE
 http://typecast.com/blog/a-more-modern-scale-for-web-typography
 ***************/
 
+@use "../config";
+
 body {
   .intro {
     font-size: 1.25em;
@@ -12,7 +14,7 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
   margin: .5rem 0 1.5rem;
-  font-family: $sans-serif;
+  font-family: config.$sans-serif;
 }
 
 // Headings

From 413bc8b3d29a66b74432031c03ce87e1972b7f48 Mon Sep 17 00:00:00 2001
From: Chris Buckley <chris@cmbuckley.co.uk>
Date: Wed, 25 Mar 2026 01:16:55 +0000
Subject: [PATCH 4/6] Big Sass refactor

Move away from old @import / global structure. Split out breakpoints to
dedicated modules with a mixin for media queries.
---
 _data/fingerprints.yml                     |   2 +-
 _sass/_custom.scss                         |  33 --
 _sass/breakpoints/_1200up.scss             |  11 -
 _sass/breakpoints/_600up.scss              |  73 ---
 _sass/breakpoints/_900up.scss              | 247 ----------
 _sass/breakpoints/_layout.scss             |   6 -
 _sass/breakpoints/_mobileup.scss           | 540 ---------------------
 _sass/modules/_footer.scss                 |  79 +++
 _sass/modules/_forms.scss                  |  28 +-
 _sass/modules/_globals.scss                |  71 +++
 _sass/modules/_header.scss                 |  53 ++
 _sass/modules/_layout.scss                 | 100 ++++
 _sass/modules/_lists.scss                  |  41 ++
 _sass/modules/_media.scss                  |  57 +++
 _sass/modules/_menu.scss                   | 120 +++++
 _sass/modules/_pagination.scss             |  21 +
 _sass/modules/_posts.scss                  | 306 ++++++++++++
 _sass/modules/_syntax.scss                 |  11 +
 _sass/partials/_device.scss                |  52 ++
 _sass/partials/_font.scss                  |  10 +
 _sass/{modules => partials}/_messages.scss |   0
 _sass/partials/_mixins.scss                |  10 +-
 assets/css/style.scss                      |  44 +-
 23 files changed, 975 insertions(+), 940 deletions(-)
 delete mode 100644 _sass/_custom.scss
 delete mode 100644 _sass/breakpoints/_1200up.scss
 delete mode 100755 _sass/breakpoints/_600up.scss
 delete mode 100755 _sass/breakpoints/_900up.scss
 delete mode 100644 _sass/breakpoints/_layout.scss
 delete mode 100755 _sass/breakpoints/_mobileup.scss
 create mode 100644 _sass/modules/_footer.scss
 create mode 100644 _sass/modules/_globals.scss
 create mode 100644 _sass/modules/_header.scss
 create mode 100644 _sass/modules/_layout.scss
 create mode 100644 _sass/modules/_lists.scss
 create mode 100644 _sass/modules/_media.scss
 create mode 100644 _sass/modules/_menu.scss
 create mode 100644 _sass/modules/_pagination.scss
 create mode 100644 _sass/modules/_posts.scss
 create mode 100644 _sass/partials/_device.scss
 rename _sass/{modules => partials}/_messages.scss (100%)

diff --git a/_data/fingerprints.yml b/_data/fingerprints.yml
index 4802517f..db135b51 100644
--- a/_data/fingerprints.yml
+++ b/_data/fingerprints.yml
@@ -3,4 +3,4 @@ icons: 715715b9
 maths: 5414f235
 scripts: 5220ed99
 search: b74b56ab
-style: 94a85e85
+style: 4d76b1e8
diff --git a/_sass/_custom.scss b/_sass/_custom.scss
deleted file mode 100644
index 022b4348..00000000
--- a/_sass/_custom.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// YouTube videos
-.yt {
-    margin: 0 auto 1em;
-    display: block;
-    width: 560px;
-    height: 315px;
-    border: none;
-}
-
-// HTTP error messages
-.http-error p, .poem {
-    text-align: center;
-    font-style: italic;
-}
-
-.sitemap .last-modified {
-    color: var(--color-meta);
-    white-space: nowrap;
-    font-size: 70%;
-}
-
-.nw {
-    white-space: nowrap;
-}
-
-abbr {
-    cursor: help;
-}
-
-.search-results:empty {
-    @extend %loading;
-    margin: 0 auto 1.5em;
-}
diff --git a/_sass/breakpoints/_1200up.scss b/_sass/breakpoints/_1200up.scss
deleted file mode 100644
index 941a8c2a..00000000
--- a/_sass/breakpoints/_1200up.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-body {
-  font-size: 137.5%;
-}
-
-.container {
-  max-width: 990px;
-}
-
-footer .container {
-  max-width: 940px;
-}
diff --git a/_sass/breakpoints/_600up.scss b/_sass/breakpoints/_600up.scss
deleted file mode 100755
index 8c7ffb1b..00000000
--- a/_sass/breakpoints/_600up.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-.break-text::before {
-    content: attr(data-s-up);
-}
-
-figure {
-    margin: 3rem auto;
-
-    &.fl-right {
-        clear: right;
-        float: right;
-        margin: 0 0 1em 40px;
-    }
-
-    &.fl-left {
-        float: left;
-        clear: left;
-        margin: 0 40px 1em 0;
-    }
-
-    &.fl-none.fig--std :is(img, object) {
-        max-width: 50%;
-    }
-
-    &.fl--small {
-        max-width: 240px;
-        font-size: 0.8em;
-    }
-}
-
-
-.page__title {
-    margin: 2rem auto 1em;
-}
-
-.showcase-actions {
-    margin-top: -2em;
-}
-
-.search {
-    margin: -2em auto 2em;
-}
-
-.footnotes .reversefootnote {
-    font-size: 1em;
-}
-
-footer .copy .powered {
-    display: inline;
-}
-
-
-/***********
-CODE STYLING
-************/
-.post--full {
-    div.highlighter-rouge {
-        margin: 0;
-    }
-
-    li div.highlighter-rouge {
-        margin-left: -40px;
-    }
-}
-
-pre.highlight {
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-
-    .overflow  & {
-        max-height: 30em;
-    }
-}
diff --git a/_sass/breakpoints/_900up.scss b/_sass/breakpoints/_900up.scss
deleted file mode 100755
index d1fa08af..00000000
--- a/_sass/breakpoints/_900up.scss
+++ /dev/null
@@ -1,247 +0,0 @@
-/***************
-GLOBAL STYLES
-***************/
-
-body {
-    font-size: 125%;
-}
-
-.content {
-    padding-top: 0;
-    position: relative;
-    z-index: 1;
-
-    &:after {
-        z-index: -1;
-        background: var(--color-bg);
-        content: "";
-        display: block;
-        width: 100%;
-        height: 10em;
-        position: absolute;
-        top: -2em;
-        left: 0;
-        transform: skewY(-2deg);
-        transform-origin: bottom left;
-    }
-}
-
-.container {
-    max-width: 900px;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 0 10px;
-}
-
-/***************
-HOMEPAGE STYLING
-***************/
-
-.posts, .page__title, .pagination {
-    width: 75%;
-    float: none;
-    margin: 0 auto 1.5em;
-}
-
-.showcase .page__title {
-    width: 85%;
-}
-
-
-/***************
-HEADER STYLING
-***************/
-
-.header {
-    background-image: url('../img/tiki.jpg');
-    position: relative;
-    padding-bottom: 2em;
-
-    &, .js & {
-        height: 15em;
-    }
-
-    .container {
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
-        max-width: 800px;
-        overflow: hidden;
-    }
-
-    .logo {
-        font-size: 3em;
-        line-height: 1;
-        letter-spacing: -3px;
-        padding-left: 0;
-    }
-
-    nav {
-        text-shadow: var(--color-overlay-shadow) 0px 0px 10px;
-        float: left;
-        clear: left;
-
-        ul {
-            margin: 0;
-
-            li {
-                display: inline;
-                line-height: 3em;
-                background: none;
-                padding: 0 5px;
-                border: none;
-
-                a {
-                    font-size: .9em;
-                    text-decoration: none;
-                    padding: 0 .25em;
-                }
-
-                // lack of support for :has
-                // &:has([aria-current])
-                &.current {
-                    padding-bottom: .25em;
-                    border-bottom: 4px solid var(--color-nav-active);
-                }
-            }
-        }
-    }
-}
-
-
-/***************
-MENU STYLING
-***************/
-
-.nav-collapse, .js .nav-collapse {
-    position: relative;
-    max-height: none;
-
-    ul li a {
-        color: var(--color-overlay-fg);
-        display: inline-block;
-    }
-}
-
-.nav-toggle {
-    display: none;
-}
-
-/***************
-POST STYLING
-***************/
-
-.post--excerpt {
-    blockquote, figure {
-        width: 95%;
-    }
-}
-
-.post--full {
-    h1, h2, h3, h4, h5, h6, p, ul, ol, dl, .page__title {
-        width: 75%;
-        float: none;
-        margin: 0 auto 2rem;
-    }
-
-    blockquote, figure {
-        width: 75%;
-    }
-
-    blockquote p, li p {
-        width: 100%;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        margin: 1rem auto;
-    }
-
-    .image--featured {
-        position: relative;
-        margin-top: 2rem;
-
-        &:before {
-            background: var(--color-bg);
-            content: "";
-            display: block;
-            width: 100%;
-            height: 4em;
-            position: absolute;
-            top: -2em;
-            left: 0;
-            transform: skewY(-2deg);
-            transform-origin: bottom left;
-        }
-    }
-
-    form.reply {
-        margin-left: 12.5%;
-    }
-}
-
-form.reply {
-    width: 50%;
-    margin: 0 auto 40px 0;
-}
-
-
-/***************
-POST NAV STYLING
-***************/
-.post__nav {
-
-    .prev, .next {
-        width: 50%;
-    }
-
-    .prev {
-        float: left;
-        text-align: left;
-    }
-
-    .next {
-        text-align: right;
-        float: right;
-    }
-}
-
-
-/***************
-FOOTER STYLES
-***************/
-footer {
-    .footer-links {
-        float: right;
-        font-size: .8em;
-
-        ul li a {
-            margin: 0;
-        }
-    }
-
-    .copy {
-        float: left;
-    }
-
-    .container {
-        padding: 1rem 0;
-        max-width: 850px;
-    }
-}
-
-
-/***************
-CONTACT PAGE STYLING
-***************/
-.contact__content {
-    max-width: 48%;
-    margin-right: 2%;
-    float: left;
-}
-
-.contact__form {
-    max-width: 48%;
-    width: 48%;
-    float: right;
-    margin-right: 0;
-}
diff --git a/_sass/breakpoints/_layout.scss b/_sass/breakpoints/_layout.scss
deleted file mode 100644
index 4cafaca7..00000000
--- a/_sass/breakpoints/_layout.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@media print {
-    main a[href^="http"]::after {
-        font-style: normal;
-        content: " (" attr(href) ")";
-    }
-}
diff --git a/_sass/breakpoints/_mobileup.scss b/_sass/breakpoints/_mobileup.scss
deleted file mode 100755
index bfaccbe7..00000000
--- a/_sass/breakpoints/_mobileup.scss
+++ /dev/null
@@ -1,540 +0,0 @@
-/***************
-GLOBAL STYLES
-***************/
-
-html {
-  box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
-body {
-    line-height: 1.75;
-    overflow-x: hidden;
-    margin: 0;
-
-    p , ul {
-        margin: 0 0 2rem;
-    }
-
-    ul ul, ol ul, ol ol, ul ol {
-        margin-bottom: 0;
-    }
-}
-
-
-// Media Styling
-img, video, audio, iframe, object {
-    max-width: 100%;
-}
-
-figure {
-    margin: 1rem auto;
-    text-align: center;
-
-    figcaption {
-        text-align: center;
-        font-size: .9em;
-    }
-
-    img {
-        margin: 0 auto;
-        display: block;
-    }
-}
-
-code, kbd, samp {
-    font-size: 0.9em;
-}
-
-code:not(pre code) {
-    border-radius: 3px;
-    background-color: var(--color-input-bg);
-    padding: 2px 3px 1px;
-}
-
-kbd:not(:has(kbd, samp)), kbd kbd {
-    background-color: var(--color-input-bg);
-    border: 1px solid var(--color-kbd-border);
-    box-shadow: var(--color-kbd-shadow);
-    display: inline-block;
-    border-radius: 3px;
-    line-height: 1;
-    padding: .15em .3em;
-    white-space: nowrap;
-}
-
-// Layout
-.container {
-    max-width: 610px;
-    padding: 0 20px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.break-text::before {
-  content: attr(data-xs);
-}
-
-.break-text__inner {
-    display: none;
-}
-
-
-/***************
-MENU STYLING
-***************/
-
-.nav-toggle {
-    @extend %screen-only;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    touch-action: manipulation;
-    cursor: context-menu;
-    user-select: none;
-    line-height: 2em;
-    font-size: inherit;
-    margin-top: .5em;
-    border-width: 0;
-    border-radius: 4px;
-    padding: 0 .5em;
-    text-decoration: none;
-    position: absolute;
-    right: max(env(safe-area-inset-right, 0px), 2rem);
-
-    @media (prefers-reduced-motion: no-preference) {
-        transition: all 0.2s ease-in-out;
-    }
-}
-
-.nav-collapse {
-    position: relative;
-    clear: both;
-    display: block;
-    width: 100%;
-
-    ul {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        list-style: none;
-
-        li {
-            width: 100%;
-            display: block;
-
-            a {
-                text-decoration: none;
-                display: block;
-                padding: 5px max(env(safe-area-inset-right, 0px), 2rem) 5px max(env(safe-area-inset-left, 0px), 2rem);
-            }
-        }
-    }
-}
-
-.js .nav-collapse {
-    clip: rect(0 0 0 0);
-    max-height: 0;
-    position: absolute;
-    overflow: hidden;
-    zoom: 1;
-    z-index: 1;
-
-    @media (prefers-reduced-motion: no-preference) {
-        transition: max-height 260ms ease 0s;
-    }
-}
-
-.nav-toggle[aria-expanded="true"] + .nav-collapse {
-    max-height: 9999px;
-}
-
-.nav-collapse.open {
-    position: relative;
-}
-
-
-/***************
-LIST STYLING
-***************/
-
-.list--inline {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-}
-
-.list--flex {
-    display: flex;
-    flex-flow: row wrap;
-    padding-left: 0;
-    margin: 0;
-    gap: 2px;
-}
-
-dt {
-    margin-top: 1.5rem;
-
-    & + & {
-        margin-top: 0;
-    }
-}
-
-dd {
-    margin-left: 0;
-}
-
-.post ul ul,
-.post ul ol,
-.post ol ul,
-.post ol ol {
-    margin: 0;
-}
-
-
-/***************
-PAGE STYLES
-***************/
-
-.page__title {
-    margin: 1rem auto;
-    text-align: center;
-}
-
-.showcase-actions {
-    @extend %screen-only;
-    margin-bottom: 1em;
-    text-align: center;
-}
-
-.showcase__status {
-    display: block;
-}
-
-.content {
-    padding-top: 1em;
-}
-
-/***************
-HEADER STYLING
-***************/
-
-.header {
-    background-image: url('../img/tiki-800w.jpg');
-    background-size: cover;
-    background-position: center 40%;
-    padding: 0;
-
-    .container {
-        padding: 0;
-        max-width: 100%;
-    }
-
-    .logo {
-        margin: 0;
-        float: left;
-        padding-left: max(env(safe-area-inset-left, 0px), 2rem);
-        font-size: 1em;
-        line-height: 3em;
-    }
-}
-
-.js .header {
-    height: 3em;
-}
-
-/***************
-POST STYLING
-***************/
-blockquote {
-    clear: both;
-    border-left: 2px solid var(--color-primary);
-    margin: 1em auto;
-    padding: 0 1em;
-    line-height: 1.8;
-    position: relative;
-}
-
-.post--full {
-    .meta {
-        text-align: center;
-        list-style: none;
-        padding: 0;
-
-        dt {
-            @extend .sr-only;
-        }
-
-        dd {
-            display: inline;
-
-            & ~ dd:before {
-                content: " | ";
-            }
-        }
-    }
-
-    img {
-        margin-bottom: 2rem;
-
-        &:has(+figcaption) {
-            margin-bottom: 0.7rem;
-        }
-    }
-
-    div.highlighter-rouge {
-        margin: 0 -20px;
-    }
-
-    li div.highlighter-rouge {
-        margin-left: -60px;
-    }
-
-    .image--featured {
-        position: relative;
-        margin-top: 2rem;
-
-        img {
-            margin-bottom: 0;
-        }
-    }
-}
-
-.comments {
-    padding: 0;
-
-    li {
-        list-style-type: none;
-        border: 1px solid var(--color-comments-border);
-        padding: 0.5em 0.75em;
-        margin-bottom: 1em;
-
-        .avatar {
-            width: 80px;
-            float: left;
-            margin-right: 10px;
-            margin-bottom: 10px;
-        }
-
-        .comment {
-            white-space: pre-line;
-            width: 100%;
-            clear: left;
-            margin-bottom: 0;
-        }
-    }
-}
-
-.post__comments .reply {
-    @extend %screen-only;
-}
-
-form.reply {
-    margin: 0 auto;
-}
-
-.footnotes {
-    font-size: 0.9rem;
-
-    ol {
-        padding-left: 1rem;
-    }
-
-    li > p {
-        width: inherit;
-    }
-
-    .reversefootnote {
-        @extend %screen-only;
-        font-family: monospace;
-        font-size: 1.5em; // for hit area
-    }
-}
-
-
-/***************
-POST NAV STYLING
-***************/
-.post__nav {
-    @extend %screen-only;
-    overflow: hidden;
-
-    .prev, .next {
-        display: block;
-        width: 100%;
-        height: 5rem;
-        overflow: hidden;
-        position: relative;
-        font-size: .9em;
-        text-transform: uppercase;
-        text-align: center;
-
-        img {
-            z-index: 1;
-            display: block;
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            left: 0;
-            width: 100%;
-            height: auto;
-        }
-
-        span {
-            z-index: 10;
-            position: relative;
-            padding: .5rem;
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 100%;
-            line-height: 1.4;
-        }
-
-        &.image {
-            text-decoration: none;
-            padding: 0 .5rem;
-            position: relative;
-            transition: all 0.2s ease-in-out;
-        }
-
-        &:hover {
-            &.image {
-                opacity: .8;
-            }
-        }
-    }
-
-    .prev {
-        span {
-            left: 0;
-        }
-    }
-
-    .next {
-        span {
-            right: 0;
-        }
-    }
-}
-
-
-/***************
-FOOTER STYLING
-***************/
-footer {
-    text-align: center;
-    margin: 0 0 2rem;
-    clear: both;
-
-    .container {
-        border-top: 4px solid var(--color-separator);
-        padding: .5em 0;
-        max-width: 90%;
-    }
-
-    .copy {
-        font-size: .8em;
-        margin-bottom: 1rem;
-
-        .powered {
-            @media screen {
-                display: block;
-            }
-        }
-
-        .source-link {
-            @extend %screen-only;
-        }
-    }
-
-    .footer-links {
-        @extend %screen-only;
-        font-size: 1.3em;
-
-        ul {
-            text-align: center;
-            justify-content: center;
-
-            li {
-                display: inline-block;
-
-                a {
-                    display: inline-block;
-                    width: 30px;
-                    height: 30px;
-                    transition: all 0.2s ease-in-out;
-                }
-            }
-        }
-    }
-}
-
-
-/***************
-PAGINATION STYLING
-***************/
-
-.pagination {
-    @extend %screen-only;
-    padding-bottom: 3em;
-
-    .button--outline {
-        width: auto;
-    }
-
-    .next {
-        float: left;
-    }
-
-    .previous {
-        float: right;
-    }
-}
-
-
-/***************
-POST LIST STYLING
-***************/
-.date {
-    font-size: .8em;
-}
-
-.posts {
-    .post:focus-within {
-        outline: 3px solid var(--color-primary);
-    }
-
-    .post__link:focus {
-        outline: none;
-    }
-
-    .post--excerpt {
-        margin-bottom: 4rem;
-        position: relative;
-
-        &:before {
-            content: "";
-            position: absolute;
-            bottom: -2rem;
-            left: 0;
-            background: var(--color-separator);
-            height: 2px;
-            width: 60px;
-        }
-
-        h3 {
-            margin: 0 0 .5em;
-
-            a {
-                text-decoration: none;
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-    }
-}
diff --git a/_sass/modules/_footer.scss b/_sass/modules/_footer.scss
new file mode 100644
index 00000000..c7e4aa6c
--- /dev/null
+++ b/_sass/modules/_footer.scss
@@ -0,0 +1,79 @@
+/***************
+FOOTER STYLING
+***************/
+@use "../partials/device";
+@use "../partials/mixins";
+
+footer {
+    text-align: center;
+    margin: 0 0 2rem;
+    clear: both;
+
+    .container {
+        border-top: 4px solid var(--color-separator);
+        padding: .5em 0;
+        max-width: 90%;
+
+        @include device.min("desktop") {
+            padding: 1rem 0;
+            max-width: 850px;
+        }
+
+        @include device.min("large-desktop") {
+            max-width: 940px;
+        }
+    }
+
+    .copy {
+        font-size: .8em;
+        margin-bottom: 1rem;
+
+        .powered {
+            @media screen {
+                display: block;
+            }
+
+            @include device.min("tablet") {
+                display: inline;
+            }
+        }
+
+        .source-link {
+            @include mixins.screen-only;
+        }
+
+        @include device.min("desktop") {
+            float: left;
+        }
+    }
+
+    .footer-links {
+        @include mixins.screen-only;
+        font-size: 1.3em;
+
+        ul {
+            text-align: center;
+            justify-content: center;
+
+            li {
+                display: inline-block;
+
+                a {
+                    display: inline-block;
+                    width: 30px;
+                    height: 30px;
+                    transition: all 0.2s ease-in-out;
+                }
+            }
+        }
+
+        @include device.min("desktop") {
+            float: right;
+            font-size: .8em;
+
+            ul li a {
+                margin: 0;
+            }
+        }
+    }
+}
diff --git a/_sass/modules/_forms.scss b/_sass/modules/_forms.scss
index 27a19ed4..83255a7b 100755
--- a/_sass/modules/_forms.scss
+++ b/_sass/modules/_forms.scss
@@ -1,4 +1,6 @@
 @use "../config";
+@use "../partials/device";
+@use "../partials/mixins";
 
 /***************
 FORM STYLING
@@ -46,7 +48,7 @@ textarea {
 }
 
 form {
-    @extend %screen-only;
+    @include mixins.screen-only;
     margin-bottom: config.$padding;
 
     // Wrap each form input/element in a field div
@@ -93,6 +95,10 @@ form {
         border-bottom: 1px solid;
         border-radius: 0;
     }
+
+    @include device.min("tablet") {
+        margin: -2em auto 2em;
+    }
 }
 
 .grecaptcha-badge {
@@ -119,7 +125,25 @@ form {
     }
 
     .form--loading &::after {
-        @extend %loading;
+        @include mixins.loading;
         display: inline-block;
     }
 }
+
+/***************
+CONTACT PAGE STYLING
+***************/
+@include device.min("desktop") {
+    .contact__content {
+        max-width: 48%;
+        margin-right: 2%;
+        float: left;
+    }
+
+    .contact__form {
+        max-width: 48%;
+        width: 48%;
+        float: right;
+        margin-right: 0;
+    }
+}
diff --git a/_sass/modules/_globals.scss b/_sass/modules/_globals.scss
new file mode 100644
index 00000000..5e70c6ef
--- /dev/null
+++ b/_sass/modules/_globals.scss
@@ -0,0 +1,71 @@
+/***************
+GLOBAL STYLES
+***************/
+
+@use "../partials/device";
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+    line-height: 1.75;
+    overflow-x: hidden;
+    margin: 0;
+
+    p , ul {
+        margin: 0 0 2rem;
+    }
+
+    ul ul, ol ul, ol ol, ul ol {
+        margin-bottom: 0;
+    }
+
+    @include device.min("desktop") {
+        font-size: 125%;
+    }
+
+    @include device.min("large-desktop") {
+        font-size: 137.5%;
+    }
+}
+
+
+code, kbd, samp {
+    font-size: 0.9em;
+}
+
+code:not(pre code) {
+    border-radius: 3px;
+    background-color: var(--color-input-bg);
+    padding: 2px 3px 1px;
+}
+
+kbd:not(:has(kbd, samp)), kbd kbd {
+    background-color: var(--color-input-bg);
+    border: 1px solid var(--color-kbd-border);
+    box-shadow: var(--color-kbd-shadow);
+    display: inline-block;
+    border-radius: 3px;
+    line-height: 1;
+    padding: .15em .3em;
+    white-space: nowrap;
+}
+
+abbr {
+    cursor: help;
+}
+
+.nw {
+    white-space: nowrap;
+}
+
+.sitemap .last-modified {
+    color: var(--color-meta);
+    white-space: nowrap;
+    font-size: 70%;
+}
diff --git a/_sass/modules/_header.scss b/_sass/modules/_header.scss
new file mode 100644
index 00000000..8182adb2
--- /dev/null
+++ b/_sass/modules/_header.scss
@@ -0,0 +1,53 @@
+/***************
+HEADER STYLING
+***************/
+@use "../partials/device";
+
+.header {
+    background-image: url('../img/tiki-800w.jpg');
+    background-size: cover;
+    background-position: center 40%;
+    padding: 0;
+
+    .container {
+        padding: 0;
+        max-width: 100%;
+    }
+
+    .logo {
+        margin: 0;
+        float: left;
+        padding-left: max(env(safe-area-inset-left, 0px), 2rem);
+        font-size: 1em;
+        line-height: 3em;
+    }
+
+    .js & {
+        height: 3em;
+    }
+
+    @include device.min("desktop") {
+        background-image: url('../img/tiki.jpg');
+        position: relative;
+        padding-bottom: 2em;
+
+        &, .js & {
+            height: 15em;
+        }
+
+        .container {
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+            max-width: 800px;
+            overflow: hidden;
+        }
+
+        .logo {
+            font-size: 3em;
+            line-height: 1;
+            letter-spacing: -3px;
+            padding-left: 0;
+        }
+    }
+}
diff --git a/_sass/modules/_layout.scss b/_sass/modules/_layout.scss
new file mode 100644
index 00000000..4cfac065
--- /dev/null
+++ b/_sass/modules/_layout.scss
@@ -0,0 +1,100 @@
+/***************
+PAGE STYLES
+***************/
+@use "../partials/device";
+@use "../partials/mixins";
+
+.container {
+    max-width: 610px;
+    padding: 0 20px;
+    margin-left: auto;
+    margin-right: auto;
+
+    @include device.min("desktop") {
+        max-width: 900px;
+        margin-left: auto;
+        margin-right: auto;
+        padding: 0 10px;
+    }
+
+    @include device.min("large-desktop") {
+        max-width: 990px;
+    }
+}
+
+.page__title {
+    margin: 1rem auto;
+    text-align: center;
+
+    @include device.min("tablet") {
+        margin: 2rem auto 1em;
+    }
+
+    @include device.min("desktop") {
+        .showcase & {
+            width: 85%;
+        }
+    }
+}
+
+.showcase-actions {
+    @include mixins.screen-only;
+    margin-bottom: 1em;
+    text-align: center;
+
+    @include device.min("tablet") {
+        margin-top: -2em;
+    }
+}
+
+.showcase__status {
+    display: block;
+}
+
+.content {
+    padding-top: 1em;
+
+    @include device.min("desktop") {
+        padding-top: 0;
+        position: relative;
+        z-index: 1;
+
+        &:after {
+            z-index: -1;
+            background: var(--color-bg);
+            content: "";
+            display: block;
+            width: 100%;
+            height: 10em;
+            position: absolute;
+            top: -2em;
+            left: 0;
+            transform: skewY(-2deg);
+            transform-origin: bottom left;
+        }
+    }
+}
+
+@include device.min("desktop") {
+    .posts, .page__title, .pagination {
+        width: 75%;
+        float: none;
+        margin: 0 auto 1.5em;
+    }
+}
+
+/***************
+BREAKPOINT TEXT
+***************/
+
+.break-text::before {
+    content: attr(data-xs);
+
+    @include device.min("tablet") {
+        content: attr(data-s-up);
+    }
+}
+
+.break-text__inner {
+    display: none;
+}
diff --git a/_sass/modules/_lists.scss b/_sass/modules/_lists.scss
new file mode 100644
index 00000000..cfeb4914
--- /dev/null
+++ b/_sass/modules/_lists.scss
@@ -0,0 +1,41 @@
+/***************
+LIST STYLING
+***************/
+@use "../partials/device";
+
+.list--inline {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+
+    @include device.min("desktop") {
+        margin: 0 auto 1.5em;
+    }
+}
+
+.list--flex {
+    display: flex;
+    flex-flow: row wrap;
+    padding-left: 0;
+    margin: 0;
+    gap: 2px;
+}
+
+dt {
+    margin-top: 1.5rem;
+
+    & + & {
+        margin-top: 0;
+    }
+}
+
+dd {
+    margin-left: 0;
+}
+
+.post ul ul,
+.post ul ol,
+.post ol ul,
+.post ol ol {
+    margin: 0;
+}
diff --git a/_sass/modules/_media.scss b/_sass/modules/_media.scss
new file mode 100644
index 00000000..7cac6955
--- /dev/null
+++ b/_sass/modules/_media.scss
@@ -0,0 +1,57 @@
+/***************
+MEDIA STYLES
+***************/
+@use "../partials/device";
+
+img, video, audio, iframe, object {
+    max-width: 100%;
+}
+
+figure {
+    margin: 1rem auto;
+    text-align: center;
+
+    figcaption {
+        text-align: center;
+        font-size: .9em;
+    }
+
+    img {
+        margin: 0 auto;
+        display: block;
+    }
+
+    @include device.min("tablet") {
+        margin: 3rem auto;
+
+        &.fl-right {
+            clear: right;
+            float: right;
+            margin: 0 0 1em 40px;
+        }
+
+        &.fl-left {
+            float: left;
+            clear: left;
+            margin: 0 40px 1em 0;
+        }
+
+        &.fl-none.fig--std :is(img, object) {
+            max-width: 50%;
+        }
+
+        &.fl--small {
+            max-width: 240px;
+            font-size: 0.8em;
+        }
+    }
+}
+
+// YouTube videos
+.yt {
+    margin: 0 auto 1em;
+    display: block;
+    width: 560px;
+    height: 315px;
+    border: none;
+}
diff --git a/_sass/modules/_menu.scss b/_sass/modules/_menu.scss
new file mode 100644
index 00000000..04d28c4e
--- /dev/null
+++ b/_sass/modules/_menu.scss
@@ -0,0 +1,120 @@
+/***************
+MENU STYLING
+***************/
+@use "../partials/device";
+@use "../partials/mixins";
+
+.nav-toggle {
+    @include mixins.screen-only;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    touch-action: manipulation;
+    cursor: context-menu;
+    user-select: none;
+    line-height: 2em;
+    font-size: inherit;
+    margin-top: .5em;
+    border-width: 0;
+    border-radius: 4px;
+    padding: 0 .5em;
+    text-decoration: none;
+    position: absolute;
+    right: max(env(safe-area-inset-right, 0px), 2rem);
+
+    @media (prefers-reduced-motion: no-preference) {
+        transition: all 0.2s ease-in-out;
+    }
+}
+
+.nav-collapse {
+    position: relative;
+    clear: both;
+    display: block;
+    width: 100%;
+
+    ul {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        list-style: none;
+
+        li {
+            width: 100%;
+            display: block;
+
+            a {
+                text-decoration: none;
+                display: block;
+                padding: 5px max(env(safe-area-inset-right, 0px), 2rem) 5px max(env(safe-area-inset-left, 0px), 2rem);
+            }
+        }
+    }
+}
+
+.js .nav-collapse {
+    clip: rect(0 0 0 0);
+    max-height: 0;
+    position: absolute;
+    overflow: hidden;
+    zoom: 1;
+    z-index: 1;
+
+    @media (prefers-reduced-motion: no-preference) {
+        transition: max-height 260ms ease 0s;
+    }
+}
+
+.nav-toggle[aria-expanded="true"] + .nav-collapse {
+    max-height: 9999px;
+}
+
+.nav-collapse.open {
+    position: relative;
+}
+
+@include device.min("desktop") {
+    .header nav {
+        text-shadow: var(--color-overlay-shadow) 0px 0px 10px;
+        float: left;
+        clear: left;
+
+        ul {
+            margin: 0;
+
+            li {
+                display: inline;
+                line-height: 3em;
+                background: none;
+                padding: 0 5px;
+                border: none;
+
+                a {
+                    font-size: .9em;
+                    text-decoration: none;
+                    padding: 0 .25em;
+                }
+
+                // lack of support for :has
+                // &:has([aria-current])
+                &.current {
+                    padding-bottom: .25em;
+                    border-bottom: 4px solid var(--color-nav-active);
+                }
+            }
+        }
+    }
+
+    .nav-collapse, .js .nav-collapse {
+        position: relative;
+        max-height: none;
+
+        ul li a {
+            color: var(--color-overlay-fg);
+            display: inline-block;
+        }
+    }
+
+    .nav-toggle {
+        display: none;
+    }
+}
diff --git a/_sass/modules/_pagination.scss b/_sass/modules/_pagination.scss
new file mode 100644
index 00000000..f3a2385f
--- /dev/null
+++ b/_sass/modules/_pagination.scss
@@ -0,0 +1,21 @@
+/***************
+PAGINATION STYLING
+***************/
+@use "../partials/mixins";
+
+.pagination {
+    @include mixins.screen-only;
+    padding-bottom: 3em;
+
+    .button--outline {
+        width: auto;
+    }
+
+    .next {
+        float: left;
+    }
+
+    .previous {
+        float: right;
+    }
+}
diff --git a/_sass/modules/_posts.scss b/_sass/modules/_posts.scss
new file mode 100644
index 00000000..c6265ee5
--- /dev/null
+++ b/_sass/modules/_posts.scss
@@ -0,0 +1,306 @@
+/***************
+POST STYLING
+***************/
+@use "../partials/device";
+@use "../partials/mixins";
+
+blockquote {
+    clear: both;
+    border-left: 2px solid var(--color-primary);
+    margin: 1em auto;
+    padding: 0 1em;
+    line-height: 1.8;
+    position: relative;
+}
+
+.post--full {
+    .meta {
+        text-align: center;
+        list-style: none;
+        padding: 0;
+
+        dt {
+            @include mixins.sr-only;
+        }
+
+        dd {
+            display: inline;
+
+            & ~ dd:before {
+                content: " | ";
+            }
+        }
+    }
+
+    img {
+        margin-bottom: 2rem;
+
+        &:has(+figcaption) {
+            margin-bottom: 0.7rem;
+        }
+    }
+
+    div.highlighter-rouge {
+        margin: 0 -20px;
+
+        @include device.min("tablet") {
+            margin: 0;
+        }
+    }
+
+    li div.highlighter-rouge {
+        margin-left: -60px;
+
+        @include device.min("tablet") {
+            margin-left: -40px;
+        }
+    }
+
+    .image--featured {
+        position: relative;
+        margin-top: 2rem;
+
+        img {
+            margin-bottom: 0;
+        }
+    }
+
+    @include device.min("desktop") {
+        h1, h2, h3, h4, h5, h6, p, ul, ol, dl, .page__title {
+            width: 75%;
+            float: none;
+            margin: 0 auto 2rem;
+        }
+
+        blockquote, figure {
+            width: 75%;
+        }
+
+        blockquote p, li p {
+            width: 100%;
+        }
+
+        h1, h2, h3, h4, h5, h6 {
+            margin: 1rem auto;
+        }
+
+        .image--featured {
+            position: relative;
+            margin-top: 2rem;
+
+            &:before {
+                background: var(--color-bg);
+                content: "";
+                display: block;
+                width: 100%;
+                height: 4em;
+                position: absolute;
+                top: -2em;
+                left: 0;
+                transform: skewY(-2deg);
+                transform-origin: bottom left;
+            }
+        }
+
+        form.reply {
+            margin-left: 12.5%;
+        }
+    }
+}
+
+.comments {
+    padding: 0;
+
+    li {
+        list-style-type: none;
+        border: 1px solid var(--color-comments-border);
+        padding: 0.5em 0.75em;
+        margin-bottom: 1em;
+
+        .avatar {
+            width: 80px;
+            float: left;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }
+
+        .comment {
+            white-space: pre-line;
+            width: 100%;
+            clear: left;
+            margin-bottom: 0;
+        }
+    }
+}
+
+.post__comments .reply {
+    @include mixins.screen-only;
+}
+
+form.reply {
+    margin: 0 auto;
+
+    @include device.min("desktop") {
+        width: 50%;
+        margin: 0 auto 40px 0;
+    }
+}
+
+.footnotes {
+    font-size: 0.9rem;
+
+    ol {
+        padding-left: 1rem;
+    }
+
+    li > p {
+        width: inherit;
+    }
+
+    .reversefootnote {
+        @include mixins.screen-only;
+        font-family: monospace;
+        font-size: 1.5em; // for hit area
+
+        @include device.min("tablet") {
+            font-size: 1em;
+        }
+    }
+}
+
+
+/***************
+POST NAV STYLING
+***************/
+.post__nav {
+    @include mixins.screen-only;
+    overflow: hidden;
+
+    .prev, .next {
+        display: block;
+        width: 100%;
+        height: 5rem;
+        overflow: hidden;
+        position: relative;
+        font-size: .9em;
+        text-transform: uppercase;
+        text-align: center;
+
+        img {
+            z-index: 1;
+            display: block;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            left: 0;
+            width: 100%;
+            height: auto;
+        }
+
+        span {
+            z-index: 10;
+            position: relative;
+            padding: .5rem;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 100%;
+            line-height: 1.4;
+        }
+
+        &.image {
+            text-decoration: none;
+            padding: 0 .5rem;
+            position: relative;
+            transition: all 0.2s ease-in-out;
+        }
+
+        &:hover {
+            &.image {
+                opacity: .8;
+            }
+        }
+
+        @include device.min("desktop") {
+            width: 50%;
+        }
+    }
+
+    .prev {
+        span {
+            left: 0;
+        }
+
+        @include device.min("desktop") {
+            float: left;
+            text-align: left;
+        }
+    }
+
+    .next {
+        span {
+            right: 0;
+        }
+
+        @include device.min("desktop") {
+            text-align: right;
+            float: right;
+        }
+    }
+}
+
+
+/***************
+POST LIST STYLING
+***************/
+.date {
+    font-size: .8em;
+}
+
+.posts {
+    .post:focus-within {
+        outline: 3px solid var(--color-primary);
+    }
+
+    .post__link:focus {
+        outline: none;
+    }
+
+    .post--excerpt {
+        margin-bottom: 4rem;
+        position: relative;
+
+        &:before {
+            content: "";
+            position: absolute;
+            bottom: -2rem;
+            left: 0;
+            background: var(--color-separator);
+            height: 2px;
+            width: 60px;
+        }
+
+        h3 {
+            margin: 0 0 .5em;
+
+            a {
+                text-decoration: none;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        @include device.min("desktop") {
+            blockquote, figure {
+                width: 95%;
+            }
+        }
+    }
+
+    &:empty {
+        @include mixins.loading;
+        margin: 0 auto 1.5em;
+    }
+}
diff --git a/_sass/modules/_syntax.scss b/_sass/modules/_syntax.scss
index 54a01856..2d9bf6b3 100755
--- a/_sass/modules/_syntax.scss
+++ b/_sass/modules/_syntax.scss
@@ -1,5 +1,6 @@
 // Monokai high-contrast
 // Inspiration from https://maxchadwick.xyz/blog/syntax-highlighting-and-color-contrast-accessibility
+@use "../partials/device";
 
 pre.highlight {
     white-space: pre;
@@ -122,4 +123,14 @@ pre.highlight {
     .ss { // Literal.String.Symbol
         color: var(--color-code-string);
     }
+
+    @include device.min("tablet") {
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px;
+        border-radius: 3px;
+
+        .overflow & {
+            max-height: 30em;
+        }
+    }
 }
diff --git a/_sass/partials/_device.scss b/_sass/partials/_device.scss
new file mode 100644
index 00000000..efffc0b9
--- /dev/null
+++ b/_sass/partials/_device.scss
@@ -0,0 +1,52 @@
+@use "sass:map";
+
+$devices: (
+    phone: 300px,
+    tablet: 600px,
+    desktop: 900px,
+    large-desktop: 1200px,
+);
+
+@mixin min($device: map.get($devices, "phone")) {
+    @if map.has-key($devices, $device) {
+        @media screen and (min-width: map.get($devices, $device)) {
+            @content;
+        }
+    }
+}
+
+@mixin max($device: map.get($devices, "phone")) {
+    @if map.has-key($devices, $device) {
+        @media screen and (max-width: map.get($devices, $device) - 1) {
+            @content;
+        }
+    }
+}
+
+@mixin only($device: map.get($devices, "phone")) {
+    @if map.has-key($devices, $device) {
+        $devices-length: length($devices);
+        $keys: map.keys($devices);
+
+        @if index($keys, $device) == $devices-length {
+            @include min($device) {
+                @content;
+            }
+        } @else {
+            $next-device-index: index($keys, $device) + 1;
+            $next-device-key: nth($keys, $next-device-index);
+
+            @media screen and (min-width: map.get($devices, $device)) and (max-width: map.get($devices, $next-device-key) - 1) {
+                @content;
+            }
+        }
+    }
+}
+
+@mixin between($min-device: map.get($devices, "phone"), $max-device: map.get($devices, "tablet")) {
+    @if map.has-key($devices, $min-device) and map.has-key($devices, $max-device) {
+        @media screen and (min-width: map.get($devices, $min-device)) and (max-width: map.get($devices, $max-device) - 1) {
+            @content;
+        }
+    }
+}
diff --git a/_sass/partials/_font.scss b/_sass/partials/_font.scss
index 56c66c16..9fc563fb 100644
--- a/_sass/partials/_font.scss
+++ b/_sass/partials/_font.scss
@@ -43,6 +43,11 @@ dt {
     font-weight: bold;
 }
 
+// HTTP error messages
+.http-error p, .poem {
+    text-align: center;
+    font-style: italic;
+}
 
 /***************
 LINK STYLING
@@ -57,6 +62,11 @@ a {
 }
 
 @media print {
+    main a[href^="http"]::after {
+        font-style: normal;
+        content: " (" attr(href) ")";
+    }
+
     a {
         color: inherit;
         text-decoration: none;
diff --git a/_sass/modules/_messages.scss b/_sass/partials/_messages.scss
similarity index 100%
rename from _sass/modules/_messages.scss
rename to _sass/partials/_messages.scss
diff --git a/_sass/partials/_mixins.scss b/_sass/partials/_mixins.scss
index 90497d76..493932e0 100755
--- a/_sass/partials/_mixins.scss
+++ b/_sass/partials/_mixins.scss
@@ -13,7 +13,7 @@
     outline: 0;
 }
 
-%loading {
+@mixin loading {
     content: "";
     width: 30px;
     height: 30px;
@@ -24,7 +24,7 @@
     display: block;
 }
 
-%screen-only {
+@mixin screen-only {
     @media print {
         display: none;
     }
@@ -37,12 +37,16 @@
 }
 
 // screen reader only - totally clipped
-.sr-only {
+@mixin sr-only {
     @extend %flow-hidden;
     height: 1px;
     clip-path: inset(50%);
 }
 
+.sr-only {
+    @include sr-only;
+}
+
 // reading mode - comply with Safari extraction logic
 .rm-only {
     @extend %flow-hidden;
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 33de7681..151b4259 100755
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,31 +1,27 @@
 ---
 ---
 // Reset using Normalize
-@import "normalize";
+@forward "normalize";
 
-// Site configuration
-@import "config";
-
-// Import Partials
-@import "partials/typography";
-@import "partials/font";
-@import "partials/mixins";
+// forward Partials
+@forward "partials/font";
+@forward "partials/messages";
+@forward "partials/mixins";
+@forward "partials/typography";
 
 // Modules
-@import "modules/buttons";
-@import "modules/forms";
-@import "modules/gallery";
-@import "modules/messages";
-@import "modules/tables";
-@import "modules/syntax";
-
-// Mobile up base styles
-@import "breakpoints/mobileup";
-@import "breakpoints/layout";
-
-// Import media queries
-@media only screen and (min-width: 600px) { @import "breakpoints/600up";}
-@media only screen and (min-width: 900px) { @import "breakpoints/900up";}
-@media only screen and (min-width: 1200px) { @import "breakpoints/1200up";}
+@forward "modules/globals";
+@forward "modules/layout";
+@forward "modules/header";
+@forward "modules/menu";
+@forward "modules/footer";
 
-@import "custom";
+@forward "modules/buttons";
+@forward "modules/forms";
+@forward "modules/gallery";
+@forward "modules/lists";
+@forward "modules/media";
+@forward "modules/pagination";
+@forward "modules/posts";
+@forward "modules/syntax";
+@forward "modules/tables";

From 07566ae195ac235d805132faa96eeff32460b084 Mon Sep 17 00:00:00 2001
From: Chris Buckley <chris@cmbuckley.co.uk>
Date: Wed, 25 Mar 2026 15:48:27 +0000
Subject: [PATCH 5/6] Netlify previews to use staging context

---
 netlify.toml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/netlify.toml b/netlify.toml
index 298a6c3b..abdd7585 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,5 +1,5 @@
 [context.branch-deploy]
-command = "printf \"url: %s\" \"$DEPLOY_PRIME_URL\" > _preview.yml; bundle exec jekyll build --config _config.yml,_preview.yml && bundle exec rspec"
+command = "sed -i \"s/url: .*$/url: $DEPLOY_PRIME_URL/\" _staging.yml; bundle exec jekyll build --config _config.yml,_staging.yml && bundle exec rspec"
 
   [[context.branch-deploy.plugins]]
   package = "netlify-plugin-seo-lint"
@@ -8,7 +8,7 @@ command = "printf \"url: %s\" \"$DEPLOY_PRIME_URL\" > _preview.yml; bundle exec
     internalLinksTrailingSlash = false
 
 [context.deploy-preview]
-command = "printf \"url: %s\" \"https://staging-$REVIEW_ID.cmbuckley.co.uk\" > _preview.yml; bundle exec jekyll build --config _config.yml,_preview.yml && bundle exec rspec"
+command = "sed -i \"s/staging/&-$REVIEW_ID/\" _staging.yml; bundle exec jekyll build --config _config.yml,_staging.yml && bundle exec rspec"
 
   [[context.deploy-preview.plugins]]
   package = "netlify-plugin-seo-lint"

From feb26060151885a2e5fde90043baabe217f74327 Mon Sep 17 00:00:00 2001
From: Chris Buckley <chris@cmbuckley.co.uk>
Date: Wed, 25 Mar 2026 18:37:36 +0000
Subject: [PATCH 6/6] More accurate lightness changes

---
 _data/fingerprints.yml |  2 +-
 _sass/_config.scss     | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/_data/fingerprints.yml b/_data/fingerprints.yml
index db135b51..babffd1f 100644
--- a/_data/fingerprints.yml
+++ b/_data/fingerprints.yml
@@ -3,4 +3,4 @@ icons: 715715b9
 maths: 5414f235
 scripts: 5220ed99
 search: b74b56ab
-style: 4d76b1e8
+style: 45dfbcc2
diff --git a/_sass/_config.scss b/_sass/_config.scss
index d0cceccb..7b2e6f44 100755
--- a/_sass/_config.scss
+++ b/_sass/_config.scss
@@ -95,12 +95,12 @@ $theme: (
     dark: (
         bg: $blackish,
         fg: color.scale($offwhite, $lightness: -15%),
-        meta: color.scale($silver, $lightness: 10%),
+        meta: color.scale($silver, $lightness: 20%),
         caption: #a1a1a1,
 
         btn-fg: $blackish,
         btn-fg-hover: black,
-        nav-separator: color.scale($dark-primary-color, $lightness: -5%),
+        nav-separator: color.scale($dark-primary-color, $lightness: -10%),
 
         input-bg: #333,
         input-fg: #999,
@@ -110,7 +110,7 @@ $theme: (
         comments-border: $dark-tertiary-color,
         comments-target: color.scale($dark-primary-color, $lightness: 75%),
         comments-author-bg: color.scale($dark-primary-color, $lightness: -80%),
-        comments-author-meta: color.scale($silver, $lightness: 10%),
+        comments-author-meta: color.scale($silver, $lightness: 20%),
 
         table-bg-alt: #191a1c,
         mark: color.change($dark-primary-color, $alpha: 0.3),
@@ -130,7 +130,9 @@ $theme: (
     $theme: map.deep-merge($theme, (default: (
         #{$message-type}-bg: color.change(map.get($default-theme, $message-type), $alpha: 0.08),
         #{$message-type}-highlight: color.change(map.get($default-theme, $message-type), $alpha: 0.5),
-        #{$message-type}-fg-hover: color.scale(map.get($default-theme, $message-type), $lightness: -15%),
+        #{$message-type}-fg-hover: color.scale(map.get($default-theme, $message-type), $lightness: -30%),
+    ), dark: (
+        #{$message-type}-fg-hover: color.scale(map.get($default-theme, $message-type), $lightness: 20%),
     )));
 }
 
@@ -139,11 +141,11 @@ $theme: (
     $dark-theme: map.get($theme, dark);
 
     $theme: map.deep-merge($theme, (default: (
-        #{$button-type}-fg: color.scale(map.get($default-theme, $button-type), $lightness: -10%),
-        #{$button-type}-hover: color.scale(map.get($default-theme, $button-type), $lightness: -10%),
+        #{$button-type}-fg: color.scale(map.get($default-theme, $button-type), $lightness: -30%),
+        #{$button-type}-hover: color.scale(map.get($default-theme, $button-type), $lightness: -30%),
     ), dark: (
-        #{$button-type}-fg: color.scale(map.get($dark-theme, $button-type), $lightness: 10%),
-        #{$button-type}-hover: color.scale(map.get($dark-theme, $button-type), $lightness: 10%),
+        #{$button-type}-fg: color.scale(map.get($dark-theme, $button-type), $lightness: 20%),
+        #{$button-type}-hover: color.scale(map.get($dark-theme, $button-type), $lightness: 20%),
     )));
 }