Small visual improvement to captions in toctree (#665)

* Small visual improvement to captions in toctree

* Add new nav-caption internal var

* Use colored text and add margin

* Nav captions now have independent color

Co-Authored-By: Blendify <[email protected]>

* De saturate the bright blue captions

Co-Authored-By: Blendify <[email protected]>

Author: Blendify

sass/_theme_layout.sass

@@ -31,15 +31,16 @@ html
   width: $nav-desktop-width
 
   header, p.caption
+    color: $nav-caption
     height: $base-font-size * 2
     display: inline-block
     line-height: $base-font-size * 2
     padding: 0 $gutter
-    margin-bottom: 0
+    margin: $base-line-height / 2 0 0 0
     display: block
     font-weight: bold
     text-transform: uppercase
-    font-size: 80%
+    font-size: 85%
     white-space: nowrap
 
   ul

sass/_theme_variables.sass

@@ -51,6 +51,7 @@ $nav-link-color:                      $blue
 $nav-link-color-visited:              $purple
 $nav-link-color-hover:                lighten($nav-link-color, 6%) !default
 $nav-link-color-alt:                  hsl(33, 100%, 51%)
+$nav-caption:                         desaturate($blue, 15%)
 
 // Sidebar colors
 $sidebar-background-color:            $table-stripe-color