about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authorSasha Sorokin <dafri.nochiterov8@gmail.com>2020-01-12 20:16:46 +0700
committerEugen Rochko <eugen@zeonfederated.com>2020-01-12 14:16:46 +0100
commit7da54001fe21d1fd10ede5ac78e5c76f25afc08e (patch)
tree15eadfb40832239ba09697b651abaf72dac1ce48 /app/javascript
parent5dcca33c561ebeca9cf12eba8a39efee0dd484d0 (diff)
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.
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/styles/mastodon/_mixins.scss3
-rw-r--r--app/javascript/styles/mastodon/about.scss3
-rw-r--r--app/javascript/styles/mastodon/accounts.scss1
-rw-r--r--app/javascript/styles/mastodon/admin.scss10
-rw-r--r--app/javascript/styles/mastodon/components.scss27
-rw-r--r--app/javascript/styles/mastodon/footer.scss1
-rw-r--r--app/javascript/styles/mastodon/forms.scss2
-rw-r--r--app/javascript/styles/mastodon/widgets.scss7
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;