From d6f351aabeec302035c3c0c4f2c8ef5550d56451 Mon Sep 17 00:00:00 2001 From: Fire Demon Date: Fri, 14 Aug 2020 15:26:10 -0500 Subject: [UI] Make it possible for display fonts to be changed --- .../flavours/glitch/styles/components/modal.scss | 2 +- app/javascript/flavours/glitch/styles/index.scss | 2 +- .../flavours/glitch/styles/variables.scss | 6 ++--- app/javascript/styles/fonts/montserrat.scss | 4 +-- app/javascript/styles/fonts/opensans.scss | 30 +++++++++++----------- app/javascript/styles/fonts/roboto-mono.scss | 2 +- app/javascript/styles/fonts/roboto.scss | 8 +++--- app/javascript/styles/mailer.scss | 1 + app/javascript/styles/mastodon/variables.scss | 6 ++--- 9 files changed, 31 insertions(+), 30 deletions(-) (limited to 'app') diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index d0be730ac..f80045505 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -847,7 +847,7 @@ width: 100%; border: none; padding: 10px; - font-family: 'mastodon-font-monospace', monospace; + font-family: 'roboto-mono', monospace; background: $ui-base-color; color: $primary-text-color; font-size: 14px; diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index 6e87d7656..c1ed4a6f1 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -1,6 +1,6 @@ @import 'mixins'; @import 'variables'; -//@import 'styles/fonts/roboto'; +@import 'styles/fonts/roboto'; @import 'styles/fonts/opensans'; @import 'styles/fonts/roboto-mono'; @import 'styles/fonts/montserrat'; diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 1ed1a5778..8d1d394f5 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -51,9 +51,9 @@ $media-modal-media-max-height: 80%; $no-gap-breakpoint: 415px; -$font-sans-serif: 'mastodon-font-sans-serif' !default; -$font-display: 'mastodon-font-display' !default; -$font-monospace: 'mastodon-font-monospace' !default; +$font-sans-serif: 'opensans' !default; +$font-display: 'montserrat' !default; +$font-monospace: 'roboto-mono' !default; // Avatar border size (8% default, 100% for rounded avatars) $ui-avatar-border-size: 8%; diff --git a/app/javascript/styles/fonts/montserrat.scss b/app/javascript/styles/fonts/montserrat.scss index 80c2329b0..103dee529 100644 --- a/app/javascript/styles/fonts/montserrat.scss +++ b/app/javascript/styles/fonts/montserrat.scss @@ -1,5 +1,5 @@ @font-face { - font-family: 'mastodon-font-display'; + font-family: 'montserrat'; src: local('Montserrat'), url('~fonts/montserrat/Montserrat-Regular.woff2') format('woff2'), url('~fonts/montserrat/Montserrat-Regular.woff') format('woff'), @@ -9,7 +9,7 @@ } @font-face { - font-family: 'mastodon-font-display'; + font-family: 'montserrat'; src: local('Montserrat Medium'), url('~fonts/montserrat/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; diff --git a/app/javascript/styles/fonts/opensans.scss b/app/javascript/styles/fonts/opensans.scss index a8d931eb6..6da41e30a 100644 --- a/app/javascript/styles/fonts/opensans.scss +++ b/app/javascript/styles/fonts/opensans.scss @@ -1,5 +1,5 @@ @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans ExtraBold'), url('~fonts/opensans/OpenSans-ExtraBold.woff2') format('woff2'), url('~fonts/opensans/OpenSans-ExtraBold.ttf') format('truetype'); @@ -8,7 +8,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Bold'), url('~fonts/opensans/OpenSans-Bold.woff2') format('woff2'), url('~fonts/opensans/OpenSans-Bold.ttf') format('truetype'); @@ -17,7 +17,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Bold Italic'), url('~fonts/opensans/OpenSans-BoldItalic.woff2') format('woff2'), url('~fonts/opensans/OpenSans-BoldItalic.ttf') format('truetype'); @@ -26,7 +26,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans SemiBold'), url('~fonts/opensans/OpenSans-SemiBold.woff2') format('woff2'), url('~fonts/opensans/OpenSans-SemiBold.ttf') format('truetype'); @@ -35,7 +35,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans SemiBold Italic'), url('~fonts/opensans/OpenSans-SemiBoldItalic.woff2') format('woff2'), url('~fonts/opensans/OpenSans-SemiBoldItalic.ttf') format('truetype'); @@ -44,7 +44,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Regular'), url('~fonts/opensans/OpenSans-Regular.woff2') format('woff2'), url('~fonts/opensans/OpenSans-Regular.ttf') format('truetype'); @@ -53,7 +53,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Italic'), url('~fonts/opensans/OpenSans-Italic.woff2') format('woff2'), url('~fonts/opensans/OpenSans-Italic.ttf') format('truetype'); @@ -62,7 +62,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Regular'), url('~fonts/opensans/OpenSans-Regular.woff2') format('woff2'), url('~fonts/opensans/OpenSans-Regular.ttf') format('truetype'); @@ -71,7 +71,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Italic'), url('~fonts/opensans/OpenSans-Italic.woff2') format('woff2'), url('~fonts/opensans/OpenSans-Italic.ttf') format('truetype'); @@ -80,7 +80,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Light'), url('~fonts/opensans/OpenSans-Light.woff2') format('woff2'), url('~fonts/opensans/OpenSans-Light.ttf') format('truetype'); @@ -89,7 +89,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Light Italic'), url('~fonts/opensans/OpenSans-LightItalic.woff2') format('woff2'), url('~fonts/opensans/OpenSans-LightItalic.ttf') format('truetype'); @@ -98,7 +98,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Light'), url('~fonts/opensans/OpenSans-Light.woff2') format('woff2'), url('~fonts/opensans/OpenSans-Light.ttf') format('truetype'); @@ -107,7 +107,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Light Italic'), url('~fonts/opensans/OpenSans-LightItalic.woff2') format('woff2'), url('~fonts/opensans/OpenSans-LightItalic.ttf') format('truetype'); @@ -116,7 +116,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Light'), url('~fonts/opensans/OpenSans-Light.woff2') format('woff2'), url('~fonts/opensans/OpenSans-Light.ttf') format('truetype'); @@ -125,7 +125,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'opensans'; src: local('Open Sans Light Italic'), url('~fonts/opensans/OpenSans-LightItalic.woff2') format('woff2'), url('~fonts/opensans/OpenSans-LightItalic.ttf') format('truetype'); diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss index c793aa6ed..b689c87fe 100644 --- a/app/javascript/styles/fonts/roboto-mono.scss +++ b/app/javascript/styles/fonts/roboto-mono.scss @@ -1,5 +1,5 @@ @font-face { - font-family: 'mastodon-font-monospace'; + font-family: 'roboto-mono'; src: local('Roboto Mono'), url('~fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'), url('~fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'), diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.scss index b75fdb927..a34cc693c 100644 --- a/app/javascript/styles/fonts/roboto.scss +++ b/app/javascript/styles/fonts/roboto.scss @@ -1,5 +1,5 @@ @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'roboto'; src: local('Roboto Italic'), url('~fonts/roboto/roboto-italic-webfont.woff2') format('woff2'), url('~fonts/roboto/roboto-italic-webfont.woff') format('woff'), @@ -10,7 +10,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'roboto'; src: local('Roboto Bold'), url('~fonts/roboto/roboto-bold-webfont.woff2') format('woff2'), url('~fonts/roboto/roboto-bold-webfont.woff') format('woff'), @@ -21,7 +21,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'roboto'; src: local('Roboto Medium'), url('~fonts/roboto/roboto-medium-webfont.woff2') format('woff2'), url('~fonts/roboto/roboto-medium-webfont.woff') format('woff'), @@ -32,7 +32,7 @@ } @font-face { - font-family: 'mastodon-font-sans-serif'; + font-family: 'roboto'; src: local('Roboto'), url('~fonts/roboto/roboto-regular-webfont.woff2') format('woff2'), url('~fonts/roboto/roboto-regular-webfont.woff') format('woff'), diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index 4d8b0ad03..3b3ca000d 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -1,5 +1,6 @@ @import 'mastodon/variables'; @import 'fonts/opensans'; +@import 'fonts/roboto'; @import 'fonts/roboto-mono'; table, diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index 8602c3dde..1b2499aa6 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -51,6 +51,6 @@ $media-modal-media-max-height: 80%; $no-gap-breakpoint: 415px; -$font-sans-serif: 'mastodon-font-sans-serif' !default; -$font-display: 'mastodon-font-display' !default; -$font-monospace: 'mastodon-font-monospace' !default; +$font-sans-serif: 'roboto' !default; +$font-display: 'montserrat' !default; +$font-monospace: 'roboto-mono' !default; -- cgit