76 lines
No EOL
1.4 KiB
CSS
76 lines
No EOL
1.4 KiB
CSS
.container {
|
|
display: grid;
|
|
grid-auto-flow: row;
|
|
inline-size: 100%;
|
|
}
|
|
|
|
.heading {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.list {
|
|
list-style-type: none;
|
|
|
|
container-type: inline-size;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
|
|
gap: 2em;
|
|
padding: 12em 4em 5em;
|
|
scroll-padding: 4em;
|
|
margin: -10em -4em 0em;
|
|
|
|
overflow: visible auto;
|
|
scroll-snap-type: inline mandatory;
|
|
overscroll-behavior-inline: contain;
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* the before and afters have unsnappable elements that create bouncy edges to the scroll */
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
&::before {
|
|
order: 0;
|
|
inline-size: 15cqi;
|
|
}
|
|
|
|
&::after {
|
|
order: 11;
|
|
inline-size: 50cqi;
|
|
}
|
|
|
|
& > li {
|
|
scroll-snap-align: start;
|
|
container-type: scroll-state;
|
|
padding: 0;
|
|
position: relative;
|
|
|
|
z-index: calc(var(--sibling-count) - var(--sibling-index));
|
|
|
|
&:has(> :hover, > :focus-within) {
|
|
z-index: calc(var(--sibling-count) + 1);
|
|
}
|
|
|
|
& > * {
|
|
@supports (animation-timeline: view()) {
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
animation: slide-in linear both;
|
|
animation-timeline: view(inline);
|
|
animation-range: cover -100cqi contain 15cqi;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in {
|
|
from {
|
|
transform: translateX(-100cqi) scale(0.5);
|
|
}
|
|
} |