Started working on changing units to make the design more consistent

4 files changed, 33 insertions, 39 deletions

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 7d4d8a2..8148a81 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -26,23 +26,23 @@ const directories = ["skills", "projects", "blogs"];
     nav {
         display: flex;
         justify-content: space-between;
-        border: 1.5px var(--alt);
+        border: 0.125vw var(--alt);
         border-style: solid;
-        margin-bottom: 1.25rem;
-        padding: 0.75rem;
+        margin-bottom: 1.25em;
+        padding: 0.75em;
     }
     #nav-links a {
-        margin-right: 0.15rem;
         margin-bottom: 0px;
-        margin-left: 0.15rem;
+        margin-right: 0.15em;
+        margin-left: 0.15em;
+        font-size: 1.375vw;
         color: var(--primary);
-        font-size: 1.1rem;
     }
     #nav-links a:hover {
         color: var(--accent);
     }
     #nav-path {
-        margin-right: 2rem;
-        font-size: 1.1rem;
+        margin-right: 2em;
+        font-size: 1.375vw;
     }
 </style>
diff --git a/src/components/TerminalBorder.astro b/src/components/TerminalBorder.astro
index a6af7dc..230dc05 100644
--- a/src/components/TerminalBorder.astro
+++ b/src/components/TerminalBorder.astro
@@ -17,33 +17,33 @@ const { header = "", footer = "", margin = "-1px" } = Astro.props;
 <style>
     .section {
         position: relative;
-        padding: 0.8rem;
-        padding-top: 0.85rem;
+        padding: 0.8em;
+        padding-top: 0.85em;
         display: flex;
         border-style: solid;
-        border-width: 1px;
+        border-width: 0.1vw;
         border-color: var(--alt);
     }
 
     .tag-top {
         position: absolute;
-        top: -0.6rem;
-        left: 0.5rem;
+        top: -0.6em;
+        left: 0.5em;
         background-color: var(--background);
-        padding-right: 0.5rem;
-        padding-left: 0.5rem;
-        font-size: 0.8rem;
+        padding-right: 0.5em;
+        padding-left: 0.5em;
+        font-size: 0.8em;
         color: var(--alt);
     }
 
     .tag-bottom {
         position: absolute;
-        bottom: -0.6rem;
-        left: 0.5rem;
+        bottom: -0.6em;
+        left: 0.5em;
         background-color: var(--background);
-        padding-right: 0.5rem;
-        padding-left: 0.5rem;
-        font-size: 0.8rem;
+        padding-right: 0.5em;
+        padding-left: 0.5em;
+        font-size: 0.8em;
         color: var(--alt);
     }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 698a8cc..6ab8bcf 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -176,7 +176,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
 
 <style>
     #content {
-        margin-top: 0.5rem;
+        margin-top: 0.625vw;
         display: flex;
         justify-content: space-between;
     }
@@ -189,15 +189,15 @@ watching Anime or solving Rubik's cubes fast.`.trimStart();
     }
 
     .column {
-        border-width: 1px;
-        border-color: var(--alt);
+        /* border-width: 10px; */
+        /* border-color: var(--alt); */
     }
 
     button {
         background-color: var(--background);
         color: var(--text);
         border: 0;
-        font-size: 1rem;
+        font-size: 1.25vw;
         cursor: pointer;
         width: 20px;
         height: 20px;
diff --git a/src/styles/terminal.css b/src/styles/terminal.css
index 831f75c..d195f4d 100644
--- a/src/styles/terminal.css
+++ b/src/styles/terminal.css
@@ -26,16 +26,6 @@ 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: block;
@@ -47,13 +37,17 @@ main {
   border: 1px;
   border-style: solid;
   background: var(--background);
-  padding: 1.75rem;
-  width: 55rem;
-  height: 28rem;
+  /* padding: 1.75rem; */
+  /* width: 55rem; */
+  /* height: 28rem; */
+  padding: 2.2svw;
+  width: 68.75svw;
+  height: 35svw;
   max-width: 75%;
   max-height: 80%;
   overflow: hidden;
-  font-size: 0.9rem;
+  font-size: 1.125svw;
+  /* font-size: 0.9rem; */
   font-weight: 300;
 }