Increase font size + scale

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 {