diff options
| -rw-r--r-- | apps/website/src/components/base/Slider.astro | 66 | ||||
| -rw-r--r-- | apps/website/src/layouts/Layout.astro | 2 | ||||
| -rw-r--r-- | apps/website/src/pages/projects/oneconfig.astro | 4 |
3 files changed, 47 insertions, 25 deletions
diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro index 95ffd05..ae4bbae 100644 --- a/apps/website/src/components/base/Slider.astro +++ b/apps/website/src/components/base/Slider.astro @@ -4,45 +4,67 @@ import type { HTMLAttributes } from 'astro/types'; interface Props extends HTMLAttributes<'div'> { dir?: string wrapperClass?: string + childrenNum: number + childrenSize?: string + speed?: string } const { dir = 'left', wrapperClass = '', + childrenNum, + childrenSize = '256px', + speed = '15s', } = Astro.props; + --- <div class={ - `w-full bg-blue-100 flex flex-row gap-2.5 overflow-hidden slider + `w-full bg-blue-100 slider ${dir === 'right' ? 'reverse' : ''} ${wrapperClass}` }> - <slot /> + <div class="wrapper flex flex-row gap-2.5"> + <slot class="content" /> + <slot class="content" /> + </div> </div> -<!-- might be cheating a bit using global styles here but at least it lets you use slots --> -<style is:global lang="scss"> - $sliderNum: 7; /* TODO: figure out a way to make this either automatic or settable via component var */ - @for $i from 1 through $sliderNum { - .slider > *:nth-child(#{$i}) { - animation: #{"slide" + $i} 10s linear infinite; - } - @keyframes #{"slide" + $i} { - 0% { - transform: translateX(0); - } - #{calc(99.999% / $sliderNum * $i)} { - transform: translateX(calc((-100% - 10px) * $i)); +<!-- + credit to modrinth's implementation! here is their CSS code: + https://github.com/modrinth/knossos/blob/d6ba3f3adfd8f52b85f83e53660d3d87cd0bc9ea/pages/index.vue#L620-L675 + oh and since theirs is in AGPL, please note that this codeblock is also AGPL +--> +<style lang="scss" define:vars={{ childrenNum, childrenSize, speed }}> + .slider { + .wrapper { + animation: var(--speed) linear infinite slide; + @media (prefers-reduced-motion) { + animation: none; } - #{calc(99.999% / $sliderNum * $i + 0.001%)} { - transform: translateX(calc((100% + 10px) * ($sliderNum - $i))); + @keyframes slide { + from { + transform: translateX(0); + } + to { + transform: translateX(calc((var(--childrenSize) + 10px) * -1 * var(--childrenNum))); + } } - 100% { - transform: translateX(0); + } + &:hover > .wrapper, &.reverse:hover > .wrapper { + /* TODO: Possibly add fancy hover card anim? */ + animation-play-state: paused; + } + &.reverse > .wrapper { + animation: var(--speed) linear infinite slide-reverse; + @keyframes slide-reverse { + from { + transform: translateX(calc((var(--childrenSize) + 10px) * -1 * var(--childrenNum))); + } + to { + transform: translateX(0); + } } } } - .slider.reverse > * { - animation-direction: reverse; - } </style> diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro index 1af3a1e..56b4abc 100644 --- a/apps/website/src/layouts/Layout.astro +++ b/apps/website/src/layouts/Layout.astro @@ -34,7 +34,7 @@ const { <title>{title}</title> </head> - <body class="bg-gray-50"> + <body class="bg-gray-50 overflow-x-hidden"> <Navbar/> <main class="min-h-screen h-auto"> <slot/> diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro index e9728a1..e302059 100644 --- a/apps/website/src/pages/projects/oneconfig.astro +++ b/apps/website/src/pages/projects/oneconfig.astro @@ -126,7 +126,7 @@ import { Code } from 'astro:components'; </div> </Section> <!-- TODO: add more 3rd party mods, like DSM PSS and Neu maybe --> - <Slider wrapperClass="-mb-40 pb-4"> + <Slider wrapperClass="-mb-40 pb-4" childrenNum="8"> <Card text="Chatting" icon="chatting"/> <Card text="PolySprint" icon="polysprint"/> <Card text="VanillaHUD" icon="vanillahud"/> @@ -136,7 +136,7 @@ import { Code } from 'astro:components'; <Card text="PolyWeather" icon="polyweather"/> <Card text="Keystrokes" icon="keystrokes"/> </Slider> - <Slider dir="right" wrapperClass="pb-10"> + <Slider dir="right" wrapperClass="pb-10" childrenNum="8"> <Card text="Keystrokes" icon="keystrokes"/> <Card text="PolyWeather" icon="polyweather"/> <Card text="PolyTime" icon="polytime"/> |