diff options
| -rw-r--r-- | apps/website/src/components/base/Button.astro | 1 | ||||
| -rw-r--r-- | apps/website/src/components/base/Card.astro | 8 | ||||
| -rw-r--r-- | apps/website/src/components/base/Slider.astro | 2 | ||||
| -rw-r--r-- | apps/website/src/pages/projects/oneconfig.astro | 54 |
4 files changed, 37 insertions, 28 deletions
diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro index 285052a..fef01f6 100644 --- a/apps/website/src/components/base/Button.astro +++ b/apps/website/src/components/base/Button.astro @@ -7,6 +7,7 @@ const styles = { // TODO: adjust active / disabled colors primary: 'bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4', secondary: 'bg-blue-20 text-blue-60 border-[1px] border-blue-30 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200', + ghost: 'bg-transparent text-blue-500 hover:bg-blue-20 active:bg-blue-30 disabled:bg-transparent disabled:text-blue-200', }; const sizes = { diff --git a/apps/website/src/components/base/Card.astro b/apps/website/src/components/base/Card.astro index 7cc51b2..9b75f16 100644 --- a/apps/website/src/components/base/Card.astro +++ b/apps/website/src/components/base/Card.astro @@ -16,7 +16,7 @@ const { --- <!-- pt-1 added temporarily cause for some reason the icon's padding doesn't apply unless I add this. the wonders of CSS. --> - <div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0"> - <Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon> - <p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl pl-[12px] pr-[32px]">{text}</p> - </div> +<div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0"> + <Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon> + <p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl py-[5px] pl-[12px] pr-[32px]">{text}</p> +</div> diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro index ae4bbae..3fbca91 100644 --- a/apps/website/src/components/base/Slider.astro +++ b/apps/website/src/components/base/Slider.astro @@ -14,7 +14,7 @@ const { wrapperClass = '', childrenNum, childrenSize = '256px', - speed = '15s', + speed = '20s', } = Astro.props; --- diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro index faa8a98..d5fc98b 100644 --- a/apps/website/src/pages/projects/oneconfig.astro +++ b/apps/website/src/pages/projects/oneconfig.astro @@ -97,7 +97,7 @@ import { Code } from 'astro:components'; We take pride in having the cleanest and most intuitive UI of any mod, config library, or client out there. </Paragraph> <div class="flex"> - <Button href="/projects/oneconfig/download" iconLeft="download" style="secondary" text="Download"/> + <Button href="/projects/oneconfig/download" style="secondary" iconLeft="download" text="Download"/> </div> </div> <div slot="right"> @@ -120,32 +120,40 @@ import { Code } from 'astro:components'; <Paragraph class="text-blue-400 max-w-[500px]"> Discover a wide range of mods integrated with OneConfig to enhance your experience. </Paragraph> - <div class="flex"> - <Button iconLeft="link-external" text="Discover mods"/> + <div class="flex row gap-x-1"> + <!-- TODO: HREF --> + <Button iconLeft="link-external" style="secondary" text="Discover mods"/> + <Button iconLeft="link-external" style="ghost" text="Download modpacks"/> </div> </div> </Section> + <!-- TODO: add more 3rd party mods, like DSM PSS and Neu maybe --> - <Slider wrapperClass="-mb-40 pb-4" childrenNum={8}> - <Card text="Chatting" icon="chatting"/> - <Card text="PolySprint" icon="polysprint"/> - <Card text="VanillaHUD" icon="vanillahud"/> - <Card text="OverflowAnimations" icon="overflowanimations"/> - <Card text="CrashPatch" icon="crashpatch"/> - <Card text="PolyTime" icon="polytime"/> - <Card text="PolyWeather" icon="polyweather"/> - <Card text="Keystrokes" icon="keystrokes"/> - </Slider> - <Slider dir="right" wrapperClass="pb-10" childrenNum={8}> - <Card text="Chatting" icon="chatting"/> - <Card text="PolySprint" icon="polysprint"/> - <Card text="VanillaHUD" icon="vanillahud"/> - <Card text="OverflowAnimations" icon="overflowanimations"/> - <Card text="CrashPatch" icon="crashpatch"/> - <Card text="PolyTime" icon="polytime"/> - <Card text="PolyWeather" icon="polyweather"/> - <Card text="Keystrokes" icon="keystrokes"/> - </Slider> + <div class="flex flex-col justify-center items-center bg-blue-100 pb-10"> + <div class="flex flex-col justify-between items-center overflow-hidden h-[280px] max-w-[1920px]"> + <Slider wrapperClass="-mb-40 pb-4" childrenNum={8}> + <Card text="Chatting" icon="chatting"/> + <Card text="PolySprint" icon="polysprint"/> + <Card text="VanillaHUD" icon="vanillahud"/> + <Card text="OverflowAnimations" icon="overflowanimations"/> + <Card text="CrashPatch" icon="crashpatch"/> + <Card text="PolyTime" icon="polytime"/> + <Card text="PolyWeather" icon="polyweather"/> + <Card text="Keystrokes" icon="keystrokes"/> + </Slider> + <Slider dir="right" childrenNum={8}> + <Card text="Chatting" icon="chatting"/> + <Card text="PolySprint" icon="polysprint"/> + <Card text="VanillaHUD" icon="vanillahud"/> + <Card text="OverflowAnimations" icon="overflowanimations"/> + <Card text="CrashPatch" icon="crashpatch"/> + <Card text="PolyTime" icon="polytime"/> + <Card text="PolyWeather" icon="polyweather"/> + <Card text="Keystrokes" icon="keystrokes"/> + </Slider> + </div> + </div> + <Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px] mb-[10rem]"> <div class="grid grid-rows-[repeat(8,_minmax(0,_1fr))] grid-cols-[repeat(7,_minmax(0,_1fr))]"> <!-- TODO: Change placeholder image --> |