Fixed terminal border to scale nicely on mobile

3 files changed, 24 insertions, 27 deletions

diff --git a/src/components/TerminalBorder.astro b/src/components/TerminalBorder.astro
index 42cf5af..4e8bfb3 100644
--- a/src/components/TerminalBorder.astro
+++ b/src/components/TerminalBorder.astro
@@ -8,42 +8,36 @@ interface Props {
 const { header = "", footer = "", extra = "m-[-0.1vw]" } = Astro.props;
 ---
 
-<div class=`section ${extra}`>
-    <span class="tag-top">{header}</span>
-    <span class="tag-bottom">{footer}</span>
+<div
+    class=`section
+    p-[0.8em] pt-[1.0625em] border-[0.1vw] text-[3.5vw]
+    sm:p-[1vw] sm:pt-[1.0625vw] sm:border-[0.1vw] sm:text-[100%]
+    ${extra}`
+>
+    <span
+        class="tag px-[0.5em] text-[2.5vw] left-[0.5em] top-[-0.7em]
+        sm:px-[0.625vw] sm:text-[1vw] sm:left-[0.625vw] sm:top-[-0.75vw]"
+        >{header}</span
+    >
+    <span
+        class="tag px-[0.5em] text-[2.5vw] left-[0.5em] bottom-[-0.7em]
+        sm:px-[0.625vw] sm:text-[1vw] sm:left-[0.625vw] sm:bottom-[-0.75vw]"
+        >{footer}</span
+    >
     <slot />
 </div>
 
 <style>
     .section {
         position: relative;
-        padding: 1vw;
-        padding-top: 1.0625vw;
         display: flex;
         border-style: solid;
-        border-width: 0.1vw;
         border-color: var(--alt);
     }
 
-    .tag-top {
+    .tag {
         position: absolute;
-        top: -0.75vw;
-        left: 0.625vw;
         background-color: var(--background);
-        padding-right: 0.625vw;
-        padding-left: 0.625vw;
-        font-size: 1vw;
-        color: var(--alt);
-    }
-
-    .tag-bottom {
-        position: absolute;
-        bottom: -0.75vw;
-        left: 0.625vw;
-        background-color: var(--background);
-        padding-right: 0.625vw;
-        padding-left: 0.625vw;
-        font-size: 1vw;
         color: var(--alt);
     }
 </style>
diff --git a/src/layouts/Terminal.astro b/src/layouts/Terminal.astro
index e4dea03..cb94bd0 100644
--- a/src/layouts/Terminal.astro
+++ b/src/layouts/Terminal.astro
@@ -15,7 +15,7 @@ const { path: title } = Astro.props;
     <Head title=`/home/kyren/${title}` description="My personal website" />
     <body>
         <main class="
-            w-[95vw] h-[97svh] p-[2.2svh] text-[1.125vh] 
+            w-[95vw] h-[97svh] p-[2.2svh] text-[3vw] 
             sm:w-[68.75vw] sm:h-[35vw] sm:p-[2.2vw] sm:text-[1.125vw] sm:border-[0.2vw] sm:border-solid
             ">
             <Nav path={title} />
diff --git a/src/pages/blogs.astro b/src/pages/blogs.astro
index ce10eae..45089f6 100644
--- a/src/pages/blogs.astro
+++ b/src/pages/blogs.astro
@@ -12,15 +12,18 @@ const blogs = (await getCollection("blogs"))
         date: blog.data.date,
         href: "/blogs/" + blog.slug,
     }));
+const repeatArray = (arr, times) => Array(times).fill(arr).flat();
+const repeated = repeatArray(blogs, 10);
+
 ---
 
 <Terminal path="blogs/">
-    <TerminalBorder header="Shell" extra="mt-[0.625vw] mb-[1.5625vw]">
+    <TerminalBorder header="Shell" extra="sm:mt-[0.625vw] sm:mb-[1.5625vw]">
         <p>$ ls -lah -t --color=auto ~/blogs</p>
     </TerminalBorder>
-    <div class="max-h-[24vw] overflow-y-auto">
+    <div class="sm:max-h-[24vw] overflow-y-auto">
         {
-            blogs.map((blog) => (
+            repeated.map((blog) => (
                 <>
                     <BlogItem
                         title={blog.title}