From 36d426cec90741df0b8eb449695d16661a60aa7b Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 1 Oct 2018 13:13:58 +0200 Subject: [PATCH] [Glitch] Separate font-family into variable Port d0d65b5a2899546c4134d1fca60aef2c23c4932d to glitch-soc --- .../flavours/glitch/styles/about.scss | 46 +++++++++---------- .../flavours/glitch/styles/admin.scss | 2 +- .../flavours/glitch/styles/basics.scss | 6 +-- .../flavours/glitch/styles/containers.scss | 4 +- .../flavours/glitch/styles/dashboard.scss | 2 +- .../flavours/glitch/styles/forms.scss | 8 ++-- .../flavours/glitch/styles/tables.scss | 2 +- .../flavours/glitch/styles/variables.scss | 4 ++ 8 files changed, 39 insertions(+), 35 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index ba46c65c57e..f676a8c776f 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -16,7 +16,7 @@ $small-breakpoint: 960px; } .rich-formatting { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; font-weight: 400; font-size: 16px; @@ -31,7 +31,7 @@ $small-breakpoint: 960px; p, li { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; font-weight: 400; font-size: 16px; @@ -62,7 +62,7 @@ $small-breakpoint: 960px; } h1 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 26px; line-height: 30px; font-weight: 500; @@ -70,7 +70,7 @@ $small-breakpoint: 960px; color: $secondary-text-color; small { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; display: block; font-size: 18px; font-weight: 400; @@ -79,7 +79,7 @@ $small-breakpoint: 960px; } h2 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 22px; line-height: 26px; font-weight: 500; @@ -88,7 +88,7 @@ $small-breakpoint: 960px; } h3 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 18px; line-height: 24px; font-weight: 500; @@ -97,7 +97,7 @@ $small-breakpoint: 960px; } h4 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 16px; line-height: 24px; font-weight: 500; @@ -106,7 +106,7 @@ $small-breakpoint: 960px; } h5 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 14px; line-height: 24px; font-weight: 500; @@ -115,7 +115,7 @@ $small-breakpoint: 960px; } h6 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 12px; line-height: 24px; font-weight: 500; @@ -180,7 +180,7 @@ $small-breakpoint: 960px; &__section { flex: 1 0 0; - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; line-height: 28px; color: $primary-text-color; @@ -221,7 +221,7 @@ $small-breakpoint: 960px; bottom: -40px; .panel-header { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 14px; line-height: 24px; font-weight: 500; @@ -452,7 +452,7 @@ $small-breakpoint: 960px; p, li { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; font-weight: 400; font-size: 16px; @@ -501,7 +501,7 @@ $small-breakpoint: 960px; } h1 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 26px; line-height: 30px; font-weight: 500; @@ -509,7 +509,7 @@ $small-breakpoint: 960px; color: $secondary-text-color; small { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; display: block; font-size: 18px; font-weight: 400; @@ -518,7 +518,7 @@ $small-breakpoint: 960px; } h2 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 22px; line-height: 26px; font-weight: 500; @@ -527,7 +527,7 @@ $small-breakpoint: 960px; } h3 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 18px; line-height: 24px; font-weight: 500; @@ -536,7 +536,7 @@ $small-breakpoint: 960px; } h4 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 16px; line-height: 24px; font-weight: 500; @@ -545,7 +545,7 @@ $small-breakpoint: 960px; } h5 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 14px; line-height: 24px; font-weight: 500; @@ -554,7 +554,7 @@ $small-breakpoint: 960px; } h6 { - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-size: 12px; line-height: 24px; font-weight: 500; @@ -621,7 +621,7 @@ $small-breakpoint: 960px; .hero .heading { padding-bottom: 20px; - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; font-weight: 400; font-size: 16px; @@ -672,7 +672,7 @@ $small-breakpoint: 960px; text-decoration: none; padding: 12px 16px; line-height: 32px; - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-weight: 500; font-size: 14px; @@ -745,7 +745,7 @@ $small-breakpoint: 960px; .about-short { background: darken($ui-base-color, 4%); padding: 50px 0 30px; - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 16px; font-weight: 400; font-size: 16px; @@ -1015,7 +1015,7 @@ $small-breakpoint: 960px; display: flex; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; font-size: 13px; line-height: 18px; font-weight: 400; diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index b8cc3303960..e16920dd4ac 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -443,7 +443,7 @@ $no-columns-breakpoint: 600px; border-radius: 0 0 4px 4px; padding: 10px; color: $darker-text-color; - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; font-size: 12px; word-wrap: break-word; min-height: 20px; diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss index 9c2499ac424..550b7fdfc98 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.scss @@ -6,7 +6,7 @@ } body { - font-family: 'mastodon-font-sans-serif', sans-serif; + font-family: $font-sans-serif, sans-serif; background: darken($ui-base-color, 8%); font-size: 13px; line-height: 18px; @@ -29,8 +29,8 @@ body { // Fira Sans => Firefox OS // Droid Sans => Older Androids (<4.0) // Helvetica Neue => Older macOS <10.11 - // mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", mastodon-font-sans-serif, sans-serif; + // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0) + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", $font-sans-serif, sans-serif; } &.app-body { diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss index d1b9934d718..398458e4744 100644 --- a/app/javascript/flavours/glitch/styles/containers.scss +++ b/app/javascript/flavours/glitch/styles/containers.scss @@ -37,7 +37,7 @@ outline: 0; padding: 12px 16px; line-height: 32px; - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; font-weight: 500; font-size: 14px; } @@ -633,7 +633,7 @@ font-size: 18px; margin-bottom: 5px; color: $primary-text-color; - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; } } diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss index 949ca733f49..86cf6c61b6e 100644 --- a/app/javascript/flavours/glitch/styles/dashboard.scss +++ b/app/javascript/flavours/glitch/styles/dashboard.scss @@ -35,7 +35,7 @@ font-weight: 500; font-size: 24px; color: $primary-text-color; - font-family: 'mastodon-font-display', sans-serif; + font-family: $font-display, sans-serif; margin-bottom: 20px; } diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index cbd3de94c84..be2bf7cead0 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -1,7 +1,7 @@ $no-columns-breakpoint: 600px; code { - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; font-weight: 400; } @@ -474,7 +474,7 @@ code { width: 100%; border: none; padding: 10px; - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; background: $ui-base-color; color: $primary-text-color; font-size: 14px; @@ -718,7 +718,7 @@ code { .form_admin_settings_custom_css, .form_admin_settings_closed_registrations_message { textarea { - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; } } @@ -742,7 +742,7 @@ code { border: 0; padding: 10px; font-size: 14px; - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; } button { diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index fa876e6031a..9fd0b95bbe2 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -90,7 +90,7 @@ } samp { - font-family: 'mastodon-font-monospace', monospace; + font-family: $font-monospace, monospace; } button.table-action-link { diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index 715ecf98f0f..1ed1a57787e 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -51,6 +51,10 @@ $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; + // Avatar border size (8% default, 100% for rounded avatars) $ui-avatar-border-size: 8%;