improve container bleeding

yuheiy · Mar 9, 2024 · 392da14 · 392da14
1 parent ec83f9c
commit 392da14
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 13 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -51,7 +51,7 @@ if (!is404) {
   https://schepp.dev/posts/smooth-scrolling-and-page-search/
 -->
 <html
-  class="break-words leading-normal underline-offset-[0.125em] kerning-none [hanging-punctuation:allow-end] [line-break:normal] focus-within:motion-safe:scroll-smooth"
+  class="break-words leading-normal underline-offset-[0.125em] @container/root kerning-none [hanging-punctuation:allow-end] [line-break:normal] focus-within:motion-safe:scroll-smooth"
   lang={SITE_LANG}
 >
   <head>

diff --git a/src/styles/base/variables.wrapper.css b/src/styles/base/variables.wrapper.css
@@ -4,7 +4,7 @@
   --wrapper-margin-max: 6rem;
   --wrapper-margin-without-safe-area: clamp(
     var(--wrapper-margin-min),
-    max((100% - var(--wrapper-inline-size)) / 2, 5vw),
+    max((100cqi - var(--wrapper-inline-size)) / 2, 5vw),
     var(--wrapper-margin-max)
   );
   --wrapper-margin-left: calc(var(--wrapper-margin-without-safe-area) + env(safe-area-inset-left));

diff --git a/src/styles/components/prose.css b/src/styles/components/prose.css
@@ -50,17 +50,9 @@
     font-size: theme(fontSize.sm);
     line-height: theme(lineHeight.tight);
 
-    /* 6rem + 46rem + 6rem + 1rem */
-    @media (59rem <= width) {
-      margin-inline-start: calc(env(safe-area-inset-left) + var(--wrapper-margin-max) * -1);
-      margin-inline-end: calc(
-        (
-            (100vw - 1rem) -
-              (var(--wrapper-inline-size) + env(safe-area-inset-right) + var(--wrapper-margin-max))
-          ) * -1
-      );
-      padding-inline-start: calc(env(safe-area-inset-left) + var(--wrapper-margin-max));
-      padding-inline-end: calc(env(safe-area-inset-right) + var(--wrapper-margin-max));
+    /* 6rem + 46rem + 6rem */
+    @container root (width > 58rem) {
+      margin-inline-end: calc((100cqi - 100% - var(--wrapper-margin-left)) * -1);
     }
   }