From 3fd17c84becf579e060eebe4d7aac14e54ec5c98 Mon Sep 17 00:00:00 2001
From: Kyren223 <Kyren223@proton.me>
Date: Fri, 3 Jan 2025 14:59:59 +0200
Subject: Refactored terminal border to allow injecting arbitrary tailwind css

---
 src/pages/404.astro    | 14 +++++++++-----
 src/pages/blogs.astro  |  2 +-
 src/pages/index.astro  |  2 +-
 src/pages/skills.astro | 10 ++++++++--
 4 files changed, 19 insertions(+), 9 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/404.astro b/src/pages/404.astro
index 2e24449..9d3910e 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,14 +1,17 @@
 ---
-import TerminalBorder from "@components/TerminalBorder.astro"
-import Terminal from "@layouts/Terminal.astro"
+import TerminalBorder from "@components/TerminalBorder.astro";
+import Terminal from "@layouts/Terminal.astro";
 
 const url = new URL(Astro.request.url).pathname.substring(1);
 ---
+
 <Terminal path="404">
-    <TerminalBorder header="Shell" margin="0.5rem 0">
+    <TerminalBorder header="Shell" extra="my-[0.625vw]">
         <span>
             <p id="cd">$ cd ~/{url}</p>
-            <p id="err" class="pt-3">"{url}": No such file or directory (os error 2)</p>
+            <p id="err" class="pt-[1vw]">
+                "{url}": No such file or directory (os error 2)
+            </p>
         </span>
     </TerminalBorder>
 </Terminal>
@@ -16,6 +19,7 @@ const url = new URL(Astro.request.url).pathname.substring(1);
     document.addEventListener("DOMContentLoaded", () => {
         const url = window.location.pathname.substring(1);
         document.getElementById("cd")!.textContent = `$ cd ~/${url}`;
-        document.getElementById("err")!.textContent = `"${url}": No such file or directory (os error 2)`;
+        document.getElementById("err")!.textContent =
+            `"${url}": No such file or directory (os error 2)`;
     });
 </script>
diff --git a/src/pages/blogs.astro b/src/pages/blogs.astro
index 400dde0..ce10eae 100644
--- a/src/pages/blogs.astro
+++ b/src/pages/blogs.astro
@@ -15,7 +15,7 @@ const blogs = (await getCollection("blogs"))
 ---
 
 <Terminal path="blogs/">
-    <TerminalBorder header="Shell" margin="0.625vw 0 1.5625vw">
+    <TerminalBorder header="Shell" extra="mt-[0.625vw] mb-[1.5625vw]">
         <p>$ ls -lah -t --color=auto ~/blogs</p>
     </TerminalBorder>
     <div class="max-h-[24vw] overflow-y-auto">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 816bd91..25b7b5e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -117,7 +117,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
                     </Link> | Learning Golang & Backend | Available for hire
                 </p>
             </TerminalBorder>
-            <TerminalBorder header="About Me" margin="2.5vw 0">
+            <TerminalBorder header="About Me" extra="my-[2.5vw]">
                 <p>{aboutMe}</p>
             </TerminalBorder>
             <BlogItem
diff --git a/src/pages/skills.astro b/src/pages/skills.astro
index 778b3f1..03f4df6 100644
--- a/src/pages/skills.astro
+++ b/src/pages/skills.astro
@@ -13,7 +13,13 @@ const data = [
 ];
 
 const langs = ["Java", "C/C++", "Golang", "Kotlin", "Rust", "Lua"];
-const tools = ["Git & GitHub", "Sqlite3", "Neovim and IntelliJ", "Linux", "NixOS"];
+const tools = [
+    "Git & GitHub",
+    "Sqlite3",
+    "Neovim and IntelliJ",
+    "Linux",
+    "NixOS",
+];
 const frameworks = ["Spigot API", "Bubbletea", "Astro"];
 ---
 
@@ -25,7 +31,7 @@ const frameworks = ["Spigot API", "Bubbletea", "Astro"];
                     {langs.map((lang) => <p>{lang}</p>)}
                 </div>
             </TerminalBorder>
-            <TerminalBorder header="Frameworks" margin="2.25vw 0">
+            <TerminalBorder header="Frameworks" extra="my-[2.25vw]">
                 <div class="grid grid-cols-1 items-center gap-x-[0.625vw]">
                     {frameworks.map((framework) => <p>{framework}</p>)}
                 </div>
-- 
cgit v1.3.1