Simplify .-section-x-inset-xl CSS (#945)

In the first three `calc()` expressions, `100vw` is less than `1280px`
(otherwise we'd be in the `screen(xl)` media query), so `min(1280px,
100vw)` is just a complex way to say `100vw`, and thus `calc((100vw -
(min(1280px, 100vw) - 32px)) / 2 * -1)` is just a very complex way to
say `-16px`. I simplified them to the corresponding `-mx-` classes, so
that it's clear that they are the same numbers used in
`.section-x-inset-xl`.

In the last `calc()`, `100vw` is always more than `1280px` (because of
the media query), so `min(1280px, 100vw)` is just a complex way of
saying `1280px`. I left `1280px - 112px` which is hopefully more clear
than just writing `1068px`.

Note that using `100vw` instead of `1280px` in the last one would fix
the bug reported in #944, but I'm
assuming that `min(1280px, 100vw)` is there for a reason so I cannot
simply remove it.

---

**Edit**: The second commit fixes #944, by using the page width
_excluding the vertical scrollbar_ rather than using the full page width
to compute the sticky breadcrumb margin.

Author: nicolo-ribaudo

frontend/routes/_layout.tsx

@@ -11,6 +11,7 @@ export default function Layout(
     <>
       <div
         class="min-h-[calc(100vh-4rem)] md:min-h-[calc(100vh-4.5rem)]"
+        style="container: page / size"
         data-dark-theme="light"
       >
         <a

frontend/static/styles.css

@@ -150,16 +150,12 @@
   }
 
   .-section-x-inset-xl {
-    margin: 0 calc((100vw - (min(1280px, 100vw) - 32px)) / 2 * -1);
+    @apply -mx-4 md:-mx-8 lg:-mx-10;
 
-    @media screen(md) {
-      margin: 0 calc((100vw - (min(1280px, 100vw) - 64px)) / 2 * -1);
-    }
-    @media screen(lg) {
-      margin: 0 calc((100vw - (min(1280px, 100vw) - 80px)) / 2 * -1);
-    }
     @media screen(xl) {
-      margin: 0 calc((100vw - (min(1280px, 100vw) - 112px)) / 2 * -1);
+      @container page (width > 0) {
+        margin: 0 calc((112px + max(0px, 100cqw - 1280px)) / 2 * -1);
+      }
     }
   }