Merge pull request #31 from kremalicious/fix/accessibility

accessibility tweaks

README.md

@@ -17,6 +17,7 @@
 ## Table of Contents
 
 - [Features](#features)
+  - [Lighthouse score](#lighthouse-score)
   - [One data file to rule all pages](#one-data-file-to-rule-all-pages)
   - [Theme switcher](#theme-switcher)
   - [SEO component](#seo-component)
@@ -37,6 +38,10 @@
 
 The whole [portfolio](https://matthiaskretschmann.com) is a React-based Single Page App built with [Gatsby v2](https://www.gatsbyjs.org).
 
+### Lighthouse score
+
+[![Lighthouse scores](https://lighthouse.now.sh/?perf=99&pwa=100&a11y=100&bp=100&seo=100)](https://travis-ci.com/kremalicious/portfolio)
+
 ### One data file to rule all pages
 
 All content is powered by one YAML file, [`data/projects.yml`](data/projects.yml) where all the portfolio's projects are defined. The project description itself is transformed from Markdown.

src/components/atoms/Icons.module.scss

@@ -3,7 +3,7 @@
 .icon {
     width: $font-size-base;
     height: $font-size-base;
-    fill: $brand-grey;
+    fill: $brand-grey-light;
     stroke: none;
     vertical-align: baseline;
     margin-bottom: -.04rem;

src/components/molecules/LogoUnit.jsx

@@ -18,7 +18,7 @@ const query = graphql`
 
 const Animation = posed.div(moveInBottom)
 
-class LogoUnit extends PureComponent {
+export default class LogoUnit extends PureComponent {
   state = { minimal: false }
 
   static propTypes = {
@@ -44,7 +44,7 @@ class LogoUnit extends PureComponent {
       <StaticQuery
         query={query}
         render={data => {
-          const meta = data.dataYaml
+          const { title, tagline } = data.dataYaml
           const { minimal } = this.state
 
           return (
@@ -53,11 +53,10 @@ class LogoUnit extends PureComponent {
                 <div className={minimal ? styles.minimal : styles.logounit}>
                   <Logo className={styles.logounit__logo} />
                   <h1 className={styles.logounit__title}>
-                    {meta.title.toLowerCase()}
+                    {title.toLowerCase()}
                   </h1>
                   <p className={styles.logounit__description}>
-                    <span>{'{ '}</span> {meta.tagline.toLowerCase()}{' '}
-                    <span>{' }'}</span>
+                    {tagline.toLowerCase()}
                   </p>
                 </div>
               </Animation>
@@ -68,5 +67,3 @@ class LogoUnit extends PureComponent {
     )
   }
 }
-
-export default LogoUnit

src/components/molecules/LogoUnit.module.scss

@@ -29,14 +29,19 @@
 
 .logounit__description {
     font-size: $font-size-h4;
-    color: $brand-grey;
+    color: $brand-grey-light;
 
-    :global(.dark) & {
-        color: $brand-grey-light;
+    &::before,
+    &::after {
+        opacity: .4;
     }
 
-    span {
-        opacity: .4;
+    &::before {
+        content: '{ ';
+    }
+
+    &::after {
+        content: ' }';
     }
 }
 
@@ -49,11 +54,7 @@
     // stylelint-disable no-descending-specificity
     .logounit__title,
     .logounit__description {
-        color: $brand-grey-light;
-
-        :global(.dark) & {
-            color: $brand-grey;
-        }
+        color: $text-color-light--dark;
     }
     // stylelint-enable no-descending-specificity
 

src/components/organisms/Footer.module.scss

@@ -36,7 +36,3 @@
         }
     }
 }
-
-.footer__copyright {
-    opacity: .7;
-}

src/styles/_variables.scss

@@ -9,7 +9,7 @@ $brand-cyan: #43a699;
 $brand-main-light: #88bec8;
 $brand-light: #e7eef4;
 
-$brand-grey: #6b7f88;
+$brand-grey: #4e5d63;
 $brand-grey-light: lighten($brand-grey, 15%);
 $brand-grey-dimmed: lighten($brand-grey, 50%);
 
@@ -17,7 +17,7 @@ $brand-grey-dimmed: lighten($brand-grey, 50%);
 /////////////////////////////////////
 
 $body-background-color: $brand-light;
-$body-background-color--dark: darken($brand-grey, 30%);
+$body-background-color--dark: darken($brand-grey, 22%);
 
 // Text Colors
 /////////////////////////////////////
@@ -25,8 +25,8 @@ $body-background-color--dark: darken($brand-grey, 30%);
 $text-color: $brand-grey;
 $text-color-light: $brand-grey-light;
 
-$text-color--dark: $brand-grey-light;
-$text-color-light--dark: $brand-grey;
+$text-color--dark: lighten($brand-grey-light, 5%);
+$text-color-light--dark: lighten($brand-grey-light, 5%);
 
 // Typography
 /////////////////////////////////////