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.
main
Sasha Sorokin 2020-01-12 20:16:46 +07:00 committed by Eugen Rochko
parent 5dcca33c56
commit 7da54001fe
8 changed files with 16 additions and 38 deletions

View File

@ -34,9 +34,8 @@
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
h4 { h4 {
text-transform: uppercase;
color: $light-text-color; color: $light-text-color;
font-size: 13px; font-size: 14px;
font-weight: 500; font-weight: 500;
margin-bottom: 10px; margin-bottom: 10px;
} }

View File

@ -719,9 +719,8 @@ $small-breakpoint: 960px;
h4 { h4 {
padding: 10px; padding: 10px;
text-transform: uppercase;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 14px;
color: $darker-text-color; color: $darker-text-color;
} }

View File

@ -129,7 +129,6 @@
.older, .older,
.newer { .newer {
text-transform: uppercase;
color: $secondary-text-color; color: $secondary-text-color;
} }

View File

@ -232,8 +232,7 @@ $content-width: 840px;
} }
h4 { h4 {
text-transform: uppercase; font-size: 14px;
font-size: 13px;
font-weight: 700; font-weight: 700;
color: $darker-text-color; color: $darker-text-color;
padding-bottom: 8px; padding-bottom: 8px;
@ -408,8 +407,7 @@ body,
strong { strong {
font-weight: 500; font-weight: 500;
text-transform: uppercase; font-size: 13px;
font-size: 12px;
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
&:lang(#{$lang}) { &:lang(#{$lang}) {
@ -422,8 +420,7 @@ body,
display: inline-block; display: inline-block;
color: $darker-text-color; color: $darker-text-color;
text-decoration: none; text-decoration: none;
text-transform: uppercase; font-size: 13px;
font-size: 12px;
font-weight: 500; font-weight: 500;
border-bottom: 2px solid $ui-base-color; border-bottom: 2px solid $ui-base-color;
@ -757,7 +754,6 @@ a.name-tag,
flex: 0 0 auto; flex: 0 0 auto;
font-weight: 500; font-weight: 500;
color: $darker-text-color; color: $darker-text-color;
text-transform: uppercase;
text-align: right; text-align: right;
a { a {

View File

@ -33,7 +33,7 @@
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 15px;
font-weight: 500; font-weight: 500;
height: 36px; height: 36px;
letter-spacing: 0; letter-spacing: 0;
@ -42,7 +42,6 @@
padding: 0 16px; padding: 0 16px;
position: relative; position: relative;
text-align: center; text-align: center;
text-transform: uppercase;
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: all 100ms ease-in; transition: all 100ms ease-in;
@ -887,9 +886,8 @@
border: 0; border: 0;
color: $inverted-text-color; color: $inverted-text-color;
font-weight: 700; font-weight: 700;
font-size: 11px; font-size: 12px;
padding: 0 6px; padding: 0 6px;
text-transform: uppercase;
line-height: 20px; line-height: 20px;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
@ -1411,8 +1409,7 @@ a .account__avatar {
& > span { & > span {
display: block; display: block;
text-transform: uppercase; font-size: 12px;
font-size: 11px;
color: $darker-text-color; color: $darker-text-color;
} }
@ -2760,9 +2757,8 @@ a.account__display-name {
background: $ui-base-color; background: $ui-base-color;
color: $dark-text-color; color: $dark-text-color;
padding: 8px 20px; padding: 8px 20px;
font-size: 12px; font-size: 13px;
font-weight: 500; font-weight: 500;
text-transform: uppercase;
cursor: default; cursor: default;
} }
@ -2827,8 +2823,7 @@ a.account__display-name {
margin-top: 10px; margin-top: 10px;
h4 { h4 {
font-size: 12px; font-size: 13px;
text-transform: uppercase;
color: $darker-text-color; color: $darker-text-color;
padding: 10px; padding: 10px;
font-weight: 500; font-weight: 500;
@ -3350,9 +3345,8 @@ a.status-card.compact:hover {
.loading-indicator { .loading-indicator {
color: $dark-text-color; color: $dark-text-color;
font-size: 12px; font-size: 13px;
font-weight: 400; font-weight: 400;
text-transform: uppercase;
overflow: visible; overflow: visible;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -3716,8 +3710,7 @@ a.status-card.compact:hover {
display: block; display: block;
vertical-align: top; vertical-align: top;
background-color: $base-overlay-background; background-color: $base-overlay-background;
text-transform: uppercase; font-size: 12px;
font-size: 11px;
font-weight: 500; font-weight: 500;
padding: 4px; padding: 4px;
border-radius: 4px; border-radius: 4px;
@ -3969,8 +3962,7 @@ a.status-card.compact:hover {
} }
span { span {
font-size: 12px; font-size: 13px;
text-transform: uppercase;
font-weight: 500; font-weight: 500;
display: block; display: block;
} }
@ -4569,8 +4561,7 @@ a.status-card.compact:hover {
font-weight: 500; font-weight: 500;
color: $inverted-text-color; color: $inverted-text-color;
margin-bottom: 5px; margin-bottom: 5px;
text-transform: uppercase; font-size: 13px;
font-size: 12px;
} }
&__case { &__case {

View File

@ -94,7 +94,6 @@
} }
h4 { h4 {
text-transform: uppercase;
font-weight: 700; font-weight: 700;
margin-bottom: 8px; margin-bottom: 8px;
color: $darker-text-color; color: $darker-text-color;

View File

@ -414,7 +414,6 @@ code {
line-height: inherit; line-height: inherit;
height: auto; height: auto;
padding: 10px; padding: 10px;
text-transform: uppercase;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
@ -657,7 +656,6 @@ code {
a { a {
color: $highlight-text-color; color: $highlight-text-color;
text-transform: uppercase;
text-decoration: none; text-decoration: none;
font-weight: 700; font-weight: 700;

View File

@ -76,9 +76,8 @@
h4 { h4 {
padding: 10px; padding: 10px;
text-transform: uppercase;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 14px;
color: $darker-text-color; color: $darker-text-color;
} }
@ -139,9 +138,8 @@
h4 { h4 {
padding: 10px; padding: 10px;
text-transform: uppercase;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 14px;
color: $darker-text-color; color: $darker-text-color;
} }
@ -408,7 +406,6 @@
thead th { thead th {
text-align: center; text-align: center;
text-transform: uppercase;
color: $darker-text-color; color: $darker-text-color;
font-weight: 700; font-weight: 700;
padding: 10px; padding: 10px;