Added blog and changed some other stuff

26 files changed, 392 insertions, 751 deletions

diff --git a/src/components/Card.astro b/src/components/Card.astro
deleted file mode 100644
index bd6d597..0000000
--- a/src/components/Card.astro
+++ /dev/null
@@ -1,61 +0,0 @@
----
-interface Props {
-	title: string;
-	body: string;
-	href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 1px;
-		background-color: #23262d;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 7px;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-	}
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: calc(1.5rem - 1px);
-		border-radius: 8px;
-		color: white;
-		background-color: #23262d;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent-light));
-	}
-</style>
diff --git a/src/components/Markdown.astro b/src/components/Markdown.astro
index ef3ed1d..c9b7108 100644
--- a/src/components/Markdown.astro
+++ b/src/components/Markdown.astro
@@ -1,12 +1,12 @@
 ---
-import "../../styles/asides.css";
-import "../../styles/markdown.css";
-import "../../styles/props.css";
-import "../../styles/reset.css";
-import "../../styles/shiki.css";
-import "../../styles/util.css";
+import "../styles/markdown/asides.css";
+import "../styles/markdown/markdown.css";
+import "../styles/markdown/props.css";
+import "../styles/markdown/reset.css";
+import "../styles/markdown/shiki.css";
+import "../styles/markdown/util.css";
 ---
 
 <div class="sl-markdown-content">
-  <slot />
+    <slot />
 </div>
diff --git a/src/components/MarkdownB.astro b/src/components/MarkdownB.astro
deleted file mode 100644
index adc46c1..0000000
--- a/src/components/MarkdownB.astro
+++ /dev/null
@@ -1,11 +0,0 @@
----
-import Markdown from './Markdown.astro';
-import "../../styles/asides.css";
-import "../../styles/markdown.css";
-import "../../styles/props.css";
-import "../../styles/reset.css";
-import "../../styles/shiki.css";
-import "../../styles/util.css";
----
-<Markdown><slot></Markdown>
-
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 1d7d979..5ab1b8c 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -28,11 +28,10 @@ const directories = ["skills", "projects", "blogs"];
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
-        border: 0;
-        border-bottom: 1px;
+        border: 1.5px var(--alt);
         border-style: solid;
         margin-bottom: 0.75rem;
-        padding-bottom: 0.75rem;
+        padding: 0.75rem;
     }
     #nav-links a {
         margin-right: 0.15rem;
diff --git a/src/components/Prose.astro b/src/components/Prose.astro
deleted file mode 100644
index d1aa1c4..0000000
--- a/src/components/Prose.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
----
-<div
-  class="prose dark:prose-invert
-  prose-h1:font-bold prose-h1:text-xl
-  prose-a:text-blue-300 prose-p:text-justify prose-img:rounded-xl">
-  <slot />
-</div>
diff --git a/src/content/aadkadocs/blogs/index.md b/src/content/aadkadocs/blogs/index.md
deleted file mode 100644
index dfab5a3..0000000
--- a/src/content/aadkadocs/blogs/index.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: The search for the perfect ed25519 key pair
-template: splash
----
-
-Todo write intro to catch attention
-
-### Why care about ed25519 key pairs?
-
-Ed25519 is a cryptographic algorithm for generating
-a pair of keys, a public one that can be shared with anyone
-and a private one that is kept as a secret.
-
-### The ssh public key format
-
-If you have ever accessed a remote server it was most likely by
-ssh-ing into it.  
-You have also most likely had to copy paste something similar to this:
-
-```
-ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIBSSj+yfJLWEb+Df4r4603TOFAUBREYS43qQB+c9i9UW
-```
-
-Let's break it down
-
-- The first part `ssh-ed25519` is the algorithm type, other common algorithms are `ssh-rsa` and `ssh-ecdsa`
-- The second part is a base64-encoded binary format consiting of
-  - the length of the algorithm string, for ed25519 it's always 11 (4 bytes long)
-  - the algorithm type, for ed25519 it's always `ssh-ed25519` in binary (11 bytes long)
-  - the length of the key, 32 bytes for ed25519 (4 bytes long)
-  - the actual ed25519 key (32 bytes long)
-
-### Embedding a word in base64
-
-Base64 is a widely used format for writing binary in a compact and human readable way,
-it uses A-Z, a-z, 0-9, '/' and '+' adding up to 64 unique characters.
-
-It's possible to choose specific bytes in a way that when encoding it with base64
-it will form a word.
-
-For example, to encode "Kyren" in base64, we can use the following bytes  
-`00101011 00101010 01001110` or in hex `2b 2a de`
diff --git a/src/content/aadkadocs/blogs/test.md b/src/content/aadkadocs/blogs/test.md
deleted file mode 100644
index f8e3832..0000000
--- a/src/content/aadkadocs/blogs/test.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: My dakdkadkadk a
-description: EEEEEE akd ak dka kdak ak dka kdka dk ak
-template: splash
----
-
-# My oadkadkakd
-
-## Secondary
-
-Testing some content with multiline thing
-
-```go example.go
-package main
-
-import "fmt"
-
-func main() {
-  fmt.Println("Hello, World!")
-}
-```
-
-Hmm
diff --git a/src/content/aadkadocs/blogs/test2.md b/src/content/aadkadocs/blogs/test2.md
deleted file mode 100644
index 02b9fbd..0000000
--- a/src/content/aadkadocs/blogs/test2.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: My docs
-description: Learn more about my project in this docs site built with Starlight.
-template: splash
----
-
-# My Title
-
-## Secondary
-
-### Test
-
-#### 4
-
-##### 5
-
-###### 6
-
-####### 7 Should be normal
-
-Testing some content with multiline thing
-let's see what happens if this wraps  
-This should be super close
-
-This should be far
-
-- Some bullets
-- Adka kda kd ak
-- d kakd akd ka k
-
-- [ ] Check me
-- [x] Already checked
-
-## Smaller header
-
-How about code blocks
-
-```go example.go
-package main
-
-import "fmt"
-
-func main() {
-  fmt.Println("Hello, World!")
-}
-```
-
-Hmm
-
-> ![INFO]
-> Does this work
-
-This is `highlighting` I think is what it's called
-
-:::caution
-If you are not sure you want an awesome docs site, think twice before using [Starlight](/).
-:::
-
-:::danger
-Your users may be more productive and find your product easier to use thanks to helpful Starlight features.
-
-- Clear navigation
-- User-configurable colour theme
-- [i18n support](/guides/i18n/)
-
-:::
diff --git a/src/content/blogs/blog-1.md b/src/content/blogs/blog-1.md
index 75128e5..4630f17 100644
--- a/src/content/blogs/blog-1.md
+++ b/src/content/blogs/blog-1.md
@@ -1,7 +1,3 @@
----
-title: The search for the perfect ed25519 key pair
-template: splash
----
 # My Title
 
 ## Secondary
@@ -35,21 +31,6 @@ func main() {
 
 Hmm
 
-> ![INFO]
 > Does this work
 
 This is `highlighting` I think is what it's called
-
-:::caution
-If you are not sure you want an awesome docs site, think twice before using [Starlight](/).
-:::
-
-:::danger
-Your users may be more productive and find your product easier to use thanks to helpful Starlight features.
-
-- Clear navigation
-- User-configurable colour theme
-- [i18n support](/guides/i18n/)
-
-:::
-
diff --git a/src/content/blogs/blog-2.md b/src/content/blogs/blog-2.md
deleted file mode 100644
index c6b02c0..0000000
--- a/src/content/blogs/blog-2.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: The search for the perfect ed25519 key pair
-template: splash
----
-# Other blog
-
-How about code blocks
-
-```go example.go
-package main
-
-import "fmt"
-
-func main() {
-  fmt.Println("Hello, World!")
-}
-```
-
-adkadkakdakd
diff --git a/src/content/config.ts b/src/content/config.ts
index 9d8d958..33140f3 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -1,5 +1,7 @@
-import { defineCollection } from "astro:content";
+import { defineCollection, z } from "astro:content";
 
 export const collections = {
-  blogs: defineCollection({}),
+  blogs: defineCollection({
+    type: "content",
+  }),
 };
diff --git a/src/layouts/Blog.astro b/src/layouts/Blog.astro
new file mode 100644
index 0000000..0300b59
--- /dev/null
+++ b/src/layouts/Blog.astro
@@ -0,0 +1,28 @@
+---
+import Markdown from "../components/Markdown.astro";
+
+interface Props {
+    title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="description" content="Astro description" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta name="generator" content={Astro.generator} />
+        <title>{title}</title>
+    </head>
+    <body>
+        <main class="w-[70%] m-auto">
+            <Markdown>
+                <slot />
+            </Markdown>
+        </main>
+    </body>
+</html>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 17d0a70..d8e68d1 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
 ---
+import "../styles/terminal.css";
+
 interface Props {
     title: string;
 }
@@ -20,94 +22,3 @@ const { title } = Astro.props;
         <slot />
     </body>
 </html>
-
-<style is:global>
-    @import url("../styles/JetBrainsMono.css");
-
-    /* :root { */
-    /*     --primary: #ffbf00; */
-    /*     --secondary: #9b7eca; */
-    /*     --accent: #7ed4fb; */
-    /*     --extra: #8fcc75; */
-    /*     --text: #ffffff; */
-    /*     --alt: #999999; */
-    /*     --background: #000000; */
-    /* } */
-
-    :root {
-        --primary: #54D7A9;
-        --secondary: #9b7eca;
-        --accent: #7ed4fb;
-        --extra: #8fcc75;
-        --text: #ffffff;
-        --alt: #999999;
-        --background: #000000;
-    }
-
-    * {
-        margin: 0;
-        padding: 0;
-    }
-
-    html {
-        background-color: var(--background);
-        color: var(--text);
-        font-family: "Jetbrains Mono", monospace;
-        user-select: none;
-    }
-
-    body {
-        overflow-y: scroll;
-        zoom: 1;
-    }
-    @media screen and (max-width: 768px) {
-        body {
-            zoom: 0.8;
-        }
-    }
-    @media screen and (max-width: 480px) {
-        body {
-            zoom: 0.7;
-        }
-    }
-
-    main {
-        display: grid;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        grid-template-columns: minmax(200px, 1fr);
-        transform: translate(-50%, -50%);
-        border: 1px;
-        border-style: solid;
-        background: var(--background);
-        padding: 1.75rem;
-        width: 55rem;
-        max-width: 75%;
-        padding-top: 1.25rem;
-    }
-
-    h1,
-    h2,
-    h3 {
-        font-size: 1rem;
-        font-weight: bold;
-    }
-
-    a {
-        font-weight: 300;
-    }
-    a:link,
-    a:visited,
-    a:active {
-        background-color: transparent;
-        text-decoration: none;
-        color: var(--secondary);
-    }
-    a:hover {
-        transition-duration: 0.2s;
-        transition-property: color, text-decoration;
-        text-decoration: underline;
-        color: var(--accent);
-    }
-</style>
diff --git a/src/pages/blogs/[...slug].astro b/src/pages/blogs/[...slug].astro
index 417d1a6..37e6f53 100644
--- a/src/pages/blogs/[...slug].astro
+++ b/src/pages/blogs/[...slug].astro
@@ -1,32 +1,19 @@
 ---
-import Markdown from "../../components/MarkdownB.astro";
+import Blog from "../../layouts/Blog.astro";
 import { getCollection } from "astro:content";
 
 export async function getStaticPaths() {
-  const blogEntries = await getCollection("blogs");
-  return blogEntries.map((entry) => ({
-    params: { slug: entry.slug },
-    props: { entry },
-  }));
+    const blogEntries = await getCollection("blogs");
+    return blogEntries.map((entry) => ({
+        params: { slug: entry.slug },
+        props: { entry },
+    }));
 }
 
 const { entry } = Astro.props;
 const { Content } = await entry.render();
 ---
 
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <title>Test</title>
-  </head>
-  <body>
-    <main>
-      <Markdown><Content /></Markdown>
-    </main>
-  </body>
-</html>
+<Blog title=`/home/kyren/blogs/${entry.slug}`>
+    <Content />
+</Blog>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8b1d8e5..2a47693 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -26,7 +26,7 @@ And when I am not coding I am most likely playing video games,
 watching Anime or solving Rubik's cubes fast.`.trimStart();
 ---
 
-<Layout title="Kyren's Website">
+<Layout title="/home/kyren/">
     <main>
         <Nav path="" />
         <div id="content">
@@ -165,29 +165,4 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
         line-height: 30px;
         font-size: 16px;
     }
-
-    nav {
-        font-weight: 300;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        border: 0;
-        border-bottom: 1px;
-        border-style: solid;
-        margin-bottom: 0.75rem;
-        padding-bottom: 0.75rem;
-    }
-    #nav-links a {
-        margin-right: 0.15rem;
-        margin-bottom: 0px;
-        margin-left: 0.15rem;
-        color: var(--primary);
-        font-size: 1rem;
-    }
-    #nav-links a:hover {
-        color: var(--accent);
-    }
-    #nav-path {
-        margin-right: 2rem;
-    }
 </style>
diff --git a/src/pages/main.astro b/src/pages/main.astro
deleted file mode 100644
index 0c1233f..0000000
--- a/src/pages/main.astro
+++ /dev/null
@@ -1,123 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
----
-
-<Layout title="Kyren's Website">
-	<main>
-		<svg
-			class="astro-a"
-			width="495"
-			height="623"
-			viewBox="0 0 495 623"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			aria-hidden="true"
-		>
-			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
-				d="M167.19 364.254C83.4786 364.254 0 404.819 0 404.819C0 404.819 141.781 19.4876 142.087 18.7291C146.434 7.33701 153.027 0 162.289 0H332.441C341.703 0 348.574 7.33701 352.643 18.7291C352.92 19.5022 494.716 404.819 494.716 404.819C494.716 404.819 426.67 364.254 327.525 364.254L264.41 169.408C262.047 159.985 255.147 153.581 247.358 153.581C239.569 153.581 232.669 159.985 230.306 169.408L167.19 364.254ZM160.869 530.172C160.877 530.18 160.885 530.187 160.894 530.195L160.867 530.181C160.868 530.178 160.868 530.175 160.869 530.172ZM136.218 411.348C124.476 450.467 132.698 504.458 160.869 530.172C160.997 529.696 161.125 529.242 161.248 528.804C161.502 527.907 161.737 527.073 161.917 526.233C165.446 509.895 178.754 499.52 195.577 500.01C211.969 500.487 220.67 508.765 223.202 527.254C224.141 534.12 224.23 541.131 224.319 548.105C224.328 548.834 224.337 549.563 224.347 550.291C224.563 566.098 228.657 580.707 237.264 593.914C245.413 606.426 256.108 615.943 270.749 622.478C270.593 621.952 270.463 621.508 270.35 621.126C270.045 620.086 269.872 619.499 269.685 618.911C258.909 585.935 266.668 563.266 295.344 543.933C298.254 541.971 301.187 540.041 304.12 538.112C310.591 533.854 317.059 529.599 323.279 525.007C345.88 508.329 360.09 486.327 363.431 457.844C364.805 446.148 363.781 434.657 359.848 423.275C358.176 424.287 356.587 425.295 355.042 426.275C351.744 428.366 348.647 430.33 345.382 431.934C303.466 452.507 259.152 455.053 214.03 448.245C184.802 443.834 156.584 436.019 136.218 411.348Z"
-				fill="url(#paint0_linear_1805_24383)"></path>
-			<defs>
-				<linearGradient
-					id="paint0_linear_1805_24383"
-					x1="247.358"
-					y1="0"
-					x2="247.358"
-					y2="622.479"
-					gradientUnits="userSpaceOnUse"
-				>
-					<stop stop-opacity="0.9"></stop>
-					<stop offset="1" stop-opacity="0.2"></stop>
-				</linearGradient>
-			</defs>
-		</svg>
-		<h1>Welcome to <span class="text-gradient">Kyren's Site</span></h1>
-		<p class="instructions">
-			To get started, open the directory <code>src/pages</code> in your project.<br />
-			<strong>Code Challenge:</strong> Tweak HMMM "Welcome to Astro" message above.
-		</p>
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://docs.astro.build/"
-				title="Documentation"
-				body="Learn how Astro works and explore the official API docs."
-			/>
-			<Card
-				href="https://astro.build/integrations/"
-				title="Integrations"
-				body="Supercharge your project with new frameworks and libraries."
-			/>
-			<Card
-				href="https://astro.build/themes/"
-				title="Themes"
-				body="Explore a galaxy of community-built starter themes."
-			/>
-			<Card
-				href="https://astro.build/chat/"
-				title="Community"
-				body="Come say hi to our amazing Discord community. ❤️"
-			/>
-		</ul>
-	</main>
-</Layout>
-
-<style>
-	main {
-		margin: auto;
-		padding: 1rem;
-		width: 800px;
-		max-width: calc(100% - 2rem);
-		color: white;
-		font-size: 20px;
-		line-height: 1.6;
-	}
-	.astro-a {
-		position: absolute;
-		top: -32px;
-		left: 50%;
-		transform: translatex(-50%);
-		width: 220px;
-		height: auto;
-		z-index: -1;
-	}
-	h1 {
-		font-size: 4rem;
-		font-weight: 700;
-		line-height: 1;
-		text-align: center;
-		margin-bottom: 1em;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		padding: 1.5rem;
-		border-radius: 8px;
-	}
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent-light));
-	}
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 2rem;
-		padding: 0;
-	}
-</style>
diff --git a/src/styles/custom.css b/src/styles/custom.css
deleted file mode 100644
index 52983d8..0000000
--- a/src/styles/custom.css
+++ /dev/null
@@ -1,10 +0,0 @@
-:root {
-  width: 70%;
-  margin: auto;
-  /* --sl-text-body-sm: var(--sl-text-sm * 10); */
-  /* --sl-text-code-sm: var(--sl-text-xs * 10); */
-  /* font-size: 130%; */
-}
-p {
-  /* font-size: 1.625rem; */
-}
diff --git a/src/styles/JetBrainsMono.css b/src/styles/fonts/JetBrainsMono.css
index fc6fa3e..fc6fa3e 100644
--- a/src/styles/JetBrainsMono.css
+++ b/src/styles/fonts/JetBrainsMono.css
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
deleted file mode 100644
index 9d30641..0000000
--- a/src/styles/markdown.css
+++ /dev/null
@@ -1,218 +0,0 @@
-.sl-markdown-content
-	:not(a, strong, em, del, span, input, code, br)
-	+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
-	margin-top: 1rem;
-}
-
-/* Headings after non-headings have more spacing. */
-.sl-markdown-content
-	:not(h1, h2, h3, h4, h5, h6)
-	+ :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
-	margin-top: 1.5em;
-}
-
-.sl-markdown-content li + li:not(:where(.not-content *)),
-.sl-markdown-content dt + dt:not(:where(.not-content *)),
-.sl-markdown-content dt + dd:not(:where(.not-content *)),
-.sl-markdown-content dd + dd:not(:where(.not-content *)) {
-	margin-top: 0.25rem;
-}
-
-.sl-markdown-content li:not(:where(.not-content *)) {
-	overflow-wrap: anywhere;
-}
-
-.sl-markdown-content
-	li
-	> :last-child:not(li, ul, ol):not(a, strong, em, del, span, input, :where(.not-content *)) {
-	margin-bottom: 1.25rem;
-}
-
-.sl-markdown-content dt:not(:where(.not-content *)) {
-	font-weight: 700;
-}
-.sl-markdown-content dd:not(:where(.not-content *)) {
-	padding-inline-start: 1rem;
-}
-
-.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
-	color: var(--sl-color-white);
-	line-height: var(--sl-line-height-headings);
-	font-weight: 600;
-    font-size: 10000%;
-}
-
-.sl-markdown-content :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) {
-	display: block;
-	max-width: 100%;
-	height: auto;
-}
-
-.sl-markdown-content h1:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h1);
-}
-.sl-markdown-content h2:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h2);
-}
-.sl-markdown-content h3:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h3);
-}
-.sl-markdown-content h4:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h4);
-}
-.sl-markdown-content h5:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h5);
-}
-.sl-markdown-content h6:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h6);
-}
-
-.sl-markdown-content a:not(:where(.not-content *)) {
-	color: var(--sl-color-text-accent);
-}
-.sl-markdown-content a:hover:not(:where(.not-content *)) {
-	color: var(--sl-color-white);
-}
-
-.sl-markdown-content code:not(:where(.not-content *)) {
-	background-color: var(--sl-color-bg-inline-code);
-	margin-block: -0.125rem;
-	padding: 0.125rem 0.375rem;
-	font-size: var(--sl-text-code-sm);
-}
-.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code {
-	font-size: inherit;
-}
-
-.sl-markdown-content pre:not(:where(.not-content *)) {
-	border: 1px solid var(--sl-color-gray-5);
-	padding: 0.75rem 1rem;
-	font-size: var(--sl-text-code);
-	tab-size: 2;
-}
-
-.sl-markdown-content pre code:not(:where(.not-content *)) {
-	all: unset;
-	font-family: var(--__sl-font-mono);
-}
-
-.sl-markdown-content blockquote:not(:where(.not-content *)) {
-	border-inline-start: 1px solid var(--sl-color-gray-5);
-	padding-inline-start: 1rem;
-}
-
-/* Table styling */
-.sl-markdown-content table:not(:where(.not-content *)) {
-	display: block;
-	overflow: auto;
-	border-spacing: 0;
-}
-.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
-	border-bottom: 1px solid var(--sl-color-gray-5);
-	padding: 0.5rem 1rem;
-	/* Align text to the top of the row in multiline tables. */
-	vertical-align: baseline;
-}
-.sl-markdown-content :is(th:first-child, td:first-child):not(:where(.not-content *)) {
-	padding-inline-start: 0;
-}
-.sl-markdown-content :is(th:last-child, td:last-child):not(:where(.not-content *)) {
-	padding-inline-end: 0;
-}
-.sl-markdown-content th:not(:where(.not-content *)) {
-	color: var(--sl-color-white);
-	font-weight: 600;
-}
-/* Align headings to the start of the line unless set by the `align` attribute. */
-.sl-markdown-content th:not([align]):not(:where(.not-content *)) {
-	text-align: start;
-}
-/* <table>s, <hr>s, and <blockquote>s inside asides */
-.sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) {
-	border-color: var(--sl-color-gray-4);
-}
-@supports (border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent)) {
-	.sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) {
-		border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent);
-	}
-}
-
-/* <code> inside asides */
-@supports (border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent)) {
-	.sl-markdown-content .starlight-aside code:not(:where(.not-content *)) {
-		background-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent);
-	}
-}
-
-.sl-markdown-content hr:not(:where(.not-content *)) {
-	border: 0;
-	border-bottom: 1px solid var(--sl-color-hairline);
-}
-
-/* <details> and <summary> styles */
-.sl-markdown-content details:not(:where(.not-content *)) {
-	--sl-details-border-color: var(--sl-color-gray-5);
-	--sl-details-border-color--hover: var(--sl-color-text-accent);
-
-	border-inline-start: 2px solid var(--sl-details-border-color);
-	padding-inline-start: 1rem;
-}
-.sl-markdown-content details:not([open]):hover:not(:where(.not-content *)),
-.sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
-	border-color: var(--sl-details-border-color--hover);
-}
-.sl-markdown-content summary:not(:where(.not-content *)) {
-	color: var(--sl-color-white);
-	cursor: pointer;
-	display: block; /* Needed to hide the default marker in some browsers. */
-	font-weight: 600;
-	/* Expand the outline so that the marker cannot distort it. */
-	margin-inline-start: -0.5rem;
-	padding-inline-start: 0.5rem;
-}
-.sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
-	margin-bottom: 1rem;
-}
-
-/* <summary> marker styles */
-.sl-markdown-content summary:not(:where(.not-content *))::marker,
-.sl-markdown-content summary:not(:where(.not-content *))::-webkit-details-marker {
-	display: none;
-}
-.sl-markdown-content summary:not(:where(.not-content *))::before {
-	--sl-details-marker-size: 1.25rem;
-
-	background-color: currentColor;
-	content: '';
-	display: inline-block;
-	height: var(--sl-details-marker-size);
-	width: var(--sl-details-marker-size);
-	margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem;
-	vertical-align: middle;
-	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
-	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-}
-@media (prefers-reduced-motion: no-preference) {
-	.sl-markdown-content summary:not(:where(.not-content *))::before {
-		transition: transform 0.2s ease-in-out;
-	}
-}
-.sl-markdown-content details[open] > summary:not(:where(.not-content *))::before {
-	transform: rotateZ(90deg);
-}
-[dir='rtl'] .sl-markdown-content summary:not(:where(.not-content *))::before,
-.sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::before {
-	transform: rotateZ(180deg);
-}
-/* <summary> with only a paragraph automatically added when using MDX */
-.sl-markdown-content summary:not(:where(.not-content *)) p:only-child {
-	display: inline;
-}
-
-/* <details> styles inside asides */
-.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) {
-	--sl-details-border-color: var(--sl-color-asides-border);
-	--sl-details-border-color--hover: var(--sl-color-asides-text-accent);
-}
diff --git a/src/styles/asides.css b/src/styles/markdown/asides.css
index 86aff8d..86aff8d 100644
--- a/src/styles/asides.css
+++ b/src/styles/markdown/asides.css
diff --git a/src/styles/markdown/markdown.css b/src/styles/markdown/markdown.css
new file mode 100644
index 0000000..eccbf7d
--- /dev/null
+++ b/src/styles/markdown/markdown.css
@@ -0,0 +1,251 @@
+.sl-markdown-content
+  :not(.expressive-code *)
+  + :not(a, strong, em, del, span, input, code, br)
+  + :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
+  margin-top: 1rem;
+}
+
+/* Headings after non-headings have more spacing. */
+.sl-markdown-content
+  :not(h1, h2, h3, h4, h5, h6)
+  + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+  margin-top: 1.5em;
+}
+
+.sl-markdown-content li + li:not(:where(.not-content *)),
+.sl-markdown-content dt + dt:not(:where(.not-content *)),
+.sl-markdown-content dt + dd:not(:where(.not-content *)),
+.sl-markdown-content dd + dd:not(:where(.not-content *)) {
+  margin-top: 0.25rem;
+}
+
+.sl-markdown-content li:not(:where(.not-content *)) {
+  overflow-wrap: anywhere;
+}
+
+.sl-markdown-content
+  li
+  > :last-child:not(li, ul, ol):not(
+    a,
+    strong,
+    em,
+    del,
+    span,
+    input,
+    :where(.not-content *)
+  ) {
+  margin-bottom: 1.25rem;
+}
+
+.sl-markdown-content dt:not(:where(.not-content *)) {
+  font-weight: 700;
+}
+.sl-markdown-content dd:not(:where(.not-content *)) {
+  padding-inline-start: 1rem;
+}
+
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+  color: var(--sl-color-white);
+  line-height: var(--sl-line-height-headings);
+  font-weight: 600;
+  font-size: 10000%;
+}
+
+.sl-markdown-content
+  :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.sl-markdown-content h1:not(:where(.not-content *)) {
+  font-size: var(--sl-text-h1);
+}
+.sl-markdown-content h2:not(:where(.not-content *)) {
+  font-size: var(--sl-text-h2);
+}
+.sl-markdown-content h3:not(:where(.not-content *)) {
+  font-size: var(--sl-text-h3);
+}
+.sl-markdown-content h4:not(:where(.not-content *)) {
+  font-size: var(--sl-text-h4);
+}
+.sl-markdown-content h5:not(:where(.not-content *)) {
+  font-size: var(--sl-text-h5);
+}
+.sl-markdown-content h6:not(:where(.not-content *)) {
+  font-size: var(--sl-text-h6);
+}
+
+.sl-markdown-content a:not(:where(.not-content *)) {
+  color: var(--sl-color-text-accent);
+}
+.sl-markdown-content a:hover:not(:where(.not-content *)) {
+  color: var(--sl-color-white);
+}
+
+.sl-markdown-content code:not(:where(.not-content *)) {
+  background-color: var(--sl-color-bg-inline-code);
+  margin-block: -0.125rem;
+  padding: 0.125rem 0.375rem;
+  font-size: var(--sl-text-code-sm);
+}
+.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code {
+  font-size: inherit;
+}
+
+.sl-markdown-content pre:not(:where(.not-content *)) {
+  border: 1px solid var(--sl-color-gray-5);
+  padding: 0.75rem 1rem;
+  font-size: var(--sl-text-code);
+  tab-size: 2;
+}
+
+.sl-markdown-content pre code:not(:where(.not-content *)) {
+  all: unset;
+  font-family: var(--__sl-font-mono);
+}
+
+.sl-markdown-content blockquote:not(:where(.not-content *)) {
+  border-inline-start: 1px solid var(--sl-color-gray-5);
+  padding-inline-start: 1rem;
+}
+
+/* Table styling */
+.sl-markdown-content table:not(:where(.not-content *)) {
+  display: block;
+  overflow: auto;
+  border-spacing: 0;
+}
+.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
+  border-bottom: 1px solid var(--sl-color-gray-5);
+  padding: 0.5rem 1rem;
+  /* Align text to the top of the row in multiline tables. */
+  vertical-align: baseline;
+}
+.sl-markdown-content
+  :is(th:first-child, td:first-child):not(:where(.not-content *)) {
+  padding-inline-start: 0;
+}
+.sl-markdown-content
+  :is(th:last-child, td:last-child):not(:where(.not-content *)) {
+  padding-inline-end: 0;
+}
+.sl-markdown-content th:not(:where(.not-content *)) {
+  color: var(--sl-color-white);
+  font-weight: 600;
+}
+/* Align headings to the start of the line unless set by the `align` attribute. */
+.sl-markdown-content th:not([align]):not(:where(.not-content *)) {
+  text-align: start;
+}
+/* <table>s, <hr>s, and <blockquote>s inside asides */
+.sl-markdown-content
+  .starlight-aside
+  :is(th, td, hr, blockquote):not(:where(.not-content *)) {
+  border-color: var(--sl-color-gray-4);
+}
+@supports (
+  border-color:
+    color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent)
+) {
+  .sl-markdown-content
+    .starlight-aside
+    :is(th, td, hr, blockquote):not(:where(.not-content *)) {
+    border-color: color-mix(
+      in srgb,
+      var(--sl-color-asides-text-accent) 30%,
+      transparent
+    );
+  }
+}
+
+/* <code> inside asides */
+@supports (
+  border-color:
+    color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent)
+) {
+  .sl-markdown-content .starlight-aside code:not(:where(.not-content *)) {
+    background-color: color-mix(
+      in srgb,
+      var(--sl-color-asides-text-accent) 12%,
+      transparent
+    );
+  }
+}
+
+.sl-markdown-content hr:not(:where(.not-content *)) {
+  border: 0;
+  border-bottom: 1px solid var(--sl-color-hairline);
+}
+
+/* <details> and <summary> styles */
+.sl-markdown-content details:not(:where(.not-content *)) {
+  --sl-details-border-color: var(--sl-color-gray-5);
+  --sl-details-border-color--hover: var(--sl-color-text-accent);
+
+  border-inline-start: 2px solid var(--sl-details-border-color);
+  padding-inline-start: 1rem;
+}
+.sl-markdown-content details:not([open]):hover:not(:where(.not-content *)),
+.sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
+  border-color: var(--sl-details-border-color--hover);
+}
+.sl-markdown-content summary:not(:where(.not-content *)) {
+  color: var(--sl-color-white);
+  cursor: pointer;
+  display: block; /* Needed to hide the default marker in some browsers. */
+  font-weight: 600;
+  /* Expand the outline so that the marker cannot distort it. */
+  margin-inline-start: -0.5rem;
+  padding-inline-start: 0.5rem;
+}
+.sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
+  margin-bottom: 1rem;
+}
+
+/* <summary> marker styles */
+.sl-markdown-content summary:not(:where(.not-content *))::marker,
+.sl-markdown-content
+  summary:not(:where(.not-content *))::-webkit-details-marker {
+  display: none;
+}
+.sl-markdown-content summary:not(:where(.not-content *))::before {
+  --sl-details-marker-size: 1.25rem;
+
+  background-color: currentColor;
+  content: "";
+  display: inline-block;
+  height: var(--sl-details-marker-size);
+  width: var(--sl-details-marker-size);
+  margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem;
+  vertical-align: middle;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .sl-markdown-content summary:not(:where(.not-content *))::before {
+    transition: transform 0.2s ease-in-out;
+  }
+}
+.sl-markdown-content
+  details[open]
+  > summary:not(:where(.not-content *))::before {
+  transform: rotateZ(90deg);
+}
+[dir="rtl"] .sl-markdown-content summary:not(:where(.not-content *))::before,
+.sl-markdown-content [dir="rtl"] summary:not(:where(.not-content *))::before {
+  transform: rotateZ(180deg);
+}
+/* <summary> with only a paragraph automatically added when using MDX */
+.sl-markdown-content summary:not(:where(.not-content *)) p:only-child {
+  display: inline;
+}
+
+/* <details> styles inside asides */
+.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) {
+  --sl-details-border-color: var(--sl-color-asides-border);
+  --sl-details-border-color--hover: var(--sl-color-asides-text-accent);
+}
diff --git a/src/styles/props.css b/src/styles/markdown/props.css
index 58a09f6..58a09f6 100644
--- a/src/styles/props.css
+++ b/src/styles/markdown/props.css
diff --git a/src/styles/reset.css b/src/styles/markdown/reset.css
index 42be0c5..42be0c5 100644
--- a/src/styles/reset.css
+++ b/src/styles/markdown/reset.css
diff --git a/src/styles/shiki.css b/src/styles/markdown/shiki.css
index 704eea8..704eea8 100644
--- a/src/styles/shiki.css
+++ b/src/styles/markdown/shiki.css
diff --git a/src/styles/util.css b/src/styles/markdown/util.css
index 63ede50..63ede50 100644
--- a/src/styles/util.css
+++ b/src/styles/markdown/util.css
diff --git a/src/styles/terminal.css b/src/styles/terminal.css
new file mode 100644
index 0000000..68d6c79
--- /dev/null
+++ b/src/styles/terminal.css
@@ -0,0 +1,88 @@
+@import url("../styles/fonts/JetBrainsMono.css");
+
+/* :root { */
+/*     --primary: #ffbf00; */
+/*     --secondary: #9b7eca; */
+/*     --accent: #7ed4fb; */
+/*     --extra: #8fcc75; */
+/*     --text: #ffffff; */
+/*     --alt: #999999; */
+/*     --background: #000000; */
+/* } */
+
+:root {
+  --primary: #54d7a9;
+  --secondary: #9b7eca;
+  --accent: #7ed4fb;
+  --extra: #8fcc75;
+  --text: #ffffff;
+  --alt: #999999;
+  --background: #000000;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  background-color: var(--background);
+  color: var(--text);
+  font-family: "Jetbrains Mono", monospace;
+  user-select: none;
+}
+
+body {
+  overflow-y: scroll;
+  zoom: 1;
+}
+@media screen and (max-width: 768px) {
+  body {
+    zoom: 0.8;
+  }
+}
+@media screen and (max-width: 480px) {
+  body {
+    zoom: 0.7;
+  }
+}
+
+main {
+  display: grid;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  grid-template-columns: minmax(200px, 1fr);
+  transform: translate(-50%, -50%);
+  border: 1px;
+  border-style: solid;
+  background: var(--background);
+  padding: 1.75rem;
+  width: 55rem;
+  max-width: 75%;
+  padding-top: 1.25rem;
+}
+
+h1,
+h2,
+h3 {
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+a {
+  font-weight: 300;
+}
+a:link,
+a:visited,
+a:active {
+  background-color: transparent;
+  text-decoration: none;
+  color: var(--secondary);
+}
+a:hover {
+  transition-duration: 0.2s;
+  transition-property: color, text-decoration;
+  text-decoration: underline;
+  color: var(--accent);
+}