Merge pull request #149 from UniversityofHelsinki/accessability_impro…

…vements-7877 Accessability improvements
UniversityofHelsinki · Jan 17, 2019 · a06e7f1 · a06e7f1
2 parents b1b0c1b + fb4323e
commit a06e7f1
Show file tree

Hide file tree

Showing 20 changed files with 197 additions and 181 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/fonts/hy-icons.eot b/fonts/hy-icons.eot
diff --git a/fonts/hy-icons.ttf b/fonts/hy-icons.ttf
diff --git a/fonts/hy-icons.woff b/fonts/hy-icons.woff
diff --git a/gulpfile.js b/gulpfile.js
@@ -135,7 +135,7 @@ gulp.task('serve', ['build'], function () {
       baseDir: './'
     }
   });
-  gulp.watch(['./sass/**/*.scss', './templates/**/*.html'], ['build']);
+  gulp.watch(['./sass/**/*.scss', '!./sass/icons/**/*.scss', './templates/**/*.html'], ['build']);
 
   gulp.watch(['index.html']).on('change', browserSync.reload);
 });

diff --git a/sass/common-elements/_common-elements.scss b/sass/common-elements/_common-elements.scss
@@ -159,7 +159,7 @@ blockquote,
 blockquote p {
   @include font-size(18px, 16px);
   @include font-weight-book;
-  color: $silver;
+  color: $lightgray;
   line-height: 1.5em;
 }
 
@@ -211,7 +211,8 @@ input[type="submit"] {
   &[disabled]:active,
   &[disabled]:focus,
   &[disabled]:hover {
-    background-color: $lightsilver;
+    background-color: $mediumsilver;
+    color: $lightgray;
   }
 }
 

diff --git a/sass/components/_avatar.scss b/sass/components/_avatar.scss
@@ -14,7 +14,7 @@
 .avatar-image {
   background: url("../assets/svg/avatar.svg") no-repeat center center;
   background-size: 65% 65%;
-  color: white;
+  color: $white;
   display: inline-block;
   height: 60px;
   width: 60px;
@@ -30,10 +30,10 @@
   }
 
   &.is-student {
-    background-color: #7b46a3;
+    background-color: $darkorange;
   }
 
   &.is-teacher {
-    background-color: #99cc66;
+    background-color: $green;
   }
 }
diff --git a/sass/components/_hero.scss b/sass/components/_hero.scss
@@ -56,7 +56,7 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .4;
+    opacity: .6;
     position: absolute;
     right: 0;
     top: 0;
@@ -307,7 +307,7 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .4;
+    opacity: .6;
     position: absolute;
     right: 0;
     top: 0;

diff --git a/sass/components/_highlight.scss b/sass/components/_highlight.scss
@@ -67,7 +67,7 @@ a.highlight:hover {
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .4;
+    opacity: .6;
     position: absolute;
     right: 0;
     top: 0;

diff --git a/sass/components/_horizontal-tabs.scss b/sass/components/_horizontal-tabs.scss
@@ -28,22 +28,24 @@
   }
 
   .horizontal-tab-button {
-    border: 1px solid #eaeaea;
+    border-top: 1px solid $blue;
+    border-left: 1px solid $mediumsilver;
+    border-right: 1px solid $mediumsilver;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     margin: 0;
     text-align: center;
 
     &:not(:last-child) {
-      border-right: none;
+      border-right: $mediumsilver;
     }
 
     > a {
-      @include font-size(14px);
+      @include font-size(18px);
       align-items: center;
-      background: $lightsilver;
-      color: $silver;
+      background: $blue;
+      color: $lightsilver;
       display: flex;
       flex-direction: column;
       font-weight: 600;
@@ -54,29 +56,23 @@
       transition-property: color, background-color;
 
       > strong {
-        font-weight: 400;
+        font-weight: 600;
       }
 
       &[href='#programme'] {
         &:before {
-          @include icon($icon-todo-list);
-          font-size: 2em;
           margin-bottom: 5px;
         }
       }
 
       &[href='#applying'] {
         &:before {
-          @include icon($icon-edit-event);
-          font-size: 2em;
           margin-bottom: 5px;
         }
       }
 
       &[href='#organisation'] {
         &:before {
-          @include icon($icon-units-and-faculties);
-          font-size: 2em;
           margin-bottom: 5px;
         }
       }
@@ -92,9 +88,17 @@
         box-shadow: inset 0 3px 0 $blue;
         color: $blue;
       }
+
+      &:hover {
+        color: $blue;
+      }
     }
 
     &:hover > a {
+      color: $white;
+    }
+
+    &.selected:hover > a {
       color: $blue;
     }
   }

diff --git a/sass/components/_label-row.scss b/sass/components/_label-row.scss
@@ -31,12 +31,12 @@
   }
 
   &.theme-yliopisto-lehti {
-    background-color: $orange;
-    border-color: $orange;
+    background-color: $darkorange;
+    border-color: $darkorange;
 
     &.theme-secondary {
       background: none;
-      color: $orange;
+      color: $darkorange;
     }
   }
 }
diff --git a/sass/components/_liftup-grid.scss b/sass/components/_liftup-grid.scss
@@ -106,7 +106,7 @@ a.liftup-grid__item:hover {
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .4;
+    opacity: .6;
     position: absolute;
     right: 0;
     top: 0;

diff --git a/sass/components/_liftup-mosaic.scss b/sass/components/_liftup-mosaic.scss
@@ -33,7 +33,7 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: .4;
+    opacity: .6;
     position: absolute;
     right: 0;
     top: 0;

diff --git a/sass/components/_liftup.scss b/sass/components/_liftup.scss
@@ -16,7 +16,7 @@
     bottom: 0;
     content: "";
     left: 0;
-    opacity: 0.2;
+    opacity: 0.6;
     position: absolute;
     right: 0;
     top: 0;
@@ -26,7 +26,7 @@
   }
 
   &:hover:before {
-    opacity: 0.4;
+    opacity: 0.6;
   }
 
   @include breakpoint($small) {

diff --git a/sass/components/_messages.scss b/sass/components/_messages.scss
@@ -8,21 +8,21 @@ $messages: (
   "status": (
     "color": $black,
     "color-alt": #81b43b,
-    "bg-color": #b2e576,
+    "bg-color": $green,
     "bg-color-alt": #f2f7eb,
     "icon": $icon-done,
   ),
   "info": (
-    "color": $white,
+    "color": $black,
     "color-alt": $black,
-    "bg-color": #52c6af,
+    "bg-color": $orange,
     "bg-color-alt": #f8f8f8,
     "icon": $icon-info,
   ),
   "error": (
     "color": $white,
-    "color-alt": #964822,
-    "bg-color": #964822,
+    "color-alt": $redalert,
+    "bg-color": $redalert,
     "bg-color-alt": #f4ece8,
     "icon": $icon-warning,
   )

diff --git a/sass/components/_search-form.scss b/sass/components/_search-form.scss
@@ -80,6 +80,10 @@ input[type="text"].search-form--dark__input {
   &:focus {
     outline-color: $blue;
   }
+
+  &::placeholder {
+    color: $lightsilver;
+  }
 }
 
 input[type="submit"].search-form--dark__submit {
@@ -117,7 +121,7 @@ input[type="submit"].search-form--dark__submit {
 input[type="text"].search-form-large__input {
   @include font-size(15px);
   border: 2px solid $lightsilver;
-  color: $silver;
+  color: $lightsilver;
   display: block;
   line-height: 1.7em;
   margin-bottom: $vert-spacing-unit;

diff --git a/sass/components/box/_box-hero.scss b/sass/components/box/_box-hero.scss
@@ -92,7 +92,7 @@
 .box-hero__shadow {
   background: none;
   background: #000;
-  background: rgba(#000, 0.4);
+  background: rgba(#000, 0.6);
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
   display: inline;

diff --git a/sass/components/box/_box-story.scss b/sass/components/box/_box-story.scss
@@ -139,7 +139,7 @@
   }
 
   &.theme-yliopisto-lehti {
-    background-color: $orange;
+    background-color: $darkorange;
   }
 }
 

diff --git a/sass/objects/_button.scss b/sass/objects/_button.scss
@@ -65,15 +65,15 @@
 
 .button--small {
   @extend %button;
-  background-color: $lightsilver;
+  background-color: $mediumsilver;
   color: $black;
   line-height: 1;
   padding: .4em .7em;
 
   &:focus,
   &:hover {
     background-color: $silver;
-    color: $white;
+    color: $black;
   }
 
   &:active,
@@ -119,6 +119,10 @@
     }
   }
 
+  &:hover {
+    border: 2px solid $darkblue;
+  }
+
   a:hover &:before,
   &:hover:before {
     color: $white;

diff --git a/sass/variables/_colors.scss b/sass/variables/_colors.scss
@@ -20,11 +20,11 @@ $pitchblack: #000;
  title: Other colors
  description: The colors used through out the theme.
  color-list: list
- colors: $blue, $blue--active, $darkblue, $darkblue--active, $lightsilver, $mediumsilver, $silver, $lightgray, $darkgray, $red, $orange
+ colors: $blue, $blue--active, $darkblue, $darkblue--active, $lightsilver, $mediumsilver, $silver, $lightgray, $darkgray, $red, $redalert, $purple, $orange, $darkorange, $green, $darkgreen
 */
-$blue: #0098d0;
-$blue--active: #0882B3;
-$darkblue: #005479;
+$blue: #107EAB;
+$blue--active: #0E688B;
+$darkblue: #005379;
 $darkblue--active: #003146;
 
 $lightsilver: #F8F8F8;
@@ -34,4 +34,10 @@ $lightgray: #555555;
 $darkgray: #424242;
 
 $red: #e5053a;
-$orange: #fca311;
+$redalert: #A31621;
+$purple: #420039;
+$orange: #F9A21A;
+$darkorange: #D14600;
+
+$green: #96BA3C;
+$darkgreen: #006400;