aboutsummaryrefslogtreecommitdiff
path: root/apps/website
diff options
context:
space:
mode:
Diffstat (limited to 'apps/website')
-rw-r--r--apps/website/src/components/base/Slider.astro66
-rw-r--r--apps/website/src/layouts/Layout.astro2
-rw-r--r--apps/website/src/pages/projects/oneconfig.astro4
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"/>