initial cleanup

3 files changed, 62 insertions, 17 deletions

diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro
index adbc656..0a4dc9f 100644
--- a/apps/website/src/components/base/Button.astro
+++ b/apps/website/src/components/base/Button.astro
@@ -4,8 +4,9 @@ import Icon from "@components/icons/Icon.astro";
 import type { HTMLAttributes } from "astro/types";
 
 const styles = {
+	// TODO: adjust active / disabled colors
 	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-200 active:bg-blue-300 disabled:bg-blue-50 disabled:text-blue-200",
+	secondary: "bg-blue-20 text-blue-60 border-[1px] border-blue-30 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
index 5991428..ceeecc0 100644
--- a/apps/website/src/components/base/CodeBlock.astro
+++ b/apps/website/src/components/base/CodeBlock.astro
@@ -2,20 +2,62 @@
 
 ---
 
-<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");
+<pre class="flex flex-col bg-gray-800 whitespace-pre border border-gray-50 rounded-2xl text-sm">
+	<!-- TODO: un-shit this -->
+	<code><ca>public</ca> <cb>class</cb> <cc>MyConfig</cc> <cd>&#123;</cd></code>
+	<code></code>
+	<code>    <ce>@</ce><ca>Switch</ca><cd>(</cd><ca>name</ca> <ce>=</ce> <cf>"Sub Switch"</cf><cd>,</cd> <ca>type</ca> <ce>=</ce> <ca>OptionType</ca><cd>.</cd><cb>SWITCH</cb><cd>)</cd></code>
+	<code>    <cb>public</cb> <cc>static boolean subSwitch</cc> <ce>=</ce> <cg>false</cg><cd>;</cd></code>
+	<code></code>
+	<code>    <ca>public MyConfig</ca><cd>() &#123;</cd></code>
+	<code>        <cb>super</cb><cd>(</cd><cb>new</cb> <ca>Mod</ca><cd>(</cd><cf>"My Mod"</cf><cd>,</cd> <ca>ModType</ca><cd>.</cd><cb>UTIL_QOL</cb><cd>),</cd> <cf>"config.json"</cf><cd>);</cd></code>
+	<code></code>
+	<code>        <cb>addDependency</cb><cd>(</cd><cf>"subSwitch"</cf><cd>, ()</cd> <ce>-&gt;</ce> <cd>&#123;</cd></code>
+	<code>            // Do stuff here!</code>
+	<code>        <cd>&#125;);</cd></code>
+	<code>    <cd>&#125;</cd></code>
+	<code></code>
+	<code><cd>&#125;</cd></code>
+</pre>
 
-		addDependency("subSwitch", () -> {
-			// TODO: Make codeblocks better lmao
-		});
+<style>
+	/* thanks stackoverflow! https://stackoverflow.com/a/41309213 */
+	pre {
+		white-space: pre-wrap;
+		padding: 10px;
+		color: #546E7A;
+	}
+	pre::before {
+		counter-reset: listing;
+	}
+	pre code {
+		counter-increment: listing;
+		text-align: left;
+		float: left;
+		clear: left;
+		font-family: 'Roboto Mono', monospace !important;
+		font-size: 12px;
+		height: 1.5em;
+	}
+	pre code::before {
+		content: counter(listing) " ";
+		display: inline-block;
+		float: left;
+		height: 3em;
+		width: 2em;
+		padding: 0;
+		margin-left: auto;
+		margin-right: 10px;
+		text-align: right;
+		font-family: 'Roboto Mono', monospace !important;
+		font-size: 12px;
 	}
 
-}`}</code>
-</pre>
-
+	ca { color: #F07178; font-family: inherit; }
+	cb { color: #C792EA; font-family: inherit; }
+	cc { color: #82AAFF; font-family: inherit; }
+	cd { color: #EFF; font-family: inherit; }
+	ce { color: #89DDFF; font-family: inherit; }
+	cf { color: #C3E88D; font-family: inherit; }
+	cg { color: #F78C6C; font-family: inherit; }
+</style>
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index 0d177ef..bb7a062 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -5,23 +5,25 @@ interface Props extends HTMLAttributes<"section"> {
 	maxWidth?: "none" | String;
 	colReverse?: boolean;
 	wrapperClass?: string;
+	wFull?: boolean;
 }
 
 const {
 	maxWidth = "1080px",
 	colReverse = true,
 	wrapperClass = "",
+	wFull = true,
 	...props
 } = Astro.props;
 
 const twoColumn = Astro.slots.has("left") || Astro.slots.has("right");
 
-const className = `max-w-[${maxWidth}] w-full px-5 md:p-0 flex gap-4`
+const className = `max-w-[${maxWidth}] ${wFull ? "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}` : "");
 ---
 
-<section class={`w-full flex justify-center${wrapperClass ? ` ${wrapperClass}` : ""}`}>
+<section class={`w-full flex justify-center ${wrapperClass ?? ""}`}>
 	<div class={className} {...props}>
 		{twoColumn ? (
 			<div class="flex flex-col items-start text-left relative">