From 16da4fc8a8d6c896a06ede89b29e752b492d6bf3 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 11 Aug 2024 13:12:11 -0400
Subject: [PATCH] Optically center layouts @ new 3xl breakpoint

---
 src/app/layout.tsx          | 4 ++++
 src/components/SiteGrid.tsx | 7 +++++--
 tailwind.config.js          | 1 +
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 59aaec56..b53741ad 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -87,6 +87,10 @@ export default function RootLayout({
               <main className={clsx(
                 'mx-3 mb-3',
                 'lg:mx-6 lg:mb-6',
+                '3xl:mx-auto',
+                '3xl:w-[1280px]',
+                // Offset defined in components/SiteGrid.tsx
+                '3xl:translate-x-[163px]',
               )}>
                 <Nav siteDomainOrTitle={SITE_DOMAIN_OR_TITLE} />
                 <AdminBatchEditPanel />
diff --git a/src/components/SiteGrid.tsx b/src/components/SiteGrid.tsx
index 6c8e38d8..68275ad1 100644
--- a/src/components/SiteGrid.tsx
+++ b/src/components/SiteGrid.tsx
@@ -2,11 +2,14 @@ import { clsx } from 'clsx/lite';
 import { RefObject } from 'react';
 
 /*
-  Max widths (lg and up)
+  Max widths
   Main: 954px +
   Sidebar: 302px +
   Gap: 24px =
-  Total: 1280px
+  Total: 1280px (7xl)
+  -
+  Used for main content offset (app/layout.tsx)
+  Column offset: (302px + 24px) / 2 = 163px
 */
 
 export default function SiteGrid({
diff --git a/tailwind.config.js b/tailwind.config.js
index aa7a96fe..6402747a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
   theme: {
     screens: {
       'xs': '390px',
+      '3xl': '1640px',
       ...defaultTheme.screens,
     },
     fontSize: {