Add columnWidth styles

agarun · Jul 21, 2024 · 486d341 · 486d341
1 parent 682d457
commit 486d341
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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,15 +50,15 @@ 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`}
     >
       <MasonicMasonry
         items={items}
         render={MasonryItem}
         columnGutter={window.innerWidth <= 512 ? 9 : 18}
-        columnWidth={window.innerWidth < 512 ? 250 : 350}
+        columnWidth={columnWidth()}
         overscanBy={1}
         {...props}
       />