fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-12-22 17:17:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avoid using uppercase text-transform (#12684)

Browse source 
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.
This commit is contained in:
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/javascript/styles/mastodon/_mixins.scss
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;
} }

3
app/javascript/styles/mastodon/about.scss
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;
} }

1
app/javascript/styles/mastodon/accounts.scss
View file

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

10
app/javascript/styles/mastodon/admin.scss
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 {

27
app/javascript/styles/mastodon/components.scss
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 {

1
app/javascript/styles/mastodon/footer.scss
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;

2
app/javascript/styles/mastodon/forms.scss
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;

7
app/javascript/styles/mastodon/widgets.scss
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;