fix: Layout max width (nodejs#6174)

fix: layout sizing moved to the container
NOUIY · Dec 2, 2023 · 38dc953 · 38dc953
1 parent 191671e
commit 38dc953
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/layouts/New/layouts.module.css b/layouts/New/layouts.module.css
@@ -7,13 +7,15 @@
 }
 
 .articleLayout {
-  @apply m-[0_auto]
+  @apply mx-auto
     grid
+    w-full
+    max-w-8xl
     grid-rows-[1fr]
     overflow-hidden
     grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
-    sm:grid-cols-[200px_1fr_200px]
-    xl:grid-cols-[320px_1fr_320px]
+    sm:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
+    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)]
     xs:m-0
     xs:block
     xs:overflow-auto;
@@ -25,7 +27,6 @@
   > *:nth-child(2) {
     @apply flex
       w-full
-      max-w-5xl
       flex-col
       items-start
       gap-6
@@ -36,7 +37,7 @@
       p-12
       grid-in-[main]
       dark:bg-gradient-subtle-dark
-      xl:px-[4.5rem]
+      xl:px-18
       xs:bg-none
       xs:p-4
       xs:dark:bg-none;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -130,8 +130,9 @@ export default {
         xs: '0px 1px 2px 0px theme(colors.shadow / 5%)',
         lg: '0px 4px 6px -2px theme(colors.shadow / 3%), 0px 12px 16px -4px theme(colors.shadow / 8%)',
       },
-      spacing: { '4.5': '1.125rem' },
+      spacing: { '4.5': '1.125rem', '18': '4.5rem' },
       aria: { current: 'current="page"' },
+      maxWidth: { '8xl': '90rem' },
     },
   },
   darkMode: ['class', '[data-theme="dark"]'],