Color contrast & alt text for accessibility

Add gem file to allow running jekyll locally

Author: adam3smith

Gemfile

@@ -1,3 +1,4 @@
 source "https://rubygems.org"
 
 gem "github-pages", group: :jekyll_plugins
+gem "webrick"

_includes/masthead.html

@@ -2,7 +2,7 @@
   <div class="masthead__inner-wrap">
     <div class="masthead__menu">
       <nav id="site-nav" class="greedy-nav">
-        <a class="site-title" href="{{ '/' | absolute_url }}"><img src="/assets/img/cropped-csl-logo-600-bordered.png" id="csl-logo"></a>
+        <a class="site-title" href="{{ '/' | absolute_url }}"><img src="/assets/img/cropped-csl-logo-600-bordered.png" alt="CSL logo" id="csl-logo"></a>
         <ul class="visible-links">
           {% for link in site.data.navigation.main %}
             {% if link.url contains 'http' %}

_layouts/home.html

@@ -21,14 +21,14 @@
     {% include multicolumn_list %}
   {% endif %}
   <div id="partners">
-    <h3>The Citation Style Language project has been sponsored by</h3>
+    <h2>The Citation Style Language project has been sponsored by</h2>
     <ul class="csl-partners">
-      <li><a href="https://www.zotero.org/"><img src="/assets/img/zotero-logo-128x128.png" height="64px" width="64px"><br>Zotero</a></li>
-      <li><a href="https://www.mendeley.com/"><img src="/assets/img/mendeley-logo-128x128.png" height="64px" width="64px"><br>Mendeley</a></li>
-      <li><a href="https://www.papersapp.com/"><img src="/assets/img/papers-logo-128x128.png" height="64px" width="64px"><br>Papers</a></li>
-      <li><a href="https://refworks.proquest.com/"><img src="/assets/img/refworks-logo-128x128.png" height="64px" width="64px"><br>RefWorks</a></li>
-      <li><a href="https://paperpile.com"><img src="/assets/img/paperpile-logo.png" height="64px" width="64px"><br>Paperpile</a></li>
-      <li><a href="https://www.bibcitation.com/"><img src="/assets/img/bibcitation-logo.png" height="64px" width="64px"><br>Bibcitation</a></li>
+      <li><a href="https://www.zotero.org/"><img src="/assets/img/zotero-logo-128x128.png" alt="Zotero logo" height="64px" width="64px"><br>Zotero</a></li>
+      <li><a href="https://www.mendeley.com/"><img src="/assets/img/mendeley-logo-128x128.png" alt="Mendeley logo" height="64px" width="64px"><br>Mendeley</a></li>
+      <li><a href="https://www.papersapp.com/"><img src="/assets/img/papers-logo-128x128.png" alt="Papers logo" height="64px" width="64px"><br>Papers</a></li>
+      <li><a href="https://refworks.proquest.com/"><img src="/assets/img/refworks-logo-128x128.png" alt="RefWorks logo" height="64px" width="64px"><br>RefWorks</a></li>
+      <li><a href="https://paperpile.com"><img src="/assets/img/paperpile-logo.png" alt ="Paperpile logo" height="64px" width="64px"><br>Paperpile</a></li>
+      <li><a href="https://www.bibcitation.com/"><img src="/assets/img/bibcitation-logo.png" alt="bibcitation logo" height="64px" width="64px"><br>Bibcitation</a></li>
     <ul>
   </div>
 </div>

_pages/index.md

@@ -143,9 +143,9 @@ multicolumn_list:
       - title: Docear
 ---
 
-<table style="margin: auto;max-width:768px;"><tr><td><img src="/assets/img/[email protected]" height="300px" width="200px"></td><td style="font-size:1.5em;">Proud <a href="https://openpublishingawards.org/recipients/citation-style-language/index.html">recipient</a> of one of the 2019 Open Publishing Awards in the Open Source Software category</td></tr></table>
+<table style="margin: auto;max-width:768px;"><tr><td><img src="/assets/img/[email protected]" alt="Open Publishing Awards 2019: Open Source Software logo" height="300px" width="200px"></td><td style="font-size:1.5em;">Proud <a href="https://openpublishingawards.org/recipients/citation-style-language/index.html">recipient</a> of one of the 2019 Open Publishing Awards in the Open Source Software category</td></tr></table>
 
-<h3 id="navigate">Navigating this site</h3>
+<h2 id="navigate">Navigating this site</h2>
 
 * **[Authors](/authors/)** &ndash; learn how to find and use our CSL citation styles
 * **[Publishers](/publishers/)** &ndash; learn how to create CSL styles for your journals and style guides and keep these styles up-to-date

_sass/minimal-mistakes/_footer.scss

@@ -15,7 +15,7 @@
   height: auto;
   /* sticky footer fix end */
   margin-top: 3em;
-  color: $muted-text-color;
+  color: $text-color;
   -webkit-animation: $intro-transition;
           animation: $intro-transition;
   -webkit-animation-delay: 0.45s;
@@ -45,7 +45,7 @@
   }
 
   .fa {
-    color: $muted-text-color;
+    color: $text-color;
   }
 }
 

_sass/minimal-mistakes/_variables.scss

@@ -47,7 +47,7 @@ $type-size-8                  : 0.625em !default;  // ~10px
    Colors
    ========================================================================== */
 
-$gray                         : #7a8288 !default;
+$gray                         : #6A7278 !default;
 $dark-gray                    : mix(#000, $gray, 40%) !default;
 $darker-gray                  : mix(#000, $gray, 60%) !default;
 $light-gray                   : mix(#fff, $gray, 50%) !default;
@@ -62,11 +62,11 @@ $border-color                 : $lighter-gray !default;
 $form-background-color        : $lighter-gray !default;
 $footer-background-color      : $lighter-gray !default;
 
-$primary-color                : #7a8288 !default;
+$primary-color                : #6A7278 !default;
 $success-color                : #62c462 !default;
 $warning-color                : #f89406 !default;
 $danger-color                 : #ee5f5b !default;
-$info-color                   : #52adc8 !default;
+$info-color                   : #0F7AC2 !default;
 
 /* YIQ color contrast */
 $yiq-contrasted-dark-default  : $dark-gray !default;