diff options
| author | Dennis Fink | 2026-08-08 19:29:43 +0200 |
|---|---|---|
| committer | Dennis Fink | 2026-08-08 19:29:43 +0200 |
| commit | 274a0395dc2f105d2689ed4263b7cd7f77dee1e5 (patch) | |
| tree | 624bc4957416cc2c7b03c1125d432d99116fdb7b | |
| parent | 8caeab7ad7b3587ddd8ede20c3bd0676575fb9e6 (diff) | |
| download | dennisfink.me-274a0395dc2f105d2689ed4263b7cd7f77dee1e5.tar.gz dennisfink.me-274a0395dc2f105d2689ed4263b7cd7f77dee1e5.zip | |
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.
| -rw-r--r-- | assets/static/css/style.css | 48 |
1 files 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) { |