Responsiveness + fixes

3 files changed, 31 insertions, 19 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>