Merge pull request #135 from sambecker/centered-layout

Centered layout

src/app/layout.tsx

@@ -87,6 +87,9 @@ export default function RootLayout({
               <main className={clsx(
                 'mx-3 mb-3',
                 'lg:mx-6 lg:mb-6',
+                // Center on large screens
+                // 1280px width defined in components/SiteGrid.tsx
+                '3xl:mx-auto 3xl:w-[1280px]',
               )}>
                 <Nav siteDomainOrTitle={SITE_DOMAIN_OR_TITLE} />
                 <AdminBatchEditPanel />

src/components/SiteGrid.tsx

@@ -1,6 +1,16 @@
 import { clsx } from 'clsx/lite';
 import { RefObject } from 'react';
 
+/*
+  MAX WIDTHS
+  Main: 954px +
+  Sidebar: 302px +
+  Gap: 24px =
+  Total: 1280px
+  -
+  Column offset: (302px + 24px) / 2 = 163px
+*/
+
 export default function SiteGrid({
   containerRef,
   className,
@@ -24,7 +34,9 @@ export default function SiteGrid({
         'grid-cols-1 md:grid-cols-12',
         'gap-x-4 lg:gap-x-6',
         'gap-y-4',
-        'max-w-7xl',
+        'max-w-[1280px]',
+        // Offset sidebar width when centering on large screens
+        '3xl:translate-x-[163px]',
         className,
       )}
     >

tailwind.config.js

@@ -10,6 +10,7 @@ module.exports = {
     screens: {
       'xs': '390px',
       ...defaultTheme.screens,
+      '3xl': '1640px',
     },
     fontSize: {
       'xs':   ['0.75rem', '1rem'],          // 12px on 16px