Add sans-serif font fallback (#2263)

* Add sans-serif font fallback

* Update frontend readme start scripts
This commit is contained in:
Benjamin B
2023-05-06 07:01:13 +10:00
committed by Aiden McClelland
parent ee13cf7dd9
commit 273b5768c4
8 changed files with 22 additions and 22 deletions

View File

@@ -52,8 +52,8 @@ Valid values for "maskAs" are `tor` and `lan`.
```sh ```sh
npm run start:ui npm run start:ui
npm run start:install-wiz npm run start:install-wiz
npm run start:setup-wizard npm run start:setup
npm run start:diagnostic-ui npm run start:dui
``` ```
## Running locally with proxied backend ## Running locally with proxied backend

View File

@@ -7,7 +7,7 @@
/** Ionic CSS Variables overrides **/ /** Ionic CSS Variables overrides **/
:root { :root {
--ion-font-family: 'Montserrat'; --ion-font-family: 'Montserrat', sans-serif;
--ion-color-primary: #0075e1; --ion-color-primary: #0075e1;

View File

@@ -1,6 +1,6 @@
/** Ionic CSS Variables overrides **/ /** Ionic CSS Variables overrides **/
:root { :root {
--ion-font-family: 'Benton Sans'; --ion-font-family: 'Benton Sans', sans-serif;
} }
ion-content { ion-content {
@@ -25,4 +25,4 @@ ion-card-title {
font-family: 'Montserrat'; font-family: 'Montserrat';
font-size: x-large; font-size: x-large;
--color: var(--ion-color-light); --color: var(--ion-color-light);
} }

View File

@@ -7,7 +7,7 @@
/** Ionic CSS Variables overrides **/ /** Ionic CSS Variables overrides **/
:root { :root {
--ion-font-family: 'Montserrat'; --ion-font-family: 'Montserrat', sans-serif;
--ion-color-primary: #0075e1; --ion-color-primary: #0075e1;

View File

@@ -6,7 +6,7 @@
<body> <body>
<div <div
style=" style="
font-family: Montserrat; font-family: Montserrat, sans-serif;
color: #333333; color: #333333;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@@ -84,7 +84,7 @@
/** Ionic CSS Variables overrides **/ /** Ionic CSS Variables overrides **/
:root { :root {
--ion-font-family: 'Montserrat'; --ion-font-family: 'Montserrat', sans-serif;
--ion-background-color: #333333; --ion-background-color: #333333;
--ion-background-color-rgb: 51, 51, 51; --ion-background-color-rgb: 51, 51, 51;
@@ -114,7 +114,7 @@
--ion-color-dark: var(--ion-color-step-50) !important; --ion-color-dark: var(--ion-color-step-50) !important;
// --ion-color-base-rgb: // --ion-color-base-rgb:
--ion-color-dark-contrast: var(--ion-color-step-950) !important; --ion-color-dark-contrast: var(--ion-color-step-950) !important;
// --ion-color-dark-contrast-rgb: // --ion-color-dark-contrast-rgb:
--ion-color-dark-shade: var(--ion-color-step-100) !important; --ion-color-dark-shade: var(--ion-color-step-100) !important;
@@ -144,7 +144,7 @@ h1 {
ion-card-title { ion-card-title {
margin: 16px 0; margin: 16px 0;
font-family: 'Montserrat'; font-family: 'Montserrat', sans-serif;
font-size: x-large; font-size: x-large;
--color: var(--ion-color-light); --color: var(--ion-color-light);
} }
@@ -165,7 +165,7 @@ ion-label ion-text {
p { p {
color: var(--ion-color-dark-contrast) !important; color: var(--ion-color-dark-contrast) !important;
font-size: 1.12rem !important; font-size: 1.12rem !important;
font-family: 'Open Sans'; font-family: 'Open Sans', sans-serif;
font-weight: normal; font-weight: normal;
} }
@@ -313,7 +313,7 @@ ion-header {
ion-toolbar { ion-toolbar {
--border-color: var(--ion-color-step-950); --border-color: var(--ion-color-step-950);
--border-width: 0 0 1px 0; --border-width: 0 0 1px 0;
--min-height: 80px; --min-height: 80px;
--padding-top: 20px; --padding-top: 20px;
--padding-bottom: 20px; --padding-bottom: 20px;
@@ -348,4 +348,4 @@ p a {
// text-decoration: none; // text-decoration: none;
font-weight: 600; font-weight: 600;
text-underline-offset: 0.4rem; text-underline-offset: 0.4rem;
} }

View File

@@ -14,9 +14,9 @@ ion-card {
transform: scale(1.05); transform: scale(1.05);
transition-delay: 40ms; transition-delay: 40ms;
} }
ion-card-title { ion-card-title {
font-family: 'Open Sans'; font-family: 'Open Sans', sans-serif;
padding: 0.6rem; padding: 0.6rem;
font-weight: 600; font-weight: 600;
font-size: calc(12px + 0.5vw); font-size: calc(12px + 0.5vw);
@@ -29,16 +29,16 @@ ion-card {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
ion-icon { ion-icon {
font-size: calc(90px + 0.5vw); font-size: calc(90px + 0.5vw);
--ionicon-stroke-width: 1rem; --ionicon-stroke-width: 1rem;
} }
} }
ion-footer { ion-footer {
padding: 1rem; padding: 1rem;
font-family: 'Open Sans'; font-family: 'Open Sans', sans-serif;
font-size: clamp(1rem, calc(12px + 0.5vw), 1.3rem); font-size: clamp(1rem, calc(12px + 0.5vw), 1.3rem);
height: 9rem; height: 9rem;
width: clamp(13rem, 80%, 18rem); width: clamp(13rem, 80%, 18rem);
@@ -66,4 +66,4 @@ ion-card {
ion-footer { ion-footer {
width: 14rem; width: 14rem;
} }
} }

View File

@@ -75,7 +75,7 @@
/** Ionic CSS Variables overrides **/ /** Ionic CSS Variables overrides **/
:root { :root {
--ion-font-family: 'Open Sans'; --ion-font-family: 'Open Sans', sans-serif;
--ion-background-color: var(--ion-color-medium); --ion-background-color: var(--ion-color-medium);
--ion-background-color-rgb: var(--ion-color-medium-rgb); --ion-background-color-rgb: var(--ion-color-medium-rgb);
--ion-text-color: var(--ion-color-dark); --ion-text-color: var(--ion-color-dark);
@@ -191,11 +191,11 @@ ion-back-button {
} }
ion-card-title { ion-card-title {
font-family: 'Montserrat'; font-family: 'Montserrat', sans-serif;
} }
ion-title { ion-title {
font-family: 'Montserrat'; font-family: 'Montserrat', sans-serif;
} }
ion-badge { ion-badge {