10 files changed, 339 insertions, 228 deletions
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);
+}