174 lines
3.1 KiB
CSS
174 lines
3.1 KiB
CSS
@property --thumb-image {
|
|
syntax: "<image>";
|
|
inherits: true;
|
|
}
|
|
|
|
.container {
|
|
isolation: isolate;
|
|
display: block grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 100%;
|
|
|
|
container-type: inline-size;
|
|
|
|
overflow: hidden visible;
|
|
scroll-snap-type: inline mandatory;
|
|
overscroll-behavior-inline: contain;
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
scroll-marker-group: after;
|
|
|
|
&::scroll-marker-group {
|
|
display: block grid;
|
|
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 5em;
|
|
gap: 1rem;
|
|
justify-content: start;
|
|
|
|
padding-inline: var(--size-6);
|
|
|
|
inline-size: 100%;
|
|
block-size: 8.333333em;
|
|
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.page {
|
|
--__i: var(--sibling-index);
|
|
--__c: var(--sibling-count);
|
|
scroll-snap-align: center;
|
|
position: relative;
|
|
display: grid;
|
|
grid: repeat(3, auto) / 15em 1fr;
|
|
grid-template-areas:
|
|
"thumbnail . ."
|
|
"thumbnail title cta"
|
|
"thumbnail detail detail"
|
|
"thumbnail summary summary";
|
|
align-content: end;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: var(--size-6);
|
|
block-size: 80vh;
|
|
overflow: clip;
|
|
container-type: scroll-state;
|
|
|
|
animation:
|
|
animate-in linear forwards,
|
|
animate-out linear forwards;
|
|
animation-timeline: view(inline);
|
|
animation-range: entry, exit;
|
|
|
|
color: var(--gray-0);
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
background: linear-gradient(182.5deg, transparent 20%, var(--surface-2) 90%),
|
|
linear-gradient(transparent 50%, #0007 75%);
|
|
}
|
|
|
|
&::scroll-marker {
|
|
display: block;
|
|
content: " ";
|
|
|
|
inline-size: 5rem;
|
|
aspect-ratio: 3 / 5;
|
|
|
|
background: var(--thumb-image) center / cover no-repeat;
|
|
background-color: cornflowerblue;
|
|
border-radius: var(--radius-2);
|
|
|
|
transform: scale(1);
|
|
transform-origin: top left;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
&::scroll-marker:target-current {
|
|
/* outline: 1px solid white; */
|
|
transform: translate(calc(-0cqi - (6rem * (var(--__i) - 1))), -29rem)
|
|
scale(3);
|
|
}
|
|
}
|
|
|
|
.title {
|
|
grid-area: title;
|
|
font-size: 2.5em;
|
|
z-index: 1;
|
|
filter: contrast(9);
|
|
}
|
|
|
|
.cta {
|
|
grid-area: cta;
|
|
z-index: 1;
|
|
border-radius: var(--radius-2);
|
|
background-color: var(--gray-2);
|
|
color: var(--gray-8);
|
|
text-decoration-color: var(--gray-8);
|
|
padding: var(--size-3);
|
|
font-weight: var(--font-weight-9);
|
|
outline-offset: var(--size-1);
|
|
|
|
&:focus-visible {
|
|
outline: 1px solid var(--gray-2);
|
|
}
|
|
}
|
|
|
|
.thumbnail {
|
|
grid-area: thumbnail;
|
|
inline-size: 15em;
|
|
aspect-ratio: 3 / 5;
|
|
border-radius: var(--radius-3);
|
|
object-fit: cover;
|
|
object-position: center;
|
|
z-index: 1;
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
.background {
|
|
position: absolute;
|
|
inset: 0;
|
|
block-size: 100%;
|
|
inline-size: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
z-index: 0;
|
|
}
|
|
|
|
.detail {
|
|
grid-area: detail;
|
|
z-index: 1;
|
|
}
|
|
|
|
.summary {
|
|
grid-area: summary;
|
|
text-wrap: balance;
|
|
z-index: 1;
|
|
}
|
|
|
|
@keyframes animate-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes animate-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
20% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|