use css round() instead of grid

yuheiy · Apr 7, 2024 · 437100c · 437100c
1 parent 7d6d04a
commit 437100c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 25 deletions.
diff --git a/src/styles/base/variables.wrapper.css b/src/styles/base/variables.wrapper.css
diff --git a/src/styles/components/prose.css b/src/styles/components/prose.css
@@ -43,17 +43,17 @@
   }
 
   pre {
-    margin-inline-start: calc(var(--wrapper-margin-left) * -1);
-    margin-inline-end: calc(var(--wrapper-margin-right) * -1);
-    padding-inline-start: var(--wrapper-margin-left);
-    padding-inline-end: var(--wrapper-margin-right);
-    padding-block: theme(spacing.5);
+    margin-inline: calc((100cqi - 100%) / 2 * -1);
+    padding: theme(spacing.5) calc((100cqi - 100%) / 2);
     font-size: theme(fontSize.sm);
     line-height: theme(lineHeight.tight);
 
     /* 6rem + 46rem + 6rem */
     @container root (width > 58rem) {
-      margin-inline-end: calc((100cqi - 100% - var(--wrapper-margin-left)) * -1);
+      margin-inline-start: calc(var(--wrapper-padding-left) * -1);
+      margin-inline-end: calc((100cqi - var(--wrapper-padding-left) - 100%) * -1);
+      padding-inline-start: var(--wrapper-padding-left);
+      padding-inline-end: var(--wrapper-padding-right);
     }
   }
 

diff --git a/src/styles/components/wrapper.css b/src/styles/components/wrapper.css
@@ -1,12 +1,24 @@
 .wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 1rem);
-  justify-content: center;
-  margin-inline-start: var(--wrapper-margin-right);
-  margin-inline-end: var(--wrapper-margin-left);
-  max-inline-size: var(--wrapper-inline-size);
+  --wrapper-column: 46rem;
+  --wrapper-padding-without-safe-area: clamp(
+    1rem,
+    max((100cqi - var(--wrapper-column)) / 2, 5vw),
+    6rem
+  );
+  --wrapper-padding-left: calc(
+    var(--wrapper-padding-without-safe-area) + env(safe-area-inset-left)
+  );
+  --wrapper-padding-right: calc(
+    var(--wrapper-padding-without-safe-area) + env(safe-area-inset-right)
+  );
+
+  box-sizing: content-box;
+  padding-inline-start: var(--wrapper-padding-left);
+  padding-inline-end: var(--wrapper-padding-right);
+  max-inline-size: var(--wrapper-column);
 
   > :where(*) {
-    grid-column: 1 / -1;
+    margin-inline: auto;
+    inline-size: round(down, 100%, 1rem);
   }
 }