From b0496a9f04addbd26eb4e1d4401699343482770d Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Tue, 26 Dec 2023 20:49:05 +0100
Subject: Fixes webkit stuff

---
 apps/website/src/components/base/Section.astro     | 13 +++++-----
 apps/website/src/components/base/Slider.astro      |  5 +++-
 .../src/components/base/navbar/Navbar.astro        | 29 +++++++++++-----------
 .../src/components/base/navbar/NavbarElement.astro |  4 +--
 apps/website/src/pages/projects/oneconfig.astro    |  6 ++---
 apps/website/src/styles/global.css                 |  7 +++---
 6 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index b2842f6..0ff8e3a 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -18,7 +18,7 @@ const {
 
 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-4${
+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 md:items-center md:flex-row` : ''
 }${props.class ? ` ${props.class}` : ''}`;
 ---
@@ -31,12 +31,11 @@ const className = `max-w-[${maxWidth}] ${wFull ? 'w-full' : `w-[${maxWidth}]`} p
 					<slot name="left"></slot>
 				</div>
 
-					<div class="flex flex-col items-start text-left relative">
-						<slot name="right"></slot>
-					</div>
-				)
-			: (
+				<div class="flex flex-col items-start text-left relative">
+					<slot name="right"></slot>
+				</div>
+			) : (
 				<slot></slot>
-				)}
+			)}
 	</div>
 </section>
diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro
index 625d7ff..139a250 100644
--- a/apps/website/src/components/base/Slider.astro
+++ b/apps/website/src/components/base/Slider.astro
@@ -51,10 +51,13 @@ const {
 				}
 			}
 		}
+
+		/**
 		&:hover > .wrapper, &.reverse:hover > .wrapper {
-			/* TODO: Possibly add fancy hover card anim? */
 			animation-play-state: paused;
 		}
+		*/
+
 		&.reverse > .wrapper {
 			animation: var(--speed) linear infinite slide-reverse;
 			@keyframes slide-reverse {
diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro
index ca39f2b..96c9955 100644
--- a/apps/website/src/components/base/navbar/Navbar.astro
+++ b/apps/website/src/components/base/navbar/Navbar.astro
@@ -4,18 +4,17 @@ 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">
-		<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">
-				{(config as Config).navbar.left.map((element, index) => (
-					<NavbarElement {element} {index}/>
-				))}
-			</ul>
-			<ul class="flex flex-row justify-end gap-4">
-				{(config as Config).navbar.right.map((element, index) => (
-					<NavbarElement {element} {index}/>
-				))}
-			</ul>
-		</nav>
-	</div>
+<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3">
+	<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) => (
+				<NavbarElement {element} {index}/>
+			))}
+		</ul>
+		<ul class="flex flex-row justify-end gap-4">
+			{(config as Config).navbar.right.map((element, index) => (
+				<NavbarElement {element} {index}/>
+			))}
+		</ul>
+	</nav>
+</div>
diff --git a/apps/website/src/components/base/navbar/NavbarElement.astro b/apps/website/src/components/base/navbar/NavbarElement.astro
index 8a455de..346869c 100644
--- a/apps/website/src/components/base/navbar/NavbarElement.astro
+++ b/apps/website/src/components/base/navbar/NavbarElement.astro
@@ -51,9 +51,9 @@ const {
                 		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
+						md:group-hover:pointer-events-auto md:group-hover:opacity-100
                 		focus-within:pointer-events-auto focus-within:opacity-100
-                		hover:pointer-events-auto hover:opacity-100
+                		md:hover:pointer-events-auto md:hover:opacity-100
             		`}>
 						<ScrollbarOverlayContainer
 							tabindex="-1"
diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro
index 04de167..1ff50d4 100644
--- a/apps/website/src/pages/projects/oneconfig.astro
+++ b/apps/website/src/pages/projects/oneconfig.astro
@@ -59,7 +59,7 @@ import { Code } from 'astro:components';
 			</div>
 		</Section>
 
-		<Section maxWidth="1120px" wrapperClass="bg-blue-100 -mb-40" wFull={false} class="pt-10 md:py-20 gap-4">
+		<Section maxWidth="1120px" wrapperClass="bg-blue-100 -mb-40" wFull={false} class="pt-10 md:py-20">
 			<div slot="left">
 				<!-- TODO: FIX Codeblock overflowing on mobile -->
 				<div class="max-sm:hidden">
@@ -160,8 +160,8 @@ import { Code } from 'astro:components';
 		<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>
+				<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">
+					<Logo logo="oneconfig.logo_text" class="w-48 h-12 md:min-w-72 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 9efd728..340c9e0 100644
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -53,10 +53,10 @@
 .astro-code code span.line {
 	counter-increment: listing;
 	text-align: left;
-	/* float: left;
-	clear: left; */
+	float: left;
+	clear: left;
 	font-size: 13px;
-	text-wrap: nowrap;
+	white-space: pre;
 }
 
 .astro-code code span.line::before {
@@ -66,6 +66,7 @@
 	width: 2em;
 	padding: 0;
 	margin-left: auto;
+	margin-right: 1ch;
 	/* margin-right: 10px; */
 	text-align: right;
 	font-family: 'Roboto Mono', monospace !important;
-- 
cgit