From d3e209907f44fa8f5c62b0786b2ab312ed5604f5 Mon Sep 17 00:00:00 2001
From: Johnomated <34685272+Johnomated@users.noreply.github.com>
Date: Fri, 26 Jul 2024 23:15:46 -0500
Subject: [PATCH 1/8] Content can be centered on large screens with
 NEXT_PUBLIC_CENTERED_ON_LARGE_SCREENS env variable

Added CENTERED_LARGE_SCREENS variable in config.ts that gets NEXT_PUBLIC_CENTERED_ON_LARGE_SCREENS value from environment variables. Modified SiteGrid.tsx to use CENTERED_LARGE_SCREENS and adjust the pages column layout if it's true.
---
 src/app/layout.tsx          |  3 +++
 src/components/SiteGrid.tsx | 16 ++++++++++++++--
 src/site/config.ts          |  2 ++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 59aaec56..7fff3211 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { clsx } from 'clsx/lite';
 import { IBM_Plex_Mono } from 'next/font/google';
 import {
   BASE_URL,
+  CENTERED_LARGE_SCREENS,
   DEFAULT_THEME,
   SITE_DESCRIPTION,
   SITE_DOMAIN_OR_TITLE,
@@ -27,6 +28,8 @@ const ibmPlexMono = IBM_Plex_Mono({
   subsets: ['latin'],
   weight: ['400', '500', '700'],
   variable: '--font-ibm-plex-mono',
+  display: 'swap', // font wouldn't load in vercel dev environment, solution from link below
+  // https://stackoverflow.com/a/76484168
 });
 
 export const metadata: Metadata = {
diff --git a/src/components/SiteGrid.tsx b/src/components/SiteGrid.tsx
index 931fec17..6d04648a 100644
--- a/src/components/SiteGrid.tsx
+++ b/src/components/SiteGrid.tsx
@@ -1,5 +1,6 @@
 import { clsx } from 'clsx/lite';
 import { RefObject } from 'react';
+import { CENTERED_LARGE_SCREENS } from '@/site/config';
 
 export default function SiteGrid({
   containerRef,
@@ -25,18 +26,29 @@ export default function SiteGrid({
         'gap-x-4 lg:gap-x-6',
         'gap-y-4',
         'max-w-7xl',
+        CENTERED_LARGE_SCREENS && 'mx-auto',
         className,
       )}
     >
       <div className={clsx(
-        'col-span-1 md:col-span-9',
+        // 'col-span-1 md:col-span-9', // original
+        // 'col-span-1 md:col-span-9 md:col-start-2', // without env variable
+        CENTERED_LARGE_SCREENS
+          // ? 'col-span-1 md:col-span-9 md:col-start-2' // option for medium screens and up
+          ? 'col-span-1 md:col-span-9 lg:col-start-2'
+          : 'col-span-1 md:col-span-9',
         sideFirstOnMobile && 'order-2 md:order-none',
       )}>
         {contentMain}
       </div>
       {contentSide &&
         <div className={clsx(
-          'col-span-1 md:col-span-3',
+          // 'col-span-1 md:col-span-3', // original
+          // 'col-span-1 md:col-span-2', // without env variable
+          CENTERED_LARGE_SCREENS
+            // ? 'col-span-1 md:col-span-2' // option for medium screens and up
+            ? 'col-span-1 md:col-span-3 lg:col-span-2'
+            : 'col-span-1 md:col-span-3',
           sideFirstOnMobile && 'order-1 md:order-none',
           sideHiddenOnMobile && 'hidden md:block',
         )}>
diff --git a/src/site/config.ts b/src/site/config.ts
index a7097cc6..ad01fbd8 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -155,6 +155,8 @@ export const SHOW_FILM_SIMULATIONS =
   process.env.NEXT_PUBLIC_HIDE_FILM_SIMULATIONS !== '1';
 export const SHOW_EXIF_DATA =
   process.env.NEXT_PUBLIC_HIDE_EXIF_DATA !== '1';
+export const CENTERED_LARGE_SCREENS =
+  process.env.NEXT_PUBLIC_CENTERED_ON_LARGE_SCREENS === '1';
 export const GRID_ASPECT_RATIO =
   process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
     ? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)

From 1b45eb41ae20ddba76b30877de33e6748d515719 Mon Sep 17 00:00:00 2001
From: Johnomated <34685272+Johnomated@users.noreply.github.com>
Date: Sat, 27 Jul 2024 00:23:07 -0500
Subject: [PATCH 2/8] Changed centering breakpoint from lg to xl

---
 src/components/SiteGrid.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/SiteGrid.tsx b/src/components/SiteGrid.tsx
index 6d04648a..b119e196 100644
--- a/src/components/SiteGrid.tsx
+++ b/src/components/SiteGrid.tsx
@@ -32,10 +32,10 @@ export default function SiteGrid({
     >
       <div className={clsx(
         // 'col-span-1 md:col-span-9', // original
-        // 'col-span-1 md:col-span-9 md:col-start-2', // without env variable
+        // 'col-span-1 md:col-span-9 xl:col-start-2', // without env variable
         CENTERED_LARGE_SCREENS
-          // ? 'col-span-1 md:col-span-9 md:col-start-2' // option for medium screens and up
-          ? 'col-span-1 md:col-span-9 lg:col-start-2'
+          // ? 'col-span-1 md:col-span-9 lg:col-start-2' // option for lg screens and up
+          ? 'col-span-1 md:col-span-9 xl:col-start-2'
           : 'col-span-1 md:col-span-9',
         sideFirstOnMobile && 'order-2 md:order-none',
       )}>
@@ -44,10 +44,10 @@ export default function SiteGrid({
       {contentSide &&
         <div className={clsx(
           // 'col-span-1 md:col-span-3', // original
-          // 'col-span-1 md:col-span-2', // without env variable
+          // 'col-span-1 md:col-span-3 xl:col-span-2', // without env variable
           CENTERED_LARGE_SCREENS
-            // ? 'col-span-1 md:col-span-2' // option for medium screens and up
-            ? 'col-span-1 md:col-span-3 lg:col-span-2'
+            // ? 'col-span-1 lg:col-span-2' // option for lg screens and up
+            ? 'col-span-1 md:col-span-3 xl:col-span-2'
             : 'col-span-1 md:col-span-3',
           sideFirstOnMobile && 'order-1 md:order-none',
           sideHiddenOnMobile && 'hidden md:block',

From b704a701c6cc8e67b292b7550a24c86d05b764f9 Mon Sep 17 00:00:00 2001
From: Johnomated <34685272+Johnomated@users.noreply.github.com>
Date: Sat, 27 Jul 2024 10:16:22 -0500
Subject: [PATCH 3/8] Edited /components/Badge.tsx to be a block element

If the text for tags/cameras on the grid page overflowed to a second line then the background did not grow with the text. Making the element a block and slightly increasing the padding keeps the text/background similar to the original style while also allowing the background to match the text if it is multiple lines.
---
 src/components/Badge.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 47505733..380b1dba 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -28,7 +28,9 @@ export default function Badge({
     case 'small':
       return clsx(
         'h-max-baseline',
-        'px-[5px] py-[2.75px]',
+        // 'px-[5px] py-[2.75px]', //original padding
+        'block', // added to keep gray background around text when overflowed
+        'px-[6px] py-[5px]', // increased padding for block and to stop content shift
         'text-[0.7rem] font-medium rounded-[0.25rem]',
         highContrast
           ? 'text-invert bg-invert'

From 1fbe63454f33405c8b084e18ee6b7ac3d98ee5d5 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 11 Aug 2024 12:29:44 -0400
Subject: [PATCH 4/8] Document explicit specs to <SiteGrid />

---
 src/app/layout.tsx          |  3 ---
 src/components/Badge.tsx    |  4 +---
 src/components/SiteGrid.tsx | 24 ++++++++++--------------
 src/site/config.ts          |  2 --
 4 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7fff3211..59aaec56 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,7 +4,6 @@ import { clsx } from 'clsx/lite';
 import { IBM_Plex_Mono } from 'next/font/google';
 import {
   BASE_URL,
-  CENTERED_LARGE_SCREENS,
   DEFAULT_THEME,
   SITE_DESCRIPTION,
   SITE_DOMAIN_OR_TITLE,
@@ -28,8 +27,6 @@ const ibmPlexMono = IBM_Plex_Mono({
   subsets: ['latin'],
   weight: ['400', '500', '700'],
   variable: '--font-ibm-plex-mono',
-  display: 'swap', // font wouldn't load in vercel dev environment, solution from link below
-  // https://stackoverflow.com/a/76484168
 });
 
 export const metadata: Metadata = {
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 380b1dba..47505733 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -28,9 +28,7 @@ export default function Badge({
     case 'small':
       return clsx(
         'h-max-baseline',
-        // 'px-[5px] py-[2.75px]', //original padding
-        'block', // added to keep gray background around text when overflowed
-        'px-[6px] py-[5px]', // increased padding for block and to stop content shift
+        'px-[5px] py-[2.75px]',
         'text-[0.7rem] font-medium rounded-[0.25rem]',
         highContrast
           ? 'text-invert bg-invert'
diff --git a/src/components/SiteGrid.tsx b/src/components/SiteGrid.tsx
index b119e196..6c8e38d8 100644
--- a/src/components/SiteGrid.tsx
+++ b/src/components/SiteGrid.tsx
@@ -1,6 +1,13 @@
 import { clsx } from 'clsx/lite';
 import { RefObject } from 'react';
-import { CENTERED_LARGE_SCREENS } from '@/site/config';
+
+/*
+  Max widths (lg and up)
+  Main: 954px +
+  Sidebar: 302px +
+  Gap: 24px =
+  Total: 1280px
+*/
 
 export default function SiteGrid({
   containerRef,
@@ -26,29 +33,18 @@ export default function SiteGrid({
         'gap-x-4 lg:gap-x-6',
         'gap-y-4',
         'max-w-7xl',
-        CENTERED_LARGE_SCREENS && 'mx-auto',
         className,
       )}
     >
       <div className={clsx(
-        // 'col-span-1 md:col-span-9', // original
-        // 'col-span-1 md:col-span-9 xl:col-start-2', // without env variable
-        CENTERED_LARGE_SCREENS
-          // ? 'col-span-1 md:col-span-9 lg:col-start-2' // option for lg screens and up
-          ? 'col-span-1 md:col-span-9 xl:col-start-2'
-          : 'col-span-1 md:col-span-9',
+        'col-span-1 md:col-span-9',
         sideFirstOnMobile && 'order-2 md:order-none',
       )}>
         {contentMain}
       </div>
       {contentSide &&
         <div className={clsx(
-          // 'col-span-1 md:col-span-3', // original
-          // 'col-span-1 md:col-span-3 xl:col-span-2', // without env variable
-          CENTERED_LARGE_SCREENS
-            // ? 'col-span-1 lg:col-span-2' // option for lg screens and up
-            ? 'col-span-1 md:col-span-3 xl:col-span-2'
-            : 'col-span-1 md:col-span-3',
+          'col-span-1 md:col-span-3',
           sideFirstOnMobile && 'order-1 md:order-none',
           sideHiddenOnMobile && 'hidden md:block',
         )}>
diff --git a/src/site/config.ts b/src/site/config.ts
index ad01fbd8..a7097cc6 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -155,8 +155,6 @@ export const SHOW_FILM_SIMULATIONS =
   process.env.NEXT_PUBLIC_HIDE_FILM_SIMULATIONS !== '1';
 export const SHOW_EXIF_DATA =
   process.env.NEXT_PUBLIC_HIDE_EXIF_DATA !== '1';
-export const CENTERED_LARGE_SCREENS =
-  process.env.NEXT_PUBLIC_CENTERED_ON_LARGE_SCREENS === '1';
 export const GRID_ASPECT_RATIO =
   process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
     ? parseFloat(process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO)

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 5/8] 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: {

From 3fb43e49507cd36e19cf7e3d4abb96986260fb02 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 11 Aug 2024 13:20:20 -0400
Subject: [PATCH 6/8] Move optical offset to <SiteGrid />

---
 src/app/layout.tsx          | 3 +--
 src/components/SiteGrid.tsx | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b53741ad..2ff96722 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -88,9 +88,8 @@ export default function RootLayout({
                 'mx-3 mb-3',
                 'lg:mx-6 lg:mb-6',
                 '3xl:mx-auto',
+                // Width defined in components/SiteGrid.tsx
                 '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 68275ad1..0d46552d 100644
--- a/src/components/SiteGrid.tsx
+++ b/src/components/SiteGrid.tsx
@@ -36,6 +36,7 @@ export default function SiteGrid({
         'gap-x-4 lg:gap-x-6',
         'gap-y-4',
         'max-w-7xl',
+        '3xl:translate-x-[163px]',
         className,
       )}
     >

From 7e1273250733f5fa733174f0bbe086c8529a8b87 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 11 Aug 2024 16:02:47 -0400
Subject: [PATCH 7/8] Adjust site grid documentation

---
 src/app/layout.tsx          | 6 +++---
 src/components/SiteGrid.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2ff96722..8b229bd6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -87,9 +87,9 @@ export default function RootLayout({
               <main className={clsx(
                 'mx-3 mb-3',
                 'lg:mx-6 lg:mb-6',
-                '3xl:mx-auto',
-                // Width defined in components/SiteGrid.tsx
-                '3xl:w-[1280px]',
+                // Center on large screens
+                // 1280px width defined in components/SiteGrid.tsx
+                '3xl:mx-auto 3xl:w-[1280px]',
               )}>
                 <Nav siteDomainOrTitle={SITE_DOMAIN_OR_TITLE} />
                 <AdminBatchEditPanel />
diff --git a/src/components/SiteGrid.tsx b/src/components/SiteGrid.tsx
index 0d46552d..7b02ded7 100644
--- a/src/components/SiteGrid.tsx
+++ b/src/components/SiteGrid.tsx
@@ -2,13 +2,12 @@ import { clsx } from 'clsx/lite';
 import { RefObject } from 'react';
 
 /*
-  Max widths
+  MAX WIDTHS
   Main: 954px +
   Sidebar: 302px +
   Gap: 24px =
-  Total: 1280px (7xl)
+  Total: 1280px
   -
-  Used for main content offset (app/layout.tsx)
   Column offset: (302px + 24px) / 2 = 163px
 */
 
@@ -35,7 +34,8 @@ 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,
       )}

From ad72fb205f912b604bbc1f7a522d98f3dc49c0d8 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 11 Aug 2024 16:10:09 -0400
Subject: [PATCH 8/8] Re-order tailwind screen sizes

---
 tailwind.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 6402747a..f86a24d3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,8 +9,8 @@ module.exports = {
   theme: {
     screens: {
       'xs': '390px',
-      '3xl': '1640px',
       ...defaultTheme.screens,
+      '3xl': '1640px',
     },
     fontSize: {
       'xs':   ['0.75rem', '1rem'],          // 12px on 16px