From f38ff61919f5ed04c8027f25d63f36f58031822e Mon Sep 17 00:00:00 2001
From: Dennis Fink
Date: Mon, 20 Jul 2026 17:58:05 +0200
Subject: 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.
---
 assets/static/css/style.css | 59 ++++++++++++++++++++++++++++++---------------
 1 file changed, 40 insertions(+), 19 deletions(-)

(limited to 'assets/static')

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;
   }
-- 
cgit v1.3.1