Refine image breakout utilities

This replaces the hard-coded image breakout offsets with custom
properties, so the spacing scale can be adjusted from one place.

It also adds smaller and larger breakout options, making image width
choices more flexible while keeping the existing class-based workflow.

1 files changed, 40 insertions, 19 deletions

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index f714f3c..517b9ce 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -6,7 +6,7 @@ CUSTOM PROPERTIES
 =============================================================================
 */
 :root {
-  /* Named palette */
+  /* Palette */
   --black: light-dark(#575279, #393b44);
   --red: light-dark(#b4637a, #c94f6d);
   --green: light-dark(#618774, #81b29a);
@@ -17,7 +17,7 @@ CUSTOM PROPERTIES
   --white: light-dark(#e5e9f0, #dfdfe0);
   --orange: light-dark(#d7827e, #f4a261);
   --pink: light-dark(#d685af, #d67ad2);
-  /* Dim palette */
+
   --dim-black: light-dark(#504c6b, #30323a);
   --dim-red: light-dark(#a5576d, #ab435d);
   --dim-green: light-dark(#597668, #6e9783);
@@ -27,7 +27,7 @@ CUSTOM PROPERTIES
   --dim-cyan: light-dark(#50848c, #54aeb0);
   --dim-white: light-dark(#c8cfde, #bebebe);
   --dim-foreground: light-dark(#4c4769, #aeafb0);
-  /* Bright palette */
+
   --bright-black: light-dark(#5f5695, #575860);
   --bright-red: light-dark(#c26d85, #d16983);
   --bright-green: light-dark(#629f81, #8ebaa4);
@@ -37,14 +37,10 @@ CUSTOM PROPERTIES
   --bright-cyan: light-dark(#5ca7b4, #7ad5d6);
   --bright-white: light-dark(#e6ebf3, #e4e4e5);
   --bright-foreground: light-dark(#625c87, #d6d6d7);
-  /* Semantic */
+
   --foreground: light-dark(#575279, #cdcecf);
   --background: light-dark(#faf4ed, #192330);
-  /* Layout */
-  --measure: 60ch;
-  --column-min-width: calc(1/3 * 100vw);
-  --column-max-width: 100%;
-  /* Gradient border — reused in header, footer */
+
   --gradient-border: linear-gradient(
     to right,
     var(--foreground),
@@ -52,6 +48,19 @@ CUSTOM PROPERTIES
     var(--foreground)
   );
 
+  /* Layout */
+  --measure: 60ch;
+  --column-min-width: calc(1/3 * 100vw);
+  --column-max-width: 100%;
+
+  --breakout-xxs: 2rem;
+  --breakout-xs: 4rem;
+  --breakout-sm: 8rem;
+  --breakout-md: 12rem;
+  --breakout-lg: 16rem;
+  --breakout-xl: 24rem;
+  --breakout-xxl: 32rem;
+
   /* Responsive layout */
   @media (min-width: 500px) {
     --column-max-width: var(--measure);
@@ -693,29 +702,39 @@ img {
     width: 75%;
   }
 
+  &.breakout-xxs {
+    width: calc(100% + 2 * var(--breakout-xxs));
+    transform: translateX(calc(-1 * var(--breakout-xxs)));
+  }
+
   &.breakout-xs {
-    width: calc(100% + 16rem);
-    transform: translateX(-8rem);
+    width: calc(100% + 2 * var(--breakout-xs));
+    transform: translateX(calc(-1 * var(--breakout-xs)));
   }
 
   &.breakout-sm {
-    width: calc(100% + 24rem);
-    transform: translateX(-12rem);
+    width: calc(100% + 2 * var(--breakout-sm));
+    transform: translateX(calc(-1 * var(--breakout-sm)));
   }
 
   &.breakout-md {
-    width: calc(100% + 32rem);
-    transform: translateX(-16rem);
+    width: calc(100% + 2 * var(--breakout-md));
+    transform: translateX(calc(-1 * var(--breakout-md)));
   }
 
   &.breakout-lg {
-    width: calc(100% + 48rem);
-    transform: translateX(-24rem);
+    width: calc(100% + 2 * var(--breakout-lg));
+    transform: translateX(calc(-1 * var(--breakout-lg)));
   }
 
   &.breakout-xl {
-    width: calc(100% + 64rem);
-    transform: translateX(-32rem);
+    width: calc(100% + 2 * var(--breakout-xl));
+    transform: translateX(calc(-1 * var(--breakout-xl)));
+  }
+
+  &.breakout-xxl {
+    width: calc(100% + 2 * var(--breakout-xxl));
+    transform: translateX(calc(-1 * var(--breakout-xxl)));
   }
 
   &.breakout-full {
@@ -723,11 +742,13 @@ img {
     margin-left: calc(50% - 50vw);
   }
 
+  &.breakout-xxs,
   &.breakout-xs,
   &.breakout-sm,
   &.breakout-md,
   &.breakout-lg,
   &.breakout-xl,
+  &.breakout-xxl,
   &.breakout-full {
     max-width: 100vw;
   }