From ec420a385baed20446555cb75057182e246c3047 Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sun, 21 Jul 2019 16:55:34 +0200
Subject: [PATCH] Removed hardcoded styling from layout, improved aux nav

(cherry picked from commit fd3c68cd1a39e059180c35c1d56ffa33ef4dfde4)
---
 _layouts/default.html | 20 +++++++++++---------
 _sass/layout.scss     |  5 ++++-
 _sass/navigation.scss | 18 ++++++++++++++++++
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 8bf647d..3e84703 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -12,13 +12,13 @@ layout: table_wrappers
     <div class="side-bar">
       <div class="site-header">
         <a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
-        <button id="site-nav-trigger" class="menu-button fs-3" data-text-toggle="Hide" type="button">Menu</button>
+        <button id="site-nav-trigger" class="site-button" data-text-toggle="Hide" type="button">Menu</button>
       </div>
-      <nav role="navigation" aria-label="Main navigation" id="site-nav" class="site-nav">
+      <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
         {% include nav.html %}
       </nav>
       <footer class="site-footer">
-        <p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
+        This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
       </footer>
     </div>
     <div id="main-wrap" class="main-wrap" tabindex="0">
@@ -34,17 +34,19 @@ layout: table_wrappers
             </div>
           {% endif %}
           {% if site.aux_links != nil %}
-            <ul class="list-style-none text-small aux-nav">
-              {% for link in site.aux_links %}
-                <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}"><a href="{{ link.last }}">{{ link.first }}</a></li>
-              {% endfor %}
-            </ul>
+            <nav aria-label="Auxiliary" class="aux-nav">
+              <ul class="aux-nav-list">
+                {% for link in site.aux_links %}
+                  <li class="aux-nav-list-item"><a href="{{ link.last }}">{{ link.first }}</a></li>
+                {% endfor %}
+              </ul>
+            </nav>
           {% endif %}
         </div>
         <div class="main-content-wrap">
           {% unless page.url == "/" %}
             {% if page.parent %}
-              <nav class="breadcrumb-nav">
+              <nav aria-label="Breadcrumb" class="breadcrumb-nav">
                 <ol class="breadcrumb-nav-list">
                   {% if page.grand_parent %}
                     <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 589f021..d8c8164 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -148,7 +148,7 @@
   @include fs-6;
 }
 
-.menu-button {
+.site-button {
   appearance: none;
   display: flex;
   height: 100%;
@@ -158,6 +158,7 @@
   text-transform: uppercase;
   background: transparent;
   border: 0;
+  @include fs-3;
 
   @include mq(md) {
     display: none;
@@ -185,6 +186,8 @@ body {
   left: 0;
   padding-top: $sp-4;
   padding-bottom: $sp-4;
+  color: $grey-dk-000;
+  @include fs-2;
 
   @include mq(md) {
     position: static;
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 2686350..ec529f0 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -81,9 +81,27 @@
 
 .aux-nav {
   align-self: center;
+
+  .aux-nav-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    @include fs-2;
+  }
+
+  .aux-nav-list-item {
+    display: inline-block;
+    margin-right: $sp-2;
+    @include fs-2;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }
 
 // Breadcrumb nav
+
 .breadcrumb-nav {
   @include mq(md) {
     margin-top: -$sp-4;