mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-11-26 07:51:37 +01:00
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.
This commit is contained in:
parent
5dcca33c56
commit
7da54001fe
8 changed files with 16 additions and 38 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -129,7 +129,6 @@
|
|||
|
||||
.older,
|
||||
.newer {
|
||||
text-transform: uppercase;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -94,7 +94,6 @@
|
|||
}
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: $darker-text-color;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue