From 7bc99f8a3ce1eed99b9ee6bbb3efcaefa156f4fb Mon Sep 17 00:00:00 2001
From: Freya Murphy <freya@freyacat.org>
Date: Mon, 23 Dec 2024 22:53:42 -0500
Subject: remove 'rem', make styles more scalable

---
 src/scss/profile.scss | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

(limited to 'src/scss/profile.scss')

diff --git a/src/scss/profile.scss b/src/scss/profile.scss
index 3f1414d..1e89e03 100644
--- a/src/scss/profile.scss
+++ b/src/scss/profile.scss
@@ -5,7 +5,10 @@ main#main {
   padding-top: 0;
 }
 
-$pfp-size: 12.5em;
+$profile-width: $content-width * 2;
+$profile-pfp-width: $pfp-width * 5;
+
+$profile-header-content-margin: $profile-pfp-width + $outer-gap * 5;
 
 #profile-header-container {
   width: 100%;
@@ -18,13 +21,13 @@ $pfp-size: 12.5em;
 
 #profile-header {
   min-width: 0;
-  max-width: 80rem;
+  max-width: $profile-width;
   flex-grow: 1;
 
   .banner {
     width: 100%;
     max-width: 100%;
-    min-height: 30em;
+    min-height: $profile-width * 3/8;
     aspect-ratio: 5;
 
     img {
@@ -34,7 +37,7 @@ $pfp-size: 12.5em;
 
   .info {
     position: relative;
-    margin-bottom: 6em;
+    margin-bottom: $profile-pfp-width / 2;
 
     .pfp-wrapper {
       padding: $inner-gap / 2;
@@ -42,28 +45,28 @@ $pfp-size: 12.5em;
       height: fit-content;
       border-radius: 100%;
       position: absolute;
-      top: -2.5rem;
+      top: -$pfp-width;
       left: $inner-gap;
 
       .pfp {
-        height: $pfp-size;
+        height: $profile-pfp-width;
       }
     }
 
     .content {
-      margin-left: $pfp-size + 5em;
-      margin-top: 2em;
+      margin-left: $profile-header-content-margin;
+      margin-top: $outer-gap * 2;
 
       .name {
-        font-size: 2em;;
+        font-size: $font-size * 2;
       }
 
       .follow {
         margin-left: auto;
-        margin-right: 2rem;
+        margin-right: $outer-gap * 2;
 
         a {
-          width: 10rem;
+          width: 10em;
           padding: $inner-gap / 2;
         }
       }
@@ -77,10 +80,10 @@ $pfp-size: 12.5em;
   }
 
   .options {
-    height: 3rem;
+    height: 3em;
 
     .btn {
-      width: 10rem;
+      width: 10em;
     }
   }
 }
@@ -90,12 +93,12 @@ $pfp-size: 12.5em;
     .info {
       .pfp-wrapper {
         .pfp {
-          height: $pfp-size * 0.7;
+          height: $profile-pfp-width * 0.7;
         }
       }
 
       .content {
-        margin-left: ($pfp-size + 5em) * 0.7;
+        margin-left: $profile-header-content-margin * 0.7;
       }
     }
   }
@@ -118,7 +121,7 @@ $pfp-size: 12.5em;
 
 #tab-about {
   td:nth-child(1) {
-    padding-right: 2rem;
+    padding-right: $inner-gap * 2;
   }
 }
 
-- 
cgit v1.2.3-freya