Disable columns scroll snap for wider viewports

This commit is contained in:
Lim Chee Aun 2024-08-09 23:07:03 +08:00
parent ff29e93b4f
commit c27275a9af

View file

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