From d568fe0235de920f2b97f70777bab94c114d5654 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Sat, 30 Dec 2023 11:37:33 +0100
Subject: Responsive tweaks

---
 apps/website/src/components/base/Card.astro             |  4 ++--
 apps/website/src/components/base/Header.astro           | 17 +++++++++++------
 apps/website/src/components/base/Section.astro          |  6 +++---
 apps/website/src/components/base/Tag.astro              | 10 +++++-----
 apps/website/src/components/base/navbar/Navbar.astro    |  2 +-
 .../src/components/base/navbar/NavbarElement.astro      |  6 +++---
 6 files changed, 25 insertions(+), 20 deletions(-)

(limited to 'apps/website/src/components')

diff --git a/apps/website/src/components/base/Card.astro b/apps/website/src/components/base/Card.astro
index 9b75f16..2eea908 100644
--- a/apps/website/src/components/base/Card.astro
+++ b/apps/website/src/components/base/Card.astro
@@ -16,7 +16,7 @@ const {
 ---
 
 <!-- pt-1 added temporarily cause for some reason the icon's padding doesn't apply unless I add this. the wonders of CSS. -->
-<div {...rest} class="rounded-xl bg-gray-600 w-64 pt-1 shrink-0">
+<div {...rest} class="rounded-xl bg-gray-600 w-[256px] pt-1 shrink-0">
 	<Icon icon={icon} size={48} class="my-[20px] mx-auto text-white"></Icon>
-	<p class="text-white text-md mx-auto bg-primary-600 rounded-b-xl py-[5px] pl-[12px] pr-[32px]">{text}</p>
+	<p class="text-white mx-auto bg-primary-600 rounded-b-xl text-[14px] py-[5px] pl-[12px] pr-[32px]">{text}</p>
 </div>
diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
index 7d24c8f..962b2d4 100644
--- a/apps/website/src/components/base/Header.astro
+++ b/apps/website/src/components/base/Header.astro
@@ -16,16 +16,21 @@ type Headers = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 interface Props extends HTMLAttributes<Headers> {
 	size?: keyof typeof sizes
 	align?: 'left' | 'center' | 'right' | 'inherit'
+	inheritSize?: boolean
 }
 
 const {
 	size = 'lg',
 	align = 'inherit',
+	inheritSize = false,
 	...attr
 } = Astro.props;
 const Element = sizes[size] as any; // Unfortunately gotta do this
 
 let className: string | string[] = [];
+if (!inheritSize)
+	className.push('header');
+
 if (align !== 'inherit')
 	className.push(`text-${align}`);
 
@@ -43,7 +48,7 @@ className = className.join(' ');
 </Element>
 
 <style>
-    h1 {
+    h1.header {
 		font-size: theme("fontSize.header-lg");
 		&.page-header {
 			font-size: theme("fontSize.header-page");
@@ -51,7 +56,7 @@ className = className.join(' ');
         font-weight: 600;
     }
 
-    h2 {
+    h2.header {
         font-size: theme("fontSize.header");
 		&.page-header {
 			font-size: theme("fontSize.header-page");
@@ -59,22 +64,22 @@ className = className.join(' ');
         font-weight: 600;
     }
 
-    h3 {
+    h3.header {
         font-size: theme("fontSize.header-sm");
         font-weight: 600;
     }
 
-    h4 {
+    h4.header {
         font-size: theme("fontSize.body-lg");
         font-weight: 500;
     }
 
-    h5 {
+    h5.header {
         font-size: theme("fontSize.body");
         font-weight: 500;
     }
 
-    h6 {
+    h6.header {
         font-size: theme("fontSize.body-sm");
         font-weight: 500;
     }
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index a12ed12..c463a16 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -20,10 +20,10 @@ const {
 
 const twoColumn = Astro.slots.has('left') || Astro.slots.has('right');
 
-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 twoColumnClasses = ` ${maxWidth === 'none' ? 'justify-center' : 'justify-center lg:justify-between'}
+	${colReverse ? 'flex-col-reverse' : 'flex-col'} lg:flex-row items-center`;
 
-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}` : ''}`;
+const className = `max-w-[${maxWidth}] ${hFull ? 'min-h-screen' : 'h-auto'} ${wFull ? 'w-full' : `w-[${maxWidth}]`} px-5 xl:px-0 flex gap-x-20 gap-y-4${twoColumn ? twoColumnClasses : ''}${props.class ? ` ${props.class}` : ''}`;
 ---
 
 <section class={`w-full outline-none flex justify-center ${wrapperClass ?? ''}`}>
diff --git a/apps/website/src/components/base/Tag.astro b/apps/website/src/components/base/Tag.astro
index b903344..2eb5778 100644
--- a/apps/website/src/components/base/Tag.astro
+++ b/apps/website/src/components/base/Tag.astro
@@ -6,8 +6,8 @@ interface Props extends HTMLAttributes<'span'> {}
 const { ...attr } = Astro.props;
 ---
 
-	<div class="transition-colors text-blue-500 hover:bg-blue-500/20 text-xs font-medium bg-blue-500/10 rounded-md flex flex-col justify-center items-center px-2 py-0.5">
-		<span {...attr}>
-			<slot></slot>
-		</span>
-	</div>
+<div class="leading-none transition-colors text-blue-500 hover:bg-blue-500/20 text-xs font-medium bg-blue-500/10 rounded-md flex flex-col justify-center items-center px-2 py-0.5">
+	<span {...attr}>
+		<slot></slot>
+	</span>
+</div>
diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro
index aa31245..944d88d 100644
--- a/apps/website/src/components/base/navbar/Navbar.astro
+++ b/apps/website/src/components/base/navbar/Navbar.astro
@@ -6,7 +6,7 @@ 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 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">
+		<ul class="flex flex-row justify-start gap-4 max-md:mt-4">
 			{(config as Config).navbar.left.map((element, index) => (
 				<NavbarElement {element} {index}/>
 			))}
diff --git a/apps/website/src/components/base/navbar/NavbarElement.astro b/apps/website/src/components/base/navbar/NavbarElement.astro
index 0fe544b..3033bf1 100644
--- a/apps/website/src/components/base/navbar/NavbarElement.astro
+++ b/apps/website/src/components/base/navbar/NavbarElement.astro
@@ -81,10 +81,10 @@ function isCurrentPage(url: string): boolean {
 
 												<div class="flex flex-col justify-start items-start">
 													<div class="flex flex-row gap-2">
-														<Header size="sm" class="text-gray-800">{item.name}</Header>
-														{item.tag && <Tag>{item.tag}</Tag>}
+														<Header inheritSize size="md" class="text-gray-800 text-md md:text-sm font-medium">{item.name}</Header>
+														{item.tag && <Tag class="text-sm md:text-xxs">{item.tag}</Tag>}
 													</div>
-													<p class="text-sm text-gray-400 font-light">{item.description}</p>
+													<p class="text-md md:text-sm text-gray-400 font-light">{item.description}</p>
 												</div>
 											</div>
 										</a>
-- 
cgit