diff options
| -rw-r--r-- | apps/website/src/components/base/Header.astro | 24 | ||||
| -rw-r--r-- | apps/website/src/components/base/Slider.astro | 2 | ||||
| -rw-r--r-- | apps/website/src/components/base/navbar/Navbar.astro | 2 | ||||
| -rw-r--r-- | apps/website/src/pages/mods.astro | 36 | ||||
| -rw-r--r-- | apps/website/src/pages/projects/oneconfig.astro | 4 |
5 files changed, 56 insertions, 12 deletions
diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro index 1ab879e..5292380 100644 --- a/apps/website/src/components/base/Header.astro +++ b/apps/website/src/components/base/Header.astro @@ -25,16 +25,24 @@ const { } = Astro.props; const Element = sizes[size] as any; // Unfortunately gotta do this -const className = (align === 'inherit' ? '' : `text-${align} `) - + (size === 'xxl' ? ' page-header' : '') - + (attr.class ? ` ${attr.class}` : ''); +let className: string | string[] = []; +if (align !== 'inherit') + className.push(`text-${align}`); + +if (size === 'xxl') + className.push('page-header'); + +if (attr.class) + className.push(attr.class); + +className = className.join(' '); --- - <Element {...attr} class={className}> - <slot/> - </Element> +<Element {...attr} class={className}> + <slot/> +</Element> - <style> +<style> h1 { font-size: theme("fontSize.header-lg"); &.page-header { @@ -74,4 +82,4 @@ const className = (align === 'inherit' ? '' : `text-${align} `) font-weight: inherit; } } - </style> +</style> diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro index 139a250..1afd680 100644 --- a/apps/website/src/components/base/Slider.astro +++ b/apps/website/src/components/base/Slider.astro @@ -20,7 +20,7 @@ const { --- <div class={ - `w-full bg-blue-100 slider + `w-full slider ${dir === 'right' ? 'reverse' : ''} ${wrapperClass}` }> diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro index 2a1cd51..65b7473 100644 --- a/apps/website/src/components/base/navbar/Navbar.astro +++ b/apps/website/src/components/base/navbar/Navbar.astro @@ -4,7 +4,7 @@ import config from 'config'; import NavbarElement from '../navbar/NavbarElement.astro'; --- -<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3"> +<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3 z-navbar"> <nav class="w-full max-w-[1080px] flex flex-col md:flex-row justify-between items-center"> <ul class="flex flex-row justify-start gap-4 max-sm:mt-4"> {(config as Config).navbar.left.map((element, index) => ( diff --git a/apps/website/src/pages/mods.astro b/apps/website/src/pages/mods.astro index 8553c7a..4409583 100644 --- a/apps/website/src/pages/mods.astro +++ b/apps/website/src/pages/mods.astro @@ -1,8 +1,44 @@ --- +import Card from '@components/base/Card.astro'; +import Header from '@components/base/Header.astro'; +import Section from '@components/base/Section.astro'; +import Slider from '@components/base/Slider.astro'; import Layout from '@layouts/Layout.astro'; --- <Layout> + <Section maxWidth="1920px" wFull={true} wrapperClass="h-3/5" class="h-full mt-32 md:mt-28 flex flex-col justify-center items-center px-0"> + <div class="flex flex-col justify-center items-center max-w-full overflow-hidden"> + <div class="flex flex-col justify-between items-center overflow-hidden h-auto md:h-[280px] max-w-[1920px] relative"> + <div class="absolute bottom-0 w-full h-full md:h-1/2 z-10" style="background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgb(240, 242, 244));" /> + <Slider wrapperClass="-mb-40 pb-4 max-sm:hidden" 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> + + <div class="flex flex-col justify-start items-center max-w-full mt-6 md:mt-10"> + <Header align="center" size="xxl" class="text-navy-peony max-w-xl">Redefining modding, one mod at a time</Header> + </div> + </Section> + </Layout> diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro index dc3367a..6ad725b 100644 --- a/apps/website/src/pages/projects/oneconfig.astro +++ b/apps/website/src/pages/projects/oneconfig.astro @@ -135,7 +135,7 @@ import { Code } from 'astro:components'; <!-- TODO: add more 3rd party mods, like DSM PSS and Neu maybe --> <div class="flex flex-col justify-center items-center bg-blue-100 pb-10 max-w-full overflow-hidden"> <div class="flex flex-col justify-between items-center overflow-hidden h-[280px] max-w-[1920px]"> - <Slider wrapperClass="-mb-40 pb-4" childrenNum={8}> + <Slider wrapperClass="-mb-40 pb-4 bg-blue-100" childrenNum={8}> <Card text="Chatting" icon="chatting"/> <Card text="PolySprint" icon="polysprint"/> <Card text="VanillaHUD" icon="vanillahud"/> @@ -145,7 +145,7 @@ import { Code } from 'astro:components'; <Card text="PolyWeather" icon="polyweather"/> <Card text="Keystrokes" icon="keystrokes"/> </Slider> - <Slider dir="right" childrenNum={8}> + <Slider dir="right" wrapperClass="bg-blue-100" childrenNum={8}> <Card text="Chatting" icon="chatting"/> <Card text="PolySprint" icon="polysprint"/> <Card text="VanillaHUD" icon="vanillahud"/> |