Dark nav bar for accessibility

_config.yml

@@ -11,7 +11,7 @@ table_of_contents_collapsible: true
 post_end_promo: <i><b>Enjoyed this article? You'll like "<a href="https://jakeweeklee.substack.com">Jake Week Lee</a>", a newsletter of articles & online things!</b></i>
 google_analytics: G-HRJSZQJJ2G
 replace_read_time_with_word_count: true
-show_excerpts_html: true
+show_excerpts_html: false
 open_external_links_in_new_tab: true
 outdated_content_warning:
   warning_text: "⚠️ These release notes were last updated <b><DATE></b> and may be outdated."

_includes/header.html

@@ -2,7 +2,10 @@
   <div class="site-picker">
     <div class="wrapper">
       {%- for link in site.network -%}
-        <a href="{{ link.url }}" class="site-tile" style="background: {{ link.colour }}">{{ link.name }}</a>&nbsp; 
+        <a href="{{ link.url }}" class="site-tile" style="background: {{ link.colour }}">
+          <span class="darken"></span>
+          <span>{{ link.name }}</span>
+        </a>&nbsp; 
       {%- endfor -%}
     </div>
   </div>

assets/css/style.scss

@@ -210,11 +210,27 @@ h1:hover .octicon, h2:hover .octicon, h3:hover .octicon, h4:hover .octicon, h5:h
 }
 
 .site-tile {
+  position: relative;
   padding: 3.5px 10px 3px 10px;
   color: #ffffff !important;
   white-space: nowrap;
 }
 
+.site-tile .darken {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
+.site-tile span {
+  position: relative;
+  z-index: 2;
+}
+
 /* Outdated content warning */
 .outdated-warning {
   padding: 0.75rem 1rem;