Codeblock section

4 files changed, 34 insertions, 7 deletions

diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro
index 75dcfa0..adbc656 100644
--- a/apps/website/src/components/base/Button.astro
+++ b/apps/website/src/components/base/Button.astro
@@ -5,7 +5,7 @@ import type { HTMLAttributes } from "astro/types";
 
 const styles = {
 	primary: "bg-blue-500 text-white hover:bg-blue-400 active:bg-blue-600 disabled:bg-blue-800 disabled:text-white-1/4",
-	secondary: "bg-blue-100 text-blue-500 hover:bg-blue-50 active:bg-blue-200 disabled:bg-blue-50 disabled:text-blue-200",
+	secondary: "bg-blue-100 text-blue-500 hover:bg-blue-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200",
 }
 
 const sizes = {
diff --git a/apps/website/src/components/base/CodeBlock.astro b/apps/website/src/components/base/CodeBlock.astro
new file mode 100644
index 0000000..5991428
--- /dev/null
+++ b/apps/website/src/components/base/CodeBlock.astro
@@ -0,0 +1,21 @@
+---
+
+---
+
+<pre class="flex flex-col">
+	<code class="whitespace-pre bg-white-light border border-gray-50 rounded-2xl text-sm">{`public class MyConfig {
+
+	@Switch(name = "Sub Switch", type = OptionType.SWITCH)
+	public static boolean subSwitch = false;
+
+	public MyConfig() {
+		super(new Mod("My Mod", ModType.UTIL_QOL), "config.json");
+
+		addDependency("subSwitch", () -> {
+			// TODO: Make codeblocks better lmao
+		});
+	}
+
+}`}</code>
+</pre>
+
diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
index 23f5429..d35ad9f 100644
--- a/apps/website/src/components/base/Header.astro
+++ b/apps/website/src/components/base/Header.astro
@@ -2,7 +2,8 @@
 import type { HTMLAttributes } from "astro/types"
 
 const sizes = {
-    "xl": "h1",
+	"xxl": "h1",
+    "xl": "h2",
     "lg": "h2",
     "md": "h3",
     "sm": "h4",
@@ -24,7 +25,9 @@ const {
 } = Astro.props;
 const Element = sizes[size] as any; // Unfortunately gotta do this
 
-const className = (align == "inherit" ? "" : `text-${align} `) + (attr.class ? ` ${attr.class}` : "");
+const className = (align == "inherit" ? "" : `text-${align} `)
+	+ (size == "xxl" ? " page-header" : "")
+	+ (attr.class ? ` ${attr.class}` : "");
 ---
 
 <Element {...attr} class={className}>
@@ -33,7 +36,10 @@ const className = (align == "inherit" ? "" : `text-${align} `) + (attr.class ? `
 
 <style>
     h1 {
-        font-size: theme("fontSize.header-lg");
+		font-size: theme("fontSize.header-lg");
+		&.page-header {
+			font-size: theme("fontSize.header-page");
+		}
         font-weight: 600;
     }
 
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index 66ad00f..0d177ef 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -16,8 +16,8 @@ const {
 
 const twoColumn = Astro.slots.has("left") || Astro.slots.has("right");
 
-const className = `max-w-[${maxWidth}] flex-grow px-5 md:p-0 flex gap-4`
-	+ (twoColumn ? ` justify-between md:justify-evenly lg:justify-between ${colReverse ? "flex-col-reverse" : "flex-col"} md:flex-row md:items-center md:flex-row` : "")
+const className = `max-w-[${maxWidth}] w-full px-5 md:p-0 flex gap-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}` : "");
 ---
 
@@ -28,7 +28,7 @@ const className = `max-w-[${maxWidth}] flex-grow px-5 md:p-0 flex gap-4`
 				<slot name="left"></slot>
 			</div>
 
-			<div class="flex flex-col items-start text-start relative">
+			<div class="flex flex-col items-start text-left relative">
 				<slot name="right"></slot>
 			</div>
 		) : (