1 files changed, 39 insertions, 23 deletions

diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
index d35ad9f..962b2d4 100644
--- a/apps/website/src/components/base/Header.astro
+++ b/apps/website/src/components/base/Header.astro
@@ -1,41 +1,54 @@
 ---
-import type { HTMLAttributes } from "astro/types"
+import type { HTMLAttributes } from 'astro/types';
 
 const sizes = {
-	"xxl": "h1",
-    "xl": "h2",
-    "lg": "h2",
-    "md": "h3",
-    "sm": "h4",
-    "xs": "h5",
-    "xxs": "h6"
+	xxl: 'h1',
+	xl: 'h2',
+	lg: 'h2',
+	md: 'h3',
+	sm: 'h4',
+	xs: 'h5',
+	xxs: 'h6',
 };
 
-type Headers = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type Headers = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 interface Props extends HTMLAttributes<Headers> {
-    size?: keyof typeof sizes;
-	align?: "left" | "center" | "right" | "inherit";
+	size?: keyof typeof sizes
+	align?: 'left' | 'center' | 'right' | 'inherit'
+	inheritSize?: boolean
 }
 
 const {
-	size = "lg",
-	align = "inherit",
+	size = 'lg',
+	align = 'inherit',
+	inheritSize = false,
 	...attr
 } = Astro.props;
 const Element = sizes[size] as any; // Unfortunately gotta do this
 
-const className = (align == "inherit" ? "" : `text-${align} `)
-	+ (size == "xxl" ? " page-header" : "")
-	+ (attr.class ? ` ${attr.class}` : "");
+let className: string | string[] = [];
+if (!inheritSize)
+	className.push('header');
+
+if (align !== 'inherit')
+	className.push(`text-${align}`);
+
+if (size === 'xxl' || size === 'xl')
+	className.push('page-header');
+
+if (attr.class)
+	className.push(attr.class);
+
+className = className.join(' ');
 ---
 
 <Element {...attr} class={className}>
-    <slot />
+	<slot/>
 </Element>
 
 <style>
-    h1 {
+    h1.header {
 		font-size: theme("fontSize.header-lg");
 		&.page-header {
 			font-size: theme("fontSize.header-page");
@@ -43,27 +56,30 @@ const className = (align == "inherit" ? "" : `text-${align} `)
         font-weight: 600;
     }
 
-    h2 {
+    h2.header {
         font-size: theme("fontSize.header");
+		&.page-header {
+			font-size: theme("fontSize.header-page");
+		}
         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;
     }