applied the cool new carousel css feature!
This commit is contained in:
parent
6a0c1cb377
commit
3142ac6185
SSH key fingerprint:
SHA256:nG82MUfuVdRVyCKKWqhY+pCrbz9nbX6uzUns4RKa1Pg
8 changed files with 233 additions and 75 deletions
|
|
@ -1,39 +1,121 @@
|
|||
.list {
|
||||
.carousel {
|
||||
display: block grid;
|
||||
grid: auto 1fr / 100%;
|
||||
|
||||
& > header {
|
||||
anchor-name: --carousel;
|
||||
overflow: auto;
|
||||
scroll-snap-type: inline mandatory;
|
||||
padding-inline: 3rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
& > ul {
|
||||
list-style-type: none;
|
||||
|
||||
container-type: size;
|
||||
inline-size: 100%;
|
||||
block-size: min(60svh, 720px);
|
||||
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
|
||||
inline-size: 80%;
|
||||
overflow: visible auto;
|
||||
scroll-snap-type: inline mandatory;
|
||||
overscroll-behavior-inline: contain;
|
||||
|
||||
justify-self: center;
|
||||
|
||||
& > li {
|
||||
inline-size: 30vw;
|
||||
list-style: none;
|
||||
scroll-snap-align: start;
|
||||
gap: 1em;
|
||||
padding-inline: 2em;
|
||||
scroll-padding-inline: 2em;
|
||||
padding-block: 2em 4em;
|
||||
margin-block-end: 5em;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
&::scroll-button(inline-start),
|
||||
&::scroll-button(inline-end) {
|
||||
position: fixed;
|
||||
position-anchor: --carousel;
|
||||
/* 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;
|
||||
}
|
||||
|
||||
&::scroll-button(*) {
|
||||
z-index: 20;
|
||||
background: oklch(from var(--surface-1) l c h / 50%);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
&::scroll-button(inline-start) {
|
||||
--_inner: center span-inline-end;
|
||||
--_outer: inline-start center;
|
||||
|
||||
position-area: var(--_outer);
|
||||
content: 'arrow_back' / 'Previous';
|
||||
position-area: center span-inline-start;
|
||||
content: "◄" / "Previous";
|
||||
}
|
||||
|
||||
&::scroll-button(inline-end) {
|
||||
--_inner: center span-inline-start;
|
||||
--_outer: inline-end center;
|
||||
|
||||
position-area: var(--_outer);
|
||||
content: 'arrow_forward' / 'Next';
|
||||
position-area: center span-inline-end;
|
||||
content: "►" / "Next";
|
||||
}
|
||||
}
|
||||
|
||||
& > li {
|
||||
scroll-snap-align: start;
|
||||
container-type: scroll-state;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
order: calc(var(--sibling-count) - var(--sibling-index));
|
||||
z-index: var(--sibling-index);
|
||||
|
||||
& > figure {
|
||||
@supports (animation-timeline: view()) {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: slide-in linear both;
|
||||
animation-timeline: view(inline);
|
||||
animation-range: cover -100cqi contain 25cqi;
|
||||
}
|
||||
}
|
||||
@container scroll-state(snapped: inline) {
|
||||
outline: 1px solid var(--gray-1);
|
||||
outline-offset: 10px;
|
||||
}
|
||||
|
||||
flex-shrink: 0;
|
||||
block-size: 100cqb;
|
||||
aspect-ratio: 9/16;
|
||||
background: light-dark(#ccc, #444);
|
||||
box-shadow: var(--shadow-5);
|
||||
border-radius: 20px;
|
||||
overflow: clip;
|
||||
|
||||
display: flex;
|
||||
|
||||
@container (width < 480px) {
|
||||
block-size: 50cqb;
|
||||
}
|
||||
|
||||
& > img {
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
from {
|
||||
transform: translateX(-100cqi) scale(0.75);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,47 +7,74 @@ import {
|
|||
getContinueWatching,
|
||||
} from "~/features/content";
|
||||
import { Show } from "solid-js";
|
||||
import { List } from "~/components/list";
|
||||
import { ListItem } from "~/features/overview/list-item";
|
||||
import css from './index.module.css';
|
||||
import css from "./index.module.css";
|
||||
|
||||
export const route = {
|
||||
preload: async () => ({
|
||||
highlight: await getEntry("14"),
|
||||
categories: await listCategories(),
|
||||
continue: await getContinueWatching("a9c51af84bf54578a99ab4dd0ebf0763"),
|
||||
}),
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
const highlight = createAsync(() => getEntry("14"));
|
||||
const categories = createAsync(() => listCategories());
|
||||
const continueWatching = createAsync(() =>
|
||||
getContinueWatching("a9c51af84bf54578a99ab4dd0ebf0763"),
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>Home</Title>
|
||||
|
||||
<ul class={css.list}>
|
||||
<li>Item 0</li>
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
<li>Item 4</li>
|
||||
<li>Item 5</li>
|
||||
<li>Item 6</li>
|
||||
<li>Item 7</li>
|
||||
<li>Item 8</li>
|
||||
<li>Item 9</li>
|
||||
</ul>
|
||||
{/* <div class={css.carousel}>
|
||||
<header>some category</header>
|
||||
|
||||
{/* <Show when={continueWatching()}>{
|
||||
entries => <List label="Continue watching" items={entries()}>
|
||||
{(item) => <ListItem entry={item()} />}
|
||||
</List>
|
||||
}</Show> */}
|
||||
<ul>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="https://assets.codepen.io/2585/1.jpg" alt="Item 1" />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="https://assets.codepen.io/2585/2.avif" alt="Item 2" />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="https://assets.codepen.io/2585/3.avif" alt="Item 3" />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="https://assets.codepen.io/2585/4.avif" alt="Item 4" />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="https://assets.codepen.io/2585/5.avif" alt="Item 5" />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="https://assets.codepen.io/2585/6.avif" alt="Item 6" />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="https://assets.codepen.io/2585/7.avif" alt="Item 7" />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="https://assets.codepen.io/2585/8.avif" alt="Item 8" />
|
||||
</figure>
|
||||
</li>
|
||||
<li>
|
||||
<figure>
|
||||
<img src="https://assets.codepen.io/2585/9.avif" alt="Item 9" />
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
</div> */}
|
||||
|
||||
<Show when={highlight() && categories()}>
|
||||
<Overview highlight={highlight()!} categories={categories()!} />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue