Responsiveness + fixes

6 files changed, 73 insertions, 45 deletions

diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro
index 9bc1c61..0eaa4ba 100644
--- a/apps/website/src/components/base/Footer.astro
+++ b/apps/website/src/components/base/Footer.astro
@@ -2,5 +2,14 @@
 
 ---
 
-	<footer class="flex min-h-[400px] bg-blue-100 mt-4">
-	</footer>
+<footer class="flex flex-row justify-between items-start min-h-[400px] bg-blue-100 mt-4">
+	<div class="p-20 max-w-[1024px]">
+		<div class="flex-1">
+
+		</div>
+
+		<div class="flex-1 ">
+			
+		</div>
+	</div>
+</footer>
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro
index 6d549bf..8a254d6 100644
--- a/apps/website/src/components/base/NavbarElement.astro
+++ b/apps/website/src/components/base/NavbarElement.astro
@@ -38,7 +38,7 @@ const {
 				)}
 
 			{element.dropdown && (
-				<ScreenOverlay class="max-sm:group-focus-within:opacity-100"/>
+				<ScreenOverlay class="max-sm:group-focus-within:opacity-100 z-navbar-backdrop"/>
 					<input tabindex="-1" type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute"/>
 					<div class={`
 						transition-opacity
@@ -46,10 +46,12 @@ const {
                			max-sm:overflow-hidden
                 		max-sm:max-h-[70vh] max-sm:h-screen max-sm:w-screen
                 		pointer-events-none opacity-0
+						z-navbar
 
                 		md:top-full md:right-0
 
                 		group-focus-within:pointer-events-auto group-focus-within:opacity-100
+						group-hover:pointer-events-auto group-hover:opacity-100
                 		focus-within:pointer-events-auto focus-within:opacity-100
                 		hover:pointer-events-auto hover:opacity-100
             		`}>
@@ -57,11 +59,12 @@ const {
 							tabindex="-1"
 							class={`
                     			bg-gray-50
+								border border-gray-100
                     			rounded-t-lg md:rounded-lg
                     			transition-transform
                     			max-sm:translate-y-1/3 max-sm:left-0
                     			group-focus-within:translate-y-0
-                    			max-h-full md:max-h-96 overflow-y-auto
+                    			max-h-full md:max-h-96 overflow-y-auto min-h-full
 								md:shadow-lg
                 			`}>
 							<ul class="p-4">
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index 55e3737..b2842f6 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -23,20 +23,20 @@ const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : `w-[${maxWidth}]`} p
 }${props.class ? ` ${props.class}` : ''}`;
 ---
 
-	<section class={`w-full flex justify-center ${wrapperClass ?? ''}`}>
-		<div class={className} {...props}>
-			{twoColumn
-				? (
+<section class={`w-full flex justify-center ${wrapperClass ?? ''}`}>
+	<div class={className} {...props}>
+		{twoColumn
+			? (
+				<div class="flex flex-col items-start text-left relative">
+					<slot name="left"></slot>
+				</div>
+
 					<div class="flex flex-col items-start text-left relative">
-						<slot name="left"></slot>
+						<slot name="right"></slot>
 					</div>
-
-						<div class="flex flex-col items-start text-left relative">
-							<slot name="right"></slot>
-						</div>
-					)
-				: (
-					<slot></slot>
-					)}
-		</div>
-	</section>
+				)
+			: (
+				<slot></slot>
+				)}
+	</div>
+</section>
diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro
index d5fc98b..04de167 100644
--- a/apps/website/src/pages/projects/oneconfig.astro
+++ b/apps/website/src/pages/projects/oneconfig.astro
@@ -59,13 +59,16 @@ import { Code } from 'astro:components';
 			</div>
 		</Section>
 
-		<Section maxWidth="1120px" wrapperClass="bg-blue-100 -mb-40" wFull={false} class="md:py-20 gap-4 pr-2">
-			<div slot="left" class="pr-2">
-				<Code
-					code={`public class MyConfig {
+		<Section maxWidth="1120px" wrapperClass="bg-blue-100 -mb-40" wFull={false} class="pt-10 md:py-20 gap-4">
+			<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
+		name = "Sub Switch",
+		type = OptionType.SWITCH
 	)
 	public static boolean subSwitch = false;
 
@@ -77,6 +80,7 @@ import { Code } from 'astro:components';
 	}
 }`}
 					lang="java"/>
+				</div>
 			</div>
 
 			<div slot="right" class="flex flex-col gap-2">
@@ -90,7 +94,7 @@ import { Code } from 'astro:components';
 			</div>
 		</Section>
 
-		<Section maxWidth="1120px" wrapperClass="bg-blue-100" wFull={false} class="md:py-20 gap-4 pr-2">
+		<Section maxWidth="1120px" wrapperClass="bg-blue-100" wFull={false} class="py-10 md:py-20 gap-4">
 			<div slot="left" class="flex flex-col gap-2">
 				<Header size="xl" class="text-blue-500">Designed for users</Header>
 				<Paragraph class="text-blue-400 max-w-[500px]">
@@ -101,35 +105,34 @@ import { Code } from 'astro:components';
 				</div>
 			</div>
 			<div slot="right">
-				<!-- TODO: figure out non-arbitrary values -->
-				<img src="/media/oneconfig/page_media_4.png" class="h-[285px] rounded-2xl"/>
+				<img src="/media/oneconfig/page_media_4.png" class="max-h-[285px] rounded-2xl"/>
 			</div>
 		</Section>
 
 		<Section class="flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px]">
-			<img src="/media/oneconfig/page_media_5.png" class="h-[581px] rounded-2xl"/>
+			<img src="/media/oneconfig/page_media_5.png" class="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">
 				Thanks to OneConfig's HUD API, you can customize any OneConfig-powered HUD to your liking, without having to worry about the hassle of finding the right command or keybind.
 			</Paragraph>
 		</Section>
 
-		<Section tabindex="0" wrapperClass="bg-blue-100 -mb-40" class="md:py-20 gap-4 pr-2">
+		<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">
 				<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.
 				</Paragraph>
-				<div class="flex row gap-x-1">
+				<div class="flex items-start flex-col md:flex-row max-sm:gap-y-1 gap-x-1">
 					<!-- TODO: HREF -->
 					<Button iconLeft="link-external" style="secondary" text="Discover mods"/>
-					<Button iconLeft="link-external" style="ghost" text="Download modpacks"/>
+					<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">
+		<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}>
 					<Card text="Chatting" icon="chatting"/>
@@ -154,13 +157,11 @@ import { Code } from 'astro:components';
 			</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 -->
-				<!-- TODO: Mess around with the sizes to make it look nicer -->
-				<img src="/media/oneconfig/page_media_4.png" class="rounded-2xl col-[1_/_7] row-[1_/_8]"/>
-				<div class="rounded-2xl col-[5_/_8] row-[6_/_9] shadow-md bg-white flex flex-col justify-items-start p-8 justify-center">
-					<Logo logo="oneconfig.logo_text" class="min-w-max"></Logo>
+		<Section class="flex-col justify-center items-center md:h-4/5 md:min-h-[600px] mb-[10rem]">
+			<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 max-sm:w-11/12 -bottom-12 translate-x-1/2 right-1/2 md:translate-x-0 md:-right-12">
+					<Logo logo="oneconfig.logo_text" class="w-48 h-12 md:min-w-max md:h-auto"></Logo>
 					<Button href="/projects/oneconfig/download" iconLeft="download" text="Download now" class="max-w-fit"/>
 				</div>
 			</div>
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index 8d36787..9efd728 100644
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -32,26 +32,33 @@
 	padding: 10px;
 	border-radius: 16px;
 	border: 1px solid rgba(65, 74, 88, 1);
+	width: 100%;
 }
+
 .astro-code code {
 	white-space: pre-wrap;
 	padding: 10px;
 	padding-bottom: 0;
 	color: #546E7A;
 }
+
 .astro-code code::before {
 	counter-reset: listing;
 }
+
 .astro-code code span {
 	font-family: 'Roboto Mono', monospace !important;
 }
+
 .astro-code code span.line {
 	counter-increment: listing;
 	text-align: left;
-	float: left;
-	clear: left;
-	font-size: 12px;
+	/* float: left;
+	clear: left; */
+	font-size: 13px;
+	text-wrap: nowrap;
 }
+
 .astro-code code span.line::before {
 	content: counter(listing) " ";
 	display: inline-block;
@@ -62,5 +69,5 @@
 	/* margin-right: 10px; */
 	text-align: right;
 	font-family: 'Roboto Mono', monospace !important;
-	font-size: 12px;
+	font-size: 13px;
 }
diff --git a/apps/website/tailwind.config.ts b/apps/website/tailwind.config.ts
index 011df25..542f10c 100644
--- a/apps/website/tailwind.config.ts
+++ b/apps/website/tailwind.config.ts
@@ -20,6 +20,7 @@ const config: Config = {
 			},
 			'gray': {
 				50: 'rgba(240, 242, 244, 1)',
+				200: 'rgba(196, 202, 212, 1)',
 				400: 'rgba(138, 150, 168, 1)',
 				600: 'rgba(42, 44, 48, 1)',
 				700: 'rgba(65, 74, 88, 1)',
@@ -50,6 +51,8 @@ const config: Config = {
 			'lg': '8px',
 			'xl': '12px',
 			'2xl': '16px',
+			'3xl': '20px',
+			'4xl': '24px',
 			'full': '100vw',
 		},
 		fontSize: {
@@ -72,7 +75,12 @@ const config: Config = {
 		fontFamily: {
 			mono: ['"Roboto Mono"', 'monospace'],
 		},
-		extend: {},
+		extend: {
+			zIndex: {
+				"navbar": "9999", // Nothing should be above the navbar or backdrop
+				"navbar-backdrop": "9998"
+			}
+		},
 	},
 	plugins: [],
 };