Address accessibility issues

_data/navigation.yaml

@@ -1,18 +1,23 @@
 top_nav:
   - title: Intro
     url: /
+    label: 'Link Intro 1 of 5'
 
   - title: Tags
     url: /pages/tags/alpha
+    label: 'Link Tags 2 of 5'
 
   - title: GitHub
     url: /pages/contributing/github
+    label: 'Link Github 3 of 5'
 
   - title: Help
     url: /pages/resources/help
+    label: 'Link Help 4 of 5'
 
   - title: Playground
     url: /play
+    label: 'Link Playground 5 of 5'
     primary: true
 
 docs_nav:

_includes/base/top_nav.html

@@ -25,7 +25,7 @@
       <!-- SEARCH BOX - END -->
       
       {% for link in site.data.navigation.top_nav %}
-        <a class="btn navbar-btn {% if link.primary %} navbar-btn-main {% endif %}" href="{{ link.url | absolute_url }}">
+        <a class="btn navbar-btn " aria-label="{{link.label}}" href="{{ link.url | absolute_url }}">
           {{ link.title }}
         </a>
       {% endfor %}

_sass/_mixins.scss

@@ -19,7 +19,12 @@
 .navbar-btn {
   color: $white !important;
   background-color: none !important;
+  &:focus {
+    color: $white !important;
+    background-color: $primary !important;
   }
+}
+
 
 .navbar-btn-main {
   color: $white !important;

_sass/_syntax.scss

@@ -4,14 +4,14 @@
 .highlight pre, pre, .highlight .hll { background-color: $light; border: 1px solid #ccc; padding: 6px 10px; border-radius: 3px; }
 
 .highlight .hll { background-color: #ffffcc }
-.highlight .c { color: #408080; font-style: italic } /* Comment */
+.highlight .c { color: #397272; font-style: italic } /* Comment */
 .highlight .err { border: 1px solid #FF0000 } /* Error */
 .highlight .k { color: #008000; font-weight: bold } /* Keyword */
 .highlight .o { color: #666666 } /* Operator */
-.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
+.highlight .cm { color: #397272; font-style: italic } /* Comment.Multiline */
 .highlight .cp { color: #BC7A00 } /* Comment.Preproc */
-.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
-.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
+.highlight .c1 { color: #397272; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #397272; font-style: italic } /* Comment.Special */
 .highlight .gd { color: #A00000 } /* Generic.Deleted */
 .highlight .ge { font-style: italic } /* Generic.Emph */
 .highlight .gr { color: #FF0000 } /* Generic.Error */

_sass/_variables.scss

@@ -8,7 +8,7 @@ $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
 $gray-400: #ced4da !default;
 $gray-500: #adb5bd !default;
-$gray-600: #868e96 !default;
+$gray-600: #666c72 !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
@@ -26,7 +26,7 @@ $teal: #20c997 !default;
 $cyan: #17a2b8 !default;
 
 $primary: #006931 !default;
-$logo-color: #1e9348 !default;
+$logo-color: #1a8440 !default;
 
 $secondary: $gray-600 !default;
 $success: $green !default;

_sass/bootstrap/_code.scss

@@ -8,6 +8,10 @@ code {
   a > & {
     color: inherit;
   }
+ 
+  span {
+    white-space: break-spaces;
+  }
 }
 
 // User input typically entered via keyboard