From c27275a9afa9d5c841cf03b479a3137178668851 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 9 Aug 2024 23:07:03 +0800
Subject: [PATCH] Disable columns scroll snap for wider viewports

---
 src/app.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 52245283..71c74d83 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2401,6 +2401,7 @@ ul.link-list li a .icon {
 /* COLUMNS */
 
 #columns {
+  --column-size: 360px;
   display: flex;
   width: 100vw;
   overflow-y: hidden;
@@ -2412,6 +2413,11 @@ ul.link-list li a .icon {
   overscroll-behavior-x: contain;
   /* This `transform` fixes horizontal scrolling for pointer devices on iPad */
   transform: translateZ(0);
+
+  /* 360px * 2 */
+  @media (min-width: 720px) {
+    scroll-snap-type: none;
+  }
 }
 /* #columns::-webkit-scrollbar {
   display: none;
@@ -2421,7 +2427,7 @@ ul.link-list li a .icon {
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overscroll-behavior: auto;
-  flex-basis: min(100vw, 360px);
+  flex-basis: min(100vw, var(--column-size));
   flex-shrink: 0;
   box-shadow: -1px 0 var(--bg-color), -2px 0 var(--drop-shadow-color),
     -3px 0 var(--bg-color);