Font size a11y improvements (#1290)

ifmeorg · Dec 2, 2018 · 1c5560a · 1c5560a
1 parent a3d707b
commit 1c5560a
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 14 deletions.
diff --git a/app/assets/stylesheets/base/_colors.scss b/app/assets/stylesheets/base/_colors.scss
@@ -18,7 +18,6 @@ $light-grey:#D3D3D3;
 $white: #FFFFFF;
 $white-80: rgba(255, 255, 255, 0.8);
 $white-70: rgba(255, 255, 255, 0.7);
-$white-50: rgba(255, 255, 255, 0.5);
 $white-20: rgba(255, 255, 255, 0.2);
 $white-10: rgba(255, 255, 255, 0.1);
 

diff --git a/app/assets/stylesheets/core/buttons.scss b/app/assets/stylesheets/core/buttons.scss
@@ -6,6 +6,7 @@
   text-decoration: none;
   box-sizing: border-box;
   color: $mulberry !important;
+  cursor: pointer;
 }
 
 @mixin buttonFull() {
@@ -31,7 +32,7 @@
 }
 
 @mixin buttonXS() {
-  font-size: $size-14;
+  font-size: $size-16;
   padding: $size-12;
 }
 

diff --git a/app/assets/stylesheets/core/footer.scss b/app/assets/stylesheets/core/footer.scss
@@ -33,7 +33,7 @@
       margin-bottom: $size-0;
     }
     &Title {
-      @include setFontSize($size-14);
+      @include setFontSize($size-16);
       @include setMargin($size-0, $size-0, $size-10, $size-0);
       color: $white-80;
       text-transform: uppercase;

diff --git a/app/assets/stylesheets/dashboard/dashboard_nav.scss b/app/assets/stylesheets/dashboard/dashboard_nav.scss
@@ -7,7 +7,7 @@
   }
 
   &Links {
-    @include setFontSize($size-18);
+    font-size: $size-18;
     a {
       @include standardTransition();
       display: block;
@@ -22,6 +22,7 @@
       color: $black !important;
     }
     @media screen and (max-width: $medium) {
+      font-size: $size-16;
       text-align: center;
     }
   }

diff --git a/client/app/components/Header/Header.scss b/client/app/components/Header/Header.scss
@@ -28,7 +28,6 @@
     font-size: $size-16;
     @media screen and (max-width: $medium) {
       text-align: center;
-      font-size: $size-18;
     }
   }
 
@@ -144,7 +143,6 @@
         flex-direction: row;
         letter-spacing: 0.0571429em;
         text-transform: uppercase;
-        font-weight: $font-weight-300;
         > div {
           @include setMargin($size-0, $size-26, $size-0, $size-0);
         }

diff --git a/client/app/components/Logo/Logo.scss b/client/app/components/Logo/Logo.scss
@@ -40,7 +40,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  font-weight: $font-weight-300;
+  font-weight: $font-weight-400;
   text-transform: lowercase;
   text-decoration: none;
   border: none;

diff --git a/client/app/components/Modal/Modal.scss b/client/app/components/Modal/Modal.scss
@@ -45,7 +45,6 @@
       justify-content: space-between;
       align-items: center;
       &Title {
-        font-weight: $font-weight-300;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;

diff --git a/client/app/components/Resource/Resource.scss b/client/app/components/Resource/Resource.scss
@@ -10,7 +10,7 @@
     position: absolute;
     left: $size-10;
     top: 9px;
-    border: $size-1 solid #fff;
+    border: $size-1 solid $white;
     border-width: 0 $size-40 0 0;
     height: 3px;
   }
@@ -32,9 +32,9 @@
   }
 
   .author {
-    @include setFontSize($size-14);
+    @include setFontSize($size-16);
     @include setMargin($size-0, $size-0, $size-10, $size-0);
-    color: $white-50;
+    color: $white-80;
     line-height: 1.5;
     text-transform: uppercase;
     letter-spacing: 0.08em;

diff --git a/client/app/components/Story/Story.scss b/client/app/components/Story/Story.scss
@@ -5,7 +5,7 @@
   flex-direction: column;
   height: 100%;
   &Type {
-    @include setFontSize($size-12);
+    @include setFontSize($size-16);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: $mulberry-90;
@@ -87,7 +87,7 @@
 }
 
 .date {
-  @include setFontSize($size-12);
+  @include setFontSize($size-14);
   @include setMargin($size-10, $size-0, $size-0, $size-0);
   letter-spacing: 0.1em;
   text-transform: uppercase;

diff --git a/client/app/components/Tag/Tag.scss b/client/app/components/Tag/Tag.scss
@@ -1,7 +1,7 @@
 @import "../../styles/_global.scss";
 
 .tag {
-  @include setFontSize($size-12);
+  @include setFontSize($size-14);
   @include setMargin($size-0, $size-8, $size-8, $size-0);
   padding: $size-4 $size-12;
   text-indent: 4px;