frontend: trying responsive font size

thisconnect · thisconnect · commit aaa64ff3a670 · 2024-05-05T13:10:51.000+02:00
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.
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/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css b/frontends/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;
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@`
`53`	`53`
`54`	`54`	`.header a {`
`55`	`55`	`cursor: pointer;`
`56`		`- font-size: 20px;`
	`56`	`+ font-size: 2rem;`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`.content {`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`.text {`
`36`		`- font-size: 16px;`
	`36`	`+ font-size: 1.6rem;`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`@media (max-width: 768px) {`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`animation: changeContent .8s linear infinite;`
`14`	`14`	`display: block;`
`15`	`15`	`content: "⠋";`
`16`		`- font-size: 14px;`
	`16`	`+ font-size: 1.4rem;`
`17`	`17`	`margin-left: 3px;`
`18`	`18`	`}`
`19`	`19`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.accountName {`
`2`		`- font-size: 16px;`
	`2`	`+ font-size: 1.6rem;`
`3`	`3`	`margin: 0 var(--space-half) 0 0;`
`4`	`4`	`}`
`5`	`5`
`@@ -9,7 +9,7 @@`
`9`	`9`
`10`	`10`	`.address {`
`11`	`11`	`color: var(--color-secondary);`
`12`		`- font-size: 16px;`
	`12`	`+ font-size: 1.6rem;`
`13`	`13`	`margin: 0;`
`14`	`14`	`}`
`15`	`15`
`@@ -55,7 +55,7 @@`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`.itemText {`
`58`		`- font-size: 16px;`
	`58`	`+ font-size: 1.6rem;`
`59`	`59`	`margin: 0;`
`60`	`60`	`}`
`61`	`61`
Original file line number	Diff line number	Diff line change
`@@ -26,11 +26,11 @@`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`.accountName {`
`29`		`- font-size: 20px;`
	`29`	`+ font-size: 2rem;`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`.receiveAddress {`
`33`		`- font-size: 16px;`
	`33`	`+ font-size: 1.6rem;`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`@media (max-width: 768px) {`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`
`9`	`9`	`.container p {`
`10`	`10`	`color: var(--color-default);`
`11`		`- font-size: 16px;`
	`11`	`+ font-size: 1.6rem;`
`12`	`12`	`line-height: 1.9;`
`13`	`13`	`margin-bottom: 0;`
`14`	`14`	`}`