aboutsummaryrefslogtreecommitdiff
path: root/apps/website
diff options
context:
space:
mode:
Diffstat (limited to 'apps/website')
-rw-r--r--apps/website/src/components/base/Section.astro9
-rw-r--r--apps/website/src/components/base/navbar/Navbar.astro2
-rw-r--r--apps/website/src/components/base/navbar/NavbarElement.astro2
-rw-r--r--apps/website/src/pages/projects/oneconfig.astro158
-rw-r--r--apps/website/src/styles/global.css2
5 files changed, 88 insertions, 85 deletions
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index 092c069..d3edfcf 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -6,6 +6,7 @@ interface Props extends HTMLAttributes<'section'> {
colReverse?: boolean
wrapperClass?: string
wFull?: boolean
+ hFull?: boolean
}
const {
@@ -13,14 +14,16 @@ const {
colReverse = true,
wrapperClass = '',
wFull = true,
+ hFull = false,
...props
} = Astro.props;
const twoColumn = Astro.slots.has('left') || Astro.slots.has('right');
-const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 md:p-0 flex gap-x-20 gap-y-4${
- twoColumn ? ` ${maxWidth === 'none' ? 'justify-center' : 'justify-between md:justify-evenly lg:justify-between'} ${colReverse ? 'flex-col-reverse' : 'flex-col'} md:flex-row items-center md:flex-row` : ''
-}${props.class ? ` ${props.class}` : ''}`;
+const twoColumnClasses = ` ${maxWidth === 'none' ? 'justify-center' : 'justify-center md:justify-evenly lg:justify-between'}
+ ${colReverse ? 'flex-col-reverse' : 'flex-col'} md:flex-row items-center md:flex-row`;
+
+const className = `max-w-[${maxWidth}] ${hFull ? 'min-h-screen' : 'h-auto'} ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 md:p-0 flex gap-x-20 gap-y-4${twoColumn ? twoColumnClasses : ''}${props.class ? ` ${props.class}` : ''}`;
---
<section class={`w-full flex justify-center ${wrapperClass ?? ''}`}>
diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro
index 65b7473..aa31245 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 z-navbar">
+<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3 z-navbar text-[16px]">
<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/components/base/navbar/NavbarElement.astro b/apps/website/src/components/base/navbar/NavbarElement.astro
index 9aec193..0fe544b 100644
--- a/apps/website/src/components/base/navbar/NavbarElement.astro
+++ b/apps/website/src/components/base/navbar/NavbarElement.astro
@@ -28,7 +28,7 @@ function isCurrentPage(url: string): boolean {
? (
<a href={element.path} class={`p-2 flex flex-row justify-center items-center hover:text-blue-500 ${isCurrentPage(element.path) ? 'text-blue-400' : 'text-gray-700'}`}>
{element.text && element.text}
- {element.logo && <Logo transition:persist class="active:scale-95 transition-transform" size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>}
+ {element.logo && <Logo class="active:scale-95 transition-transform" size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>}
{element.dropdown && <Icon icon="chevron-down"/>}
</a>
)
diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro
index 51bd58a..70a9e49 100644
--- a/apps/website/src/pages/projects/oneconfig.astro
+++ b/apps/website/src/pages/projects/oneconfig.astro
@@ -14,7 +14,7 @@ import { Code } from 'astro:components';
---
<Layout>
- <Section class="flex-col justify-center items-center h-screen md:max-h-[800px] md:min-h-[600px]">
+ <Section class="flex-col justify-center items-center h-screen md:min-h-[600px]">
<Logo size={56} logo="oneconfig.minimal"/>
<Header align="center" size="xxl" class="max-w-[600px]">
Meet <b>OneConfig</b>, the library designed for <b>everyone</b>.
@@ -26,7 +26,7 @@ import { Code } from 'astro:components';
</Section>
<div class="flex flex-col gap-40">
- <Section tabindex="0">
+ <Section tabindex="0" hFull>
<div slot="left">
<Header size="lg" class="text-navy-peony">Forge is complicated</Header>
<Paragraph size="sm" class="text-gray-400 max-w-[500px]">Modding Minecraft has always been difficult, particularly with their configuration. Remembering all of the keybinds, commands; it just isn't intuitive.</Paragraph>
@@ -37,7 +37,7 @@ import { Code } from 'astro:components';
</div>
</Section>
- <Section tabindex="0" colReverse={false}>
+ <Section tabindex="0" colReverse={false} hFull>
<div slot="left" class="w-1/2 md:w-auto flex justify-center">
<img src="/media/oneconfig/page_media_2.svg" alt="stuff"/>
</div>
@@ -48,7 +48,7 @@ import { Code } from 'astro:components';
</div>
</Section>
- <Section tabindex="0">
+ <Section tabindex="0" hFull>
<div slot="left">
<Header size="lg" class="text-navy-peony">Best of both worlds</Header>
<Paragraph size="sm" class="text-gray-400 max-w-[500px]">OneConfig brings the simplicity of a client to the everyday user, gives advanced users and developers complete control over everything, while remaining free and open-source.</Paragraph>
@@ -59,58 +59,60 @@ import { Code } from 'astro:components';
</div>
</Section>
- <Section maxWidth="1120px" wrapperClass="bg-blue-75 -mb-40" wFull={false} class="pt-10 md:py-20">
- <div slot="left">
- <!-- TODO: FIX Codeblock overflowing on mobile -->
- <div class="max-sm:hidden">
- <Code
- code={
-`public class MyConfig {
- @Switch(
- name = "Sub Switch",
- type = OptionType.SWITCH
- )
- public static boolean subSwitch = false;
-
- public MyConfig() {
- super(new Mod("My Mod", ModType.UTIL_QOL), "config.json");
- addDependency("subSwitch", () -> {
- // Do stuff here
- });
+ <div class="bg-blue-75 flex flex-col justify-center items-center min-h-screen">
+ <Section maxWidth="1120px" wFull={false} class="pt-10 md:py-20 max-sm:h-screen">
+ <div slot="left">
+ <!-- TODO: FIX Codeblock overflowing on mobile -->
+ <div class="max-sm:hidden">
+ <Code
+ code={
+ `public class MyConfig {
+ @Switch(
+ name = "Sub Switch",
+ type = OptionType.SWITCH
+ )
+ public static boolean subSwitch = false;
+
+ public MyConfig() {
+ super(new Mod("My Mod", ModType.UTIL_QOL), "config.json");
+ addDependency("subSwitch", () -> {
+ // Do stuff here
+ });
+ }
+ }`
}
-}`
-}
- lang="java"/>
+ lang="java"/>
+ </div>
</div>
- </div>
- <div slot="right" class="flex flex-col gap-2 text-left items-start">
- <Header size="xl" class="text-blue-500">Written for developers</Header>
- <Paragraph class="text-blue-400 max-w-[500px]">
- With our simple APIs and documentation, it's easier than ever to integrate your mods with OneConfig.
- </Paragraph>
- <div class="flex">
- <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
+ <div slot="right" class="flex flex-col gap-2 text-left items-start">
+ <Header size="xl" class="text-blue-500">Written for developers</Header>
+ <Paragraph class="text-blue-400 max-w-[500px]">
+ With our simple APIs and documentation, it's easier than ever to integrate your mods with OneConfig.
+ </Paragraph>
+ <div class="flex">
+ <Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
+ </div>
</div>
- </div>
- </Section>
-
- <Section maxWidth="1120px" wrapperClass="bg-blue-75" wFull={false} class="py-10 md:py-20 gap-4">
- <div slot="left" class="flex flex-col gap-2 text-left items-start">
- <Header size="xl" class="text-blue-500">Designed for users</Header>
- <Paragraph class="text-blue-400 max-w-[500px]">
- 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" style="secondary" iconLeft="download" text="Download"/>
+ </Section>
+
+ <Section maxWidth="1120px" wFull={false} class="py-10 md:py-20 gap-4 max-sm:h-screen">
+ <div slot="left" class="flex flex-col gap-2 text-left items-start">
+ <Header size="xl" class="text-blue-500">Designed for users</Header>
+ <Paragraph class="text-blue-400 max-w-[500px]">
+ 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" style="secondary" iconLeft="download" text="Download"/>
+ </div>
</div>
- </div>
- <div slot="right">
- <img src="/media/oneconfig/page_media_4.png" class="max-h-[285px] rounded-2xl"/>
- </div>
- </Section>
+ <div slot="right">
+ <img src="/media/oneconfig/page_media_4.png" class="max-h-[285px] rounded-2xl"/>
+ </div>
+ </Section>
+ </div>
- <Section class="flex-col justify-center items-center h-screen max-h-96 md:h-4/5 md:min-h-[600px]">
+ <Section class="flex-col justify-center items-center h-screen md:min-h-[600px]" hFull>
<img src="/media/oneconfig/page_media_5.png" class="max-h-[285px] md:max-h-96 lg:max-h-[581px] rounded-2xl"/>
<Header size="xl" align="center" class="w-96">A unified HUD editor</Header>
<Paragraph class="w-96 text-center text-gray-400">
@@ -118,8 +120,8 @@ import { Code } from 'astro:components';
</Paragraph>
</Section>
- <Section wrapperClass="bg-blue-100 -mb-40" class="py-10 md:py-20 gap-4 pr-2">
- <div slot="left" class="flex flex-col gap-2 text-left items-start">
+ <Section wrapperClass="bg-blue-100 -mb-40" wFull maxWidth="none" class="py-10 md:py-20 gap-4 px-0 flex flex-col items-center justify-center" hFull>
+ <div class="max-w-[1024px] w-full flex flex-col gap-2 text-left items-start px-5">
<Header size="xl" class="text-blue-500">With many fabulous mods</Header>
<Paragraph class="text-blue-400 max-w-[500px]">
Discover a wide range of mods integrated with OneConfig to enhance your experience.
@@ -130,35 +132,33 @@ import { Code } from 'astro:components';
<Button iconLeft="link-external" style="ghost" text="Download a modpack"/>
</div>
</div>
- </Section>
-
- <!-- 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 bg-blue-100" 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="bg-blue-100" 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 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 bg-blue-100" 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="bg-blue-100" 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>
+ </Section>
- <Section class="flex-col justify-center items-center md:h-4/5 md:min-h-[600px] mb-[10rem]">
+ <Section class="flex-col justify-center items-center mb-20" hFull>
<div class="flex relative md:-left-12">
<img src="/media/oneconfig/page_media_4.png" class="rounded-2xl"/>
<div class="border border-gray-200 rounded-3xl md:rounded-4xl shadow-sm bg-gray-50 flex flex-col justify-center items-center md:items-start p-4 md:p-8 absolute -bottom-12 translate-x-1/2 right-1/2 md:translate-x-0 md:-right-12 gap-y-2 md:gap-y-8">
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index f98d574..59f7633 100644
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -24,7 +24,7 @@
html,
body {
- @apply text-[15px] md:text-[16px];
+ @apply text-[15px] md:text-[19px];
}
a {
generated by cgit (git 2.46.0) at 2024-12-18 19:19:09 +0000