From 683399c340b90a3ecfca80c608b335b179ae8a1e Mon Sep 17 00:00:00 2001
From: t1enne <nasir.taov@gmail.com>
Date: Wed, 14 Sep 2022 08:37:45 +0200
Subject: [PATCH] Removed fixed *px sizes in favor or *rem

---
 .../ContentHeader/ContentHeader.module.scss      | 16 ++++++++--------
 .../CustomPageContent.module.scss                |  2 +-
 .../NotifyReminderPopup.module.scss              |  4 ++--
 web/styles/chat.scss                             |  2 +-
 web/styles/globals.scss                          |  5 ++++-
 web/styles/home.scss                             |  2 +-
 6 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/web/components/common/ContentHeader/ContentHeader.module.scss b/web/components/common/ContentHeader/ContentHeader.module.scss
index 860e09fc3..d9574a990 100644
--- a/web/components/common/ContentHeader/ContentHeader.module.scss
+++ b/web/components/common/ContentHeader/ContentHeader.module.scss
@@ -1,7 +1,7 @@
 .root {
   position: relative;
   display: grid;
-  padding: 20px;
+  padding: 1.4rem;
 }
 
 .row {
@@ -15,8 +15,8 @@
     .logo {
       margin-left: auto;
       margin-right: auto;
-      margin-bottom: 10px;
-      margin-top: 10px;
+      margin-bottom: 0.6rem;
+      margin-top: 0.6rem;
     }
   }
 }
@@ -24,18 +24,18 @@
 .titleSection {
   display: flex;
   flex-direction: column;
-  margin-left: 10px;
+  margin-left: 0.6rem;
 
   .title {
     font-family: var(--theme-text-display-font-family);
     color: var(--theme-color-palette-0);
-    font-size: 32px;
+    font-size: 2rem;
     font-weight: bold;
     line-height: 30px;
   }
 
   .subtitle {
-    font-size: 22px;
+    font-size: 1.5rem;
     font-weight: 300;
     line-height: 1.3;
     color: var(--theme-color-background-header);
@@ -48,8 +48,8 @@
 
   span {
     display: inline-block;
-    margin-right: 8px;
-    font-size: 14px;
+    margin-right: 0.5rem;
+    font-size: 0.9rem;
     font-weight: 500;
   }
 }
diff --git a/web/components/ui/CustomPageContent/CustomPageContent.module.scss b/web/components/ui/CustomPageContent/CustomPageContent.module.scss
index b4ec28bb5..555f24ecf 100644
--- a/web/components/ui/CustomPageContent/CustomPageContent.module.scss
+++ b/web/components/ui/CustomPageContent/CustomPageContent.module.scss
@@ -27,7 +27,7 @@
   }
 
   div.summary {
-    font-size: 18px;
+    font-size: 1.1rem;
   }
 
   p {
diff --git a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
index 766a1f7e8..cf24bcfbb 100644
--- a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
+++ b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
@@ -11,7 +11,7 @@
   top: 10px;
   background-color: transparent;
   border: none;
-  font-size: 20px;
+  font-size: 1.3rem;
   cursor: pointer;
 }
 
@@ -19,4 +19,4 @@
   border-bottom: none;
   font-weight: bold;
   padding-left: 5px;
-}
\ No newline at end of file
+}
diff --git a/web/styles/chat.scss b/web/styles/chat.scss
index 307e4931d..3b07f005c 100644
--- a/web/styles/chat.scss
+++ b/web/styles/chat.scss
@@ -8,7 +8,7 @@
     }
     &.toggle-col {
       label {
-        font-size: 11px;
+        font-size: 0.7rem;
       }
     }
 
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index c42464009..ffa7c90d9 100644
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@@ -14,9 +14,12 @@
   background-color: var(--theme-color-palette-12);
 }
 
+html {
+  font-size: clamp(14px, 1.35vw, 16px);
+}
+
 body {
   font-family: var(--theme-text-body-font-family);
-  font-size: 16px;
   line-height: 1.5em;
   margin: 0;
 
diff --git a/web/styles/home.scss b/web/styles/home.scss
index 6e5d35a7f..0bc2b6beb 100644
--- a/web/styles/home.scss
+++ b/web/styles/home.scss
@@ -99,7 +99,7 @@
   }
   article {
     padding: 1em 0.25em;
-    font-size: 14px;
+    font-size: 0.9rem;
     color: var(--white-75);
     border-bottom: 1px solid var(--gray);