frontend: trying responsive font size

This is a test to see if we can use responsive font size. This also sets the base font size so that 1rem is 10px (unless text zoom). With this technique elements can have responive dimension so that sizes using rem are also zoomed if the text font size is bigger.
BitBoxSwiss · May 5, 2024 · aaa64ff · aaa64ff
1 parent 291f9f9
commit aaa64ff
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 50 deletions.
diff --git a/frontends/web/src/components/forms/button.module.css b/frontends/web/src/components/forms/button.module.css
@@ -13,7 +13,7 @@
     font-weight: 400;
     justify-content: center;
     min-width: 100px;
-    height: 50px;
+    height: 5rem;
     outline: none;
     padding: 0 var(--space-default);
     position: relative;

diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
@@ -53,7 +53,7 @@
 
 .header a {
     cursor: pointer;
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .content {

diff --git a/frontends/web/src/components/keystoreconnectprompt.module.css b/frontends/web/src/components/keystoreconnectprompt.module.css
@@ -33,7 +33,7 @@
 }
 
 .text {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 @media (max-width: 768px) {

diff --git a/frontends/web/src/components/spinner/ascii.module.css b/frontends/web/src/components/spinner/ascii.module.css
@@ -13,7 +13,7 @@
   animation: changeContent .8s linear infinite;
   display: block;
   content: "⠋";
-  font-size: 14px;
+  font-size: 1.4rem;
   margin-left: 3px;
 }
 

diff --git a/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css b/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css
@@ -1,5 +1,5 @@
 .accountName {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0 var(--space-half) 0 0;
 }
 
@@ -9,7 +9,7 @@
 
 .address {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 
@@ -55,7 +55,7 @@
 }
 
 .itemText {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 

diff --git a/frontends/web/src/routes/account/add/components/steps.module.css b/frontends/web/src/routes/account/add/components/steps.module.css
@@ -48,7 +48,7 @@
     content: "";
     display: inline-block;
     flex-shrink: 0;
-    font-size: 14px;
+    font-size: 1.4rem;
     height: var(--icon-size);
     line-height: var(--icon-size);
     position: relative;

diff --git a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
@@ -26,11 +26,11 @@
 }
 
 .accountName {
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .receiveAddress {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 @media (max-width: 768px) {

diff --git a/...ends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css b/...ends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css
@@ -8,7 +8,7 @@
 
 .container p {
     color: var(--color-default);
-    font-size: 16px;
+    font-size: 1.6rem;
     line-height: 1.9;
     margin-bottom: 0;
 }

diff --git a/frontends/web/src/routes/account/walletconnect/dashboard.module.css b/frontends/web/src/routes/account/walletconnect/dashboard.module.css
@@ -16,12 +16,12 @@
 .headerContainer p.receiveAddress { 
     color: var(--color-secondary);
     margin-top: var(--space-quarter);
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 .noConnectedSessions {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-large);
     text-align: center;
@@ -41,7 +41,7 @@
 
 .allSessionsHeading {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-half);
 }
@@ -54,7 +54,7 @@
     }
 
     .headerContainer p {
-        font-size: 16px;
+        font-size: 1.6rem;
     }
 
     .headerContainer p.receiveAddress,

diff --git a/frontends/web/src/routes/buy/components/countryselect.module.css b/frontends/web/src/routes/buy/components/countryselect.module.css
@@ -8,7 +8,7 @@
 }
 
 .flag {
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .globe {

diff --git a/frontends/web/src/routes/settings/manage-accounts.module.css b/frontends/web/src/routes/settings/manage-accounts.module.css
@@ -21,7 +21,7 @@
 }
 
 .walletTitle {
-    font-size: 20px;
+    font-size: 2rem;
     font-weight: 400;
     margin: 0 0 var(--space-quarter) 0;
 }

diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
@@ -1,7 +1,3 @@
-html {
-    text-size-adjust: 100%;
-}
-
 html,
 body {
     background-color: var(--background);
@@ -19,6 +15,15 @@ body {
 	  -webkit-app-region: drag;
 }
 
+html {
+    font-size: 62.5%;
+    text-size-adjust: 100%;
+}
+
+body {
+    font-size: 1.6rem;
+}
+
 /*
 ::selection:not(textarea):not(input) {
     background-color: transparent;

diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
@@ -40,50 +40,50 @@
     --size-extra-large: 2.2rem;
     --size-large: 2rem;
     --size-large-mobile: 1.4rem;
-    --size-subheader: 18px;
+    --size-subheader: 1.8rem;
     --size-medium: var(--size-default);
-    --size-default: 14px;
-    --size-small: 12px;
-    --size-xsmall: 11px;
+    --size-default: 1.4rem;
+    --size-small: 1.2rem;
+    --size-xsmall: 1.1rem;
     --size-label: var(--size-small);
     --size-button: var(--size-default);
-    --size-title: 32px;
+    --size-title: 3.2rem;
 
     /* wizard */
-    --size-wizard-text: 16px;
+    --size-wizard-text: 1.6rem;
 
     /* spacing */
     --spacing-large: 2rem;
     --spacing-default: 1rem;
     --spacing-half: .5rem;
 
-    --space-large: 64px;
-    --space-default: 32px;
-    --space-half: 16px;
-    --space-quarter: 8px;
-    --space-eight: 4px;
+    --space-large: 6.4rem;
+    --space-default: 3.2rem;
+    --space-half: 1.6rem;
+    --space-quarter: .8rem;
+    --space-eight: .4rem;
 
-    --item-height-xsmall: 24px;
-    --item-height-small: 36px;
-    --item-height: 52px;
-    --item-height-large: 72px;
-    --item-height-xlarge: 84px;
+    --item-height-xsmall: 2.4rem;
+    --item-height-small: 3.6rem;
+    --item-height: 5.2rem;
+    --item-height-large: 7.2rem;
+    --item-height-xlarge: 8.4rem;
 
     /* typography */
     --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Roboto", "Oxygen", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 
     /* sidebar */
     --sidebar-width-large: 250px;
-    --sidebar-margin: 32px;
-    --sidebar-item-height: 52px;
-    --sidebar-icon-margin: 14px;
-    --sidebar-icon-size: 24px;
-    --sidebar-header-size: 12px;
-    --sidebar-header-line-height: 16px;
+    --sidebar-margin: 3.2rem;
+    --sidebar-item-height: 5.2rem;
+    --sidebar-icon-margin: 1.4rem;
+    --sidebar-icon-size: 2.4rem;
+    --sidebar-header-size: 1.2rem;
+    --sidebar-header-line-height: 1.6rem;
 
     /* header */
-    --header-height: 70px;
-    --header-default-font-size: 24px;
+    --header-height: 7rem;
+    --header-default-font-size: 2.4rem;
 
     /* content */
     --content-width: 1080px;
@@ -182,16 +182,16 @@
 
 @media (max-width: 1199px) {
     :root {
-        --size-title: 18px;
+        --size-title: 1.8rem;
     }
 }
 
 @media (max-width: 768px) {
     :root {
-        --header-default-font-size: 20px;
-        --size-subheader: 16px;
-        --size-title: 16px;
+        --header-default-font-size: 2rem;
+        --size-subheader: 1.6rem;
+        --size-title: 1.6rem;
 
-        --size-wizard-text: 14px;
+        --size-wizard-text: 1.4rem;
     }
 }