remove 'rem', make styles more scalable

1 files changed, 21 insertions, 21 deletions

diff --git a/src/scss/common.scss b/src/scss/common.scss
index 4c3bd77..7b3b5a2 100644
--- a/src/scss/common.scss
+++ b/src/scss/common.scss
@@ -84,7 +84,7 @@ header#header {
       color: $blue;
       font-size: 2.25em;
       height: 100%;
-      line-height: 2rem;
+      line-height: 2em;
       margin-top: $inner-gap;
     }
   }
@@ -132,7 +132,7 @@ header#header {
   header#header {
     .center {
       .btn {
-        padding: 0 3rem;
+        padding: 0 3em;
         height: 100%;
 
         > span {
@@ -170,7 +170,7 @@ header#header {
       .btn {
         width: 100%;
         padding: $inner-gap 0;
-        padding-left: 3rem;
+        padding-left: 3em;
         justify-content: flex-start;
 
         > span {
@@ -292,7 +292,7 @@ input.btn {
   }
 
   &.pfp {
-    height: 2.5em;
+    height: $pfp-width;
     aspect-ratio: 1;
     border-radius: 100%;
   }
@@ -356,35 +356,35 @@ object.inner {
 }
 
 .ml {
-  margin-left: 1rem;
+  margin-left: 1em;
 }
 
 .mr {
-  margin-right: 1rem;
+  margin-right: 1em;
 }
 
 .mt {
-  margin-top: 1rem;
+  margin-top: 1em;
 }
 
 .mb {
-  margin-bottom: .75rem;
+  margin-bottom: .75em;
 }
 
 .pl {
-  padding-left: 1rem;
+  padding-left: 1em;
 }
 
 .pr {
-  padding-right: 1rem;
+  padding-right: 1em;
 }
 
 .pt {
-  padding-top: 1rem;
+  padding-top: 1em;
 }
 
 .pb {
-  padding-bottom: 1rem;
+  padding-bottom: 1em;
 }
 
 .modal-container {
@@ -432,13 +432,13 @@ object.inner {
 
     .modal-content {
       flex-grow: 1;
-      padding: 1rem;
+      padding: $outer-gap;
     }
 
     .modal-footer {
       margin-top: auto;
-      padding: 0 1rem;
-      padding-bottom: 1rem;
+      padding: 0 $outer-gap;
+      padding-bottom: $outer-gap;
       display: flex;
       flex-direction: row;
       justify-content: flex-end;
@@ -562,12 +562,12 @@ form {
       padding-left: $inner-gap / 2;
       position: absolute;
       top: 50%;
-      transform: translate(.5rem, -40%);
+      transform: translate(.5em, -40%);
       color: $subtext;
       transition: all 0.2s ease-out;
       pointer-events: none;
       width: fit-content;
-      font-size: 1.1rem;
+      font-size: 1.1em;
     }
 
     input {
@@ -581,10 +581,10 @@ form {
           top: 50%;
           color: $text;
           top: 0;
-          padding: .5rem;
+          padding: .5em;
           padding-top: 0;
-          font-size: .75rem;
-          transform: translate(.5rem, -25%);
+          font-size: .75em;
+          transform: translate(.5em, -25%);
           background-color: $surface0;
         }
       }
@@ -623,7 +623,7 @@ form {
   .logo {
     color: $blue;
     font-family: $header-font;
-    font-size: 2.25rem;
+    font-size: 2.25em;
     margin-bottom: $inner-gap;
   }
 }