From 7da54001fe21d1fd10ede5ac78e5c76f25afc08e Mon Sep 17 00:00:00 2001 From: Sasha Sorokin Date: Sun, 12 Jan 2020 20:16:46 +0700 Subject: [PATCH] Avoid using uppercase text-transform (#12684) One user suggested that the loading indicator should not be written ALL CAPS, at first it was thought this change is very minor, but then a few other people asked agreed on the same thing - variant without caps looks better. It may be related that it is harder to read or just looks too "catchy". Moreover, I asked @rf@mastodonsocial.ru community what they think of that and 82% of 22 people agreed on this change. This commit removes all usage of text-transform: uppercase, where the font size specified, it changes the value by one pixel larger, so we still keeping the "designed" size of the labels but without using CAPS. --- app/javascript/styles/mastodon/_mixins.scss | 3 +-- app/javascript/styles/mastodon/about.scss | 3 +-- app/javascript/styles/mastodon/accounts.scss | 1 - app/javascript/styles/mastodon/admin.scss | 10 +++---- .../styles/mastodon/components.scss | 27 +++++++------------ app/javascript/styles/mastodon/footer.scss | 1 - app/javascript/styles/mastodon/forms.scss | 2 -- app/javascript/styles/mastodon/widgets.scss | 7 ++--- 8 files changed, 16 insertions(+), 38 deletions(-) diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss index 68cad0fde..4e3e1434a 100644 --- a/app/javascript/styles/mastodon/_mixins.scss +++ b/app/javascript/styles/mastodon/_mixins.scss @@ -34,9 +34,8 @@ box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); h4 { - text-transform: uppercase; color: $light-text-color; - font-size: 13px; + font-size: 14px; font-weight: 500; margin-bottom: 10px; } diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index cf16b54ac..201235187 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -719,9 +719,8 @@ $small-breakpoint: 960px; h4 { padding: 10px; - text-transform: uppercase; font-weight: 700; - font-size: 13px; + font-size: 14px; color: $darker-text-color; } diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 5dc067f0e..a1681afe6 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -129,7 +129,6 @@ .older, .newer { - text-transform: uppercase; color: $secondary-text-color; } diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 89c45cab6..7f22f58a1 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -232,8 +232,7 @@ $content-width: 840px; } h4 { - text-transform: uppercase; - font-size: 13px; + font-size: 14px; font-weight: 700; color: $darker-text-color; padding-bottom: 8px; @@ -408,8 +407,7 @@ body, strong { font-weight: 500; - text-transform: uppercase; - font-size: 12px; + font-size: 13px; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -422,8 +420,7 @@ body, display: inline-block; color: $darker-text-color; text-decoration: none; - text-transform: uppercase; - font-size: 12px; + font-size: 13px; font-weight: 500; border-bottom: 2px solid $ui-base-color; @@ -757,7 +754,6 @@ a.name-tag, flex: 0 0 auto; font-weight: 500; color: $darker-text-color; - text-transform: uppercase; text-align: right; a { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 7121030d2..94671c350 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -33,7 +33,7 @@ cursor: pointer; display: inline-block; font-family: inherit; - font-size: 14px; + font-size: 15px; font-weight: 500; height: 36px; letter-spacing: 0; @@ -42,7 +42,6 @@ padding: 0 16px; position: relative; text-align: center; - text-transform: uppercase; text-decoration: none; text-overflow: ellipsis; transition: all 100ms ease-in; @@ -887,9 +886,8 @@ border: 0; color: $inverted-text-color; font-weight: 700; - font-size: 11px; + font-size: 12px; padding: 0 6px; - text-transform: uppercase; line-height: 20px; cursor: pointer; vertical-align: middle; @@ -1411,8 +1409,7 @@ a .account__avatar { & > span { display: block; - text-transform: uppercase; - font-size: 11px; + font-size: 12px; color: $darker-text-color; } @@ -2760,9 +2757,8 @@ a.account__display-name { background: $ui-base-color; color: $dark-text-color; padding: 8px 20px; - font-size: 12px; + font-size: 13px; font-weight: 500; - text-transform: uppercase; cursor: default; } @@ -2827,8 +2823,7 @@ a.account__display-name { margin-top: 10px; h4 { - font-size: 12px; - text-transform: uppercase; + font-size: 13px; color: $darker-text-color; padding: 10px; font-weight: 500; @@ -3350,9 +3345,8 @@ a.status-card.compact:hover { .loading-indicator { color: $dark-text-color; - font-size: 12px; + font-size: 13px; font-weight: 400; - text-transform: uppercase; overflow: visible; position: absolute; top: 50%; @@ -3716,8 +3710,7 @@ a.status-card.compact:hover { display: block; vertical-align: top; background-color: $base-overlay-background; - text-transform: uppercase; - font-size: 11px; + font-size: 12px; font-weight: 500; padding: 4px; border-radius: 4px; @@ -3969,8 +3962,7 @@ a.status-card.compact:hover { } span { - font-size: 12px; - text-transform: uppercase; + font-size: 13px; font-weight: 500; display: block; } @@ -4569,8 +4561,7 @@ a.status-card.compact:hover { font-weight: 500; color: $inverted-text-color; margin-bottom: 5px; - text-transform: uppercase; - font-size: 12px; + font-size: 13px; } &__case { diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss index 00d290883..f016248ba 100644 --- a/app/javascript/styles/mastodon/footer.scss +++ b/app/javascript/styles/mastodon/footer.scss @@ -94,7 +94,6 @@ } h4 { - text-transform: uppercase; font-weight: 700; margin-bottom: 8px; color: $darker-text-color; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index a0478bf7f..8965ce675 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -414,7 +414,6 @@ code { line-height: inherit; height: auto; padding: 10px; - text-transform: uppercase; text-decoration: none; text-align: center; box-sizing: border-box; @@ -657,7 +656,6 @@ code { a { color: $highlight-text-color; - text-transform: uppercase; text-decoration: none; font-weight: 700; diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss index ca050a8d9..90e1581bb 100644 --- a/app/javascript/styles/mastodon/widgets.scss +++ b/app/javascript/styles/mastodon/widgets.scss @@ -76,9 +76,8 @@ h4 { padding: 10px; - text-transform: uppercase; font-weight: 700; - font-size: 13px; + font-size: 14px; color: $darker-text-color; } @@ -139,9 +138,8 @@ h4 { padding: 10px; - text-transform: uppercase; font-weight: 700; - font-size: 13px; + font-size: 14px; color: $darker-text-color; } @@ -408,7 +406,6 @@ thead th { text-align: center; - text-transform: uppercase; color: $darker-text-color; font-weight: 700; padding: 10px;