diff --git a/src/routes/(shell)/index.module.css b/src/routes/(shell)/index.module.css new file mode 100644 index 0000000..cdd3e8c --- /dev/null +++ b/src/routes/(shell)/index.module.css @@ -0,0 +1,39 @@ +.list { + anchor-name: --carousel; + overflow: auto; + scroll-snap-type: inline mandatory; + + display: grid; + grid-auto-flow: column; + + inline-size: 80%; + justify-self: center; + + & > li { + inline-size: 30vw; + list-style: none; + scroll-snap-align: start; + } + + &::scroll-button(inline-start), + &::scroll-button(inline-end) { + position: fixed; + position-anchor: --carousel; + } + + &::scroll-button(inline-start) { + --_inner: center span-inline-end; + --_outer: inline-start center; + + position-area: var(--_outer); + content: 'arrow_back' / 'Previous'; + } + + &::scroll-button(inline-end) { + --_inner: center span-inline-start; + --_outer: inline-end center; + + position-area: var(--_outer); + content: 'arrow_forward' / 'Next'; + } +} \ No newline at end of file diff --git a/src/routes/(shell)/index.tsx b/src/routes/(shell)/index.tsx index 70e3591..a130454 100644 --- a/src/routes/(shell)/index.tsx +++ b/src/routes/(shell)/index.tsx @@ -9,6 +9,7 @@ import { import { Show } from "solid-js"; import { List } from "~/components/list"; import { ListItem } from "~/features/overview/list-item"; +import css from './index.module.css'; export const route = { preload: async () => ({ @@ -29,11 +30,24 @@ export default function Home() { <>