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.master^2
@@ -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; | ||||
} | } | ||||
@@ -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; | ||||
} | } | ||||
@@ -129,7 +129,6 @@ | |||||
.older, | .older, | ||||
.newer { | .newer { | ||||
text-transform: uppercase; | |||||
color: $secondary-text-color; | color: $secondary-text-color; | ||||
} | } | ||||
@@ -232,8 +232,7 @@ $content-width: 840px; | |||||
} | } | ||||
h4 { | h4 { | ||||
text-transform: uppercase; | |||||
font-size: 13px; | |||||
font-size: 14px; | |||||
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: 12px; | |||||
font-size: 13px; | |||||
@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: 12px; | |||||
font-size: 13px; | |||||
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 { | ||||
@@ -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: 11px; | |||||
font-size: 12px; | |||||
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; | |||||
text-transform: uppercase; | |||||
font-size: 13px; | |||||
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: 11px; | |||||
font-size: 12px; | |||||
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; | |||||
text-transform: uppercase; | |||||
font-size: 13px; | |||||
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: 12px; | |||||
font-size: 13px; | |||||
} | } | ||||
&__case { | &__case { | ||||
@@ -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; | ||||
@@ -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; | ||||
@@ -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; | ||||