diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/template.html b/pgml-dashboard/src/components/navigation/navbar/web_app/template.html index 20b3a439a..20c6bf16b 100644 --- a/pgml-dashboard/src/components/navigation/navbar/web_app/template.html +++ b/pgml-dashboard/src/components/navigation/navbar/web_app/template.html @@ -4,7 +4,7 @@ use crate::components::{Dropdown, ProfileIcon}; %> -

diff --git a/pgml-dashboard/static/css/scss/base/_font.scss b/pgml-dashboard/static/css/scss/base/_font.scss index 67df36c92..84db989b8 100644 --- a/pgml-dashboard/static/css/scss/base/_font.scss +++ b/pgml-dashboard/static/css/scss/base/_font.scss @@ -1,5 +1,3 @@ -$font-family-base: 'silka', 'Roboto', 'sans-serif'; - @font-face { font-family: 'silka'; src: url('/dashboard/static/fonts/silka-bold-webfont.eot'); diff --git a/pgml-dashboard/static/css/scss/base/_typography.scss b/pgml-dashboard/static/css/scss/base/_typography.scss index 638d61d62..ff3881838 100644 --- a/pgml-dashboard/static/css/scss/base/_typography.scss +++ b/pgml-dashboard/static/css/scss/base/_typography.scss @@ -1,47 +1,55 @@ // all other displays are default bootstrap styling .display-2 { + font-family: var(--font-family-primary); font-weight: $font-weight-bold; font-size: 4rem; line-height: 80px; } .h1-big { + font-family: var(--font-family-primary); font-weight: $font-weight-bold; font-size: var(--h1-big-font-size); line-height: var(--h1-big-line-height); @include media-breakpoint-down(md) { font-size: 48px; line-height: 52px; } } h1, .h1 { + font-family: var(--font-family-primary); font-weight: $font-weight-bold; font-size: var(--h1-font-size); line-height: var(--h1-line-height); @include media-breakpoint-down(md) { font-size: $h1-font-size; line-height: 48px; } } h2, .h2 { + font-family: var(--font-family-primary); font-weight: $font-weight-bold; font-size: var(--h2-font-size); line-height: var(--h2-line-height); @include media-breakpoint-down(md) { font-size: 40px; line-height: 44px; } } h3, .h3 { + font-family: var(--font-family-primary); font-weight: $font-weight-bold; font-size: var(--h3-font-size); line-height: var(--h3-line-height); @include media-breakpoint-down(md) { font-size: 32px; line-height: 36px; } } h4, .h4 { + font-family: var(--font-family-primary); font-weight: $font-weight-bold; font-size: var(--h4-font-size); line-height: var(--h4-line-height); @include media-breakpoint-down(md) { font-size: 28px; line-height: 32px; } } h5, .h5 { + font-family: var(--font-family-primary); font-weight: $font-weight-bold; font-size: var(--h5-font-size); line-height: var(--h5-line-height); @include media-breakpoint-down(md) { font-size: 24px; line-height: 28px; } } h6, .h6 { + font-family: var(--font-family-primary); font-weight: $font-weight-bold; font-size: var(--h6-font-size); line-height: var(--h6-line-height); @include media-breakpoint-down(md) { font-size: 20px; line-height: 26px; @@ -49,6 +57,7 @@ h6, .h6 { } .eyebrow-text { + font-family: var(--font-family-primary); font-weight: $font-weight-bold; font-size: var(--eyebrow-font-size); line-height: var(--eyebrow-line-height); @include media-breakpoint-down(md) { font-size: 16px; line-height: 22px; @@ -56,20 +65,22 @@ h6, .h6 { } .subcopy-text { - font-family: 'inter', sans-serif; + font-family: var(--font-family-secondary); font-size: 18px; line-height: 22px; } .body-large-text { + font-family: var(--font-family-secondary); font-size: var(--body-large-font-size); line-height: var(--body-large-line-height); @include media-breakpoint-down(md) { font-size: 18px; line-height: 24px; } } -// default body text size -.body-regular-text, p { +// default body text +.body-regular-text, p, body { + font-family: var(--font-family-secondary); font-size: var(--body-regular-font-size); line-height: var(--body-regular-line-height); @include media-breakpoint-down(md) { font-size: 16px; line-height: 20px; @@ -77,6 +88,7 @@ h6, .h6 { } .body-small-text { + font-family: var(--font-family-secondary); font-size: var(--body-small-font-size); line-height: var(--body-small-line-height); @include media-breakpoint-down(md) { font-size: 14px; line-height: 18px; @@ -84,7 +96,7 @@ h6, .h6 { } .legal-text { - font-family: Inter; + font-family: var(--font-family-secondary); font-size: var(--legal-font-size); line-height: var(--legal-line-height); @include media-breakpoint-down(md) { @@ -110,7 +122,6 @@ h6, .h6 { .text-white, .text-white-100 { color: #{$gray-100} !important; } - .text-purple { color: #{$purple} !important; } @@ -140,3 +151,11 @@ h6, .h6 { .text-gradient-party, .party-time { @include text-gradient($gradient-text); } + +.font-family-primary { + font-family: var(--font-family-primary) !important; +} + +.font-family-secondary { + font-family: var(--font-family-secondary) !important; +} diff --git a/pgml-dashboard/static/css/scss/themes/docs.scss b/pgml-dashboard/static/css/scss/themes/docs.scss index 8c31eed3a..56156eaa5 100644 --- a/pgml-dashboard/static/css/scss/themes/docs.scss +++ b/pgml-dashboard/static/css/scss/themes/docs.scss @@ -24,4 +24,7 @@ --body-large-line-height: 26px; --body-regular-line-height: 22px; --body-small-line-height: 20px; + + --font-family-primary: 'silka', 'Roboto', 'sans-serif'; + --font-family-secondary: 'inter', 'sans-serif'; } diff --git a/pgml-dashboard/static/css/scss/themes/marketing.scss b/pgml-dashboard/static/css/scss/themes/marketing.scss index 74bfa028f..fc606e7c6 100644 --- a/pgml-dashboard/static/css/scss/themes/marketing.scss +++ b/pgml-dashboard/static/css/scss/themes/marketing.scss @@ -25,4 +25,7 @@ --body-large-line-height: 26px; --body-regular-line-height: 22px; --body-small-line-height: 20px; + + --font-family-primary: 'silka', 'Roboto', 'sans-serif'; + --font-family-secondary: 'inter', 'sans-serif'; } diff --git a/pgml-dashboard/static/css/scss/themes/product.scss b/pgml-dashboard/static/css/scss/themes/product.scss index 58b048f14..9f6af222f 100644 --- a/pgml-dashboard/static/css/scss/themes/product.scss +++ b/pgml-dashboard/static/css/scss/themes/product.scss @@ -24,4 +24,7 @@ --body-large-line-height: 24px; --body-regular-line-height: 20px; --body-small-line-height: 18px; + + --font-family-primary: 'silka', 'Roboto', 'sans-serif'; + --font-family-secondary: 'inter', 'sans-serif'; } From 7a39ef7b7f3d093e30eb56e1e8909cf2776b4e35 Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Fri, 19 Apr 2024 12:12:13 -0600 Subject: [PATCH 2/2] remove article font family, make all btns silka font --- pgml-dashboard/static/css/scss/base/_base.scss | 2 -- pgml-dashboard/static/css/scss/components/_buttons.scss | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/pgml-dashboard/static/css/scss/base/_base.scss b/pgml-dashboard/static/css/scss/base/_base.scss index e21b64e4a..c6cc402b1 100644 --- a/pgml-dashboard/static/css/scss/base/_base.scss +++ b/pgml-dashboard/static/css/scss/base/_base.scss @@ -66,8 +66,6 @@ html, body, main { } article { - font-family: "Roboto", Helvetica; - p { line-height: 1.6rem; print-color-adjust: exact; diff --git a/pgml-dashboard/static/css/scss/components/_buttons.scss b/pgml-dashboard/static/css/scss/components/_buttons.scss index 3fdc75efb..db6c342f5 100644 --- a/pgml-dashboard/static/css/scss/components/_buttons.scss +++ b/pgml-dashboard/static/css/scss/components/_buttons.scss @@ -1,5 +1,6 @@ .btn { font-weight: $font-weight-semibold; + font-family: var(--font-family-primary); display: flex; justify-content: center;