Disable columns scroll snap for wider viewports

cheeaun · Aug 10, 2024 · c27275a · c27275a
1 parent ff29e93
commit c27275a
Showing 1 changed file with 7 additions and 1 deletion.
diff --git 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);