From f1a425e49f5bee855a1d9c3f777762a9760e19fc Mon Sep 17 00:00:00 2001
From: Jochem Loedeman <j.m.loedeman@gmail.com>
Date: Sun, 8 Sep 2024 18:35:26 +0200
Subject: [PATCH] Two default columns

---
 app/index.html                   |  4 ++--
 app/scripts/distribute_images.js | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/app/index.html b/app/index.html
index ee4aeca..2678445 100644
--- a/app/index.html
+++ b/app/index.html
@@ -49,7 +49,7 @@
     </script>
 </head>
 
-<body class="bg-white h-screen text-black opacity-0 transition ease-in duration-700 mx-auto w-3/4">
+<body class="bg-white h-screen text-black opacity-0 transition ease-in duration-700 mx-auto w-11/12 xl:w-3/4">
     <!-- Navbar -->
     <header class="flex w-full overflow-hidden pt-16 pb-12">
         <!-- Navbar -->
@@ -93,7 +93,7 @@
         </nav>
     </header>
     <!-- Content -->
-    <div id="gallery" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-5">
+    <div id="gallery" class="grid grid-cols-2 lg:grid-cols-3 gap-x-5">
     </div>
 
     <!-- Footer -->
diff --git a/app/scripts/distribute_images.js b/app/scripts/distribute_images.js
index 2a4d1ba..6da5f2c 100644
--- a/app/scripts/distribute_images.js
+++ b/app/scripts/distribute_images.js
@@ -17,7 +17,7 @@ const images = [
     "image_14.jpg",
 ];
 
-const twoColumnThreshold = 768;
+// const twoColumnThreshold = 768;
 const threeColumnThreshold = 1024;
 
 // Function to distribute images into columns
@@ -26,13 +26,13 @@ function distributeImages() {
 
     gallery.innerHTML = ''; // Clear existing content
     // Get the number of columns based on the current screen size
-    let columnCount = 1;
+    let columnCount = 2;
     if (window.innerWidth >= threeColumnThreshold) {
         columnCount = 3;
     }
-    else if (window.innerWidth >= twoColumnThreshold) {
-        columnCount = 2;
-    }
+    // else if (window.innerWidth >= twoColumnThreshold) {
+    //     columnCount = 2;
+    // }
 
     // Create columns
     const columns = [];
