From 274a0395dc2f105d2689ed4263b7cd7f77dee1e5 Mon Sep 17 00:00:00 2001
From: Dennis Fink
Date: Sat, 8 Aug 2026 19:29:43 +0200
Subject: Constrain image breakout widths

This refactors the breakout image utilities to use a shared `--breakout`
variable and cap the actual breakout to the available viewport space.

That keeps breakout images from being pushed off-screen on narrow layouts while
preserving the existing full-width breakout behaviour.
---
 assets/static/css/style.css | 48 ++++++++++++++++++++++-----------------------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/assets/static/css/style.css b/assets/static/css/style.css
index 624fd38..a8fe9b7 100644
--- a/assets/static/css/style.css
+++ b/assets/static/css/style.css
@@ -886,54 +886,52 @@ img.round {
   }
 
   &.breakout-xxs {
-    width: calc(100% + 2 * var(--breakout-xxs));
-    transform: translateX(calc(-1 * var(--breakout-xxs)));
+    --breakout: var(--breakout-xxs);
   }
 
   &.breakout-xs {
-    width: calc(100% + 2 * var(--breakout-xs));
-    transform: translateX(calc(-1 * var(--breakout-xs)));
+    --breakout: var(--breakout-xs);
   }
 
   &.breakout-sm {
-    width: calc(100% + 2 * var(--breakout-sm));
-    transform: translateX(calc(-1 * var(--breakout-sm)));
+    --breakout: var(--breakout-sm);
   }
 
   &.breakout-md {
-    width: calc(100% + 2 * var(--breakout-md));
-    transform: translateX(calc(-1 * var(--breakout-md)));
+    --breakout: var(--breakout-md);
   }
 
   &.breakout-lg {
-    width: calc(100% + 2 * var(--breakout-lg));
-    transform: translateX(calc(-1 * var(--breakout-lg)));
+    --breakout: var(--breakout-lg);
   }
 
   &.breakout-xl {
-    width: calc(100% + 2 * var(--breakout-xl));
-    transform: translateX(calc(-1 * var(--breakout-xl)));
+    --breakout: var(--breakout-xl);
   }
 
   &.breakout-xxl {
-    width: calc(100% + 2 * var(--breakout-xxl));
-    transform: translateX(calc(-1 * var(--breakout-xxl)));
+    --breakout: var(--breakout-xxl);
   }
 
-  &.breakout-full {
-    margin-left: calc(50% - 50vw);
-    width: 100vw;
+  &:is(
+    .breakout-xxs,
+    .breakout-xs,
+    .breakout-sm,
+    .breakout-md,
+    .breakout-lg,
+    .breakout-xl,
+    .breakout-xxl
+  ) {
+    --actual-breakout: min(var(--breakout), calc((100vw - 100%) / 2));
+
+    margin-left: calc(-1 * var(--actual-breakout));
+    width: calc(100% + 2 * var(--actual-breakout));
+    max-width: 100vw;
   }
 
-  &.breakout-xxs,
-  &.breakout-xs,
-  &.breakout-sm,
-  &.breakout-md,
-  &.breakout-lg,
-  &.breakout-xl,
-  &.breakout-xxl,
   &.breakout-full {
-    max-width: 100vw;
+    margin-left: calc(50% - 50vw);
+    width: 100vw;
   }
 
   @media (max-width: 500px) {
-- 
cgit v1.3.1