From 486d34172f3513a6e730957f1b679db278d6ee4b Mon Sep 17 00:00:00 2001
From: Aaron Agarunov <agarunov.aaron@gmail.com>
Date: Sun, 21 Jul 2024 19:51:53 -0400
Subject: [PATCH] Add columnWidth styles

---
 src/app/globals.css          |  2 +-
 src/app/tags/[slug]/page.tsx |  2 +-
 src/lib/images/masonry.tsx   | 20 ++++++++++++++++++--
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 64e1c4c..8f02c15 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -56,7 +56,7 @@
   }
 }
 .fade-in-delayed {
-  animation: fadeInDelayed 2.5s ease-in-out;
+  animation: fadeInDelayed 3.6s ease-in-out;
 }
 @keyframes blink {
   50% {
diff --git a/src/app/tags/[slug]/page.tsx b/src/app/tags/[slug]/page.tsx
index 09da16c..8fccee3 100644
--- a/src/app/tags/[slug]/page.tsx
+++ b/src/app/tags/[slug]/page.tsx
@@ -23,7 +23,7 @@ async function Tag({ params: { slug } }: { params: { slug: string } }) {
         <Nav albums={albums} />
       </div>
 
-      <div className="flex-col">
+      <div className="flex-col max-sm:px-2">
         <div
           className={`mt-12 inline-block px-2 py-1
           border-dashed border border-gray-200 rounded-md
diff --git a/src/lib/images/masonry.tsx b/src/lib/images/masonry.tsx
index 72a2f7a..bb49d09 100644
--- a/src/lib/images/masonry.tsx
+++ b/src/lib/images/masonry.tsx
@@ -17,6 +17,22 @@ const MasonryItem = ({ data: { url, width, height } }: { data: Photo }) => (
   </a>
 );
 
+function columnWidth() {
+  if (window.innerWidth > 2000) {
+    // 3xl
+    return 450;
+  } else if (window.innerWidth > 1536) {
+    // 2xl
+    return 400;
+  } else if (window.innerWidth > 1280) {
+    // xl
+    return 350;
+  } else {
+    // mobile-ish
+    return 250;
+  }
+}
+
 export const Masonry = ({
   items = [],
   ...props
@@ -34,7 +50,7 @@ export const Masonry = ({
     <section
       id="gallery"
       className={`h-full w-full
-      md:w-[500px] lg:w-[720px] xl:w-[1000px] 2xl:w-[1200px]
+      md:w-[500px] lg:w-[720px] xl:w-[1000px] 2xl:w-[1200px] 3xl:w-[1300px]
       px-2 sm:p-0
       fade-in-delayed`}
     >
@@ -42,7 +58,7 @@ export const Masonry = ({
         items={items}
         render={MasonryItem}
         columnGutter={window.innerWidth <= 512 ? 9 : 18}
-        columnWidth={window.innerWidth < 512 ? 250 : 350}
+        columnWidth={columnWidth()}
         overscanBy={1}
         {...props}
       />