theme: rework header UX #151

layouts/index.html

@@ -1,9 +1,4 @@
 {{- partial "header.html" . }}
-<span id="sidebar-toggle-span">
-    <a href="#" id="sidebar-toggle" title='{{ T "Navigation-toggle" }}' data-sidebar-toggle="">
-        <i class="fas fa-bars"></i>
-    </a>
-</span>
 
 {{if .Site.Home.Content }}
 {{.Site.Home.Content}}

layouts/partials/footer.html

@@ -4,17 +4,6 @@
         </main><!-- #body-inner -->
 {{- partial "custom-comments.html" . }}
       </div>
-      <div id="navigation">
-  {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
-  {{- if $showPrevNext }}
-    {{- with ($.Scratch.Get "relearnPrevPage") }}
-        <a class="nav nav-prev default-animation" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-left"></i></a>
-    {{- end}}
-    {{- with ($.Scratch.Get "relearnNextPage") }}
-        <a class="nav nav-next default-animation" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-right"></i></a>
-    {{- end }}
-  {{- end }}
-      </div>
     </div><!-- #body -->
     <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
       <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>

layouts/partials/header.html

@@ -29,15 +29,35 @@
     <div id="body" class="default-animation">
       <div id="overlay"></div>
       <div class="padding highlightable">
-        {{- if not .IsHome }}
         <div id="top-bar"><div>
-        {{- if and (or .IsPage .IsSection) .Site.Params.editURL }}
+        {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
+        {{- if $showPrevNext }}
+          <div class="navigation">
+          {{- if ($.Scratch.Get "relearnNextPage") }}
+            {{- with ($.Scratch.Get "relearnNextPage") }}
+              <a class="nav nav-next" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-right fa-fw"></i></a>
+            {{- end }}
+          {{- else }}
+              <span class="nav nav-next"><i class="fa fa-chevron-right fa-fw"></i></span>
+          {{- end }}
+          </div>
+          <div class="navigation">
+          {{- if ($.Scratch.Get "relearnPrevPage") }}
+            {{- with ($.Scratch.Get "relearnPrevPage") }}
+              <a class="nav nav-prev" href="{{.RelPermalink}}" title="{{.Title}}"><i class="fa fa-chevron-left fa-fw"></i></a>
+            {{- end}}
+          {{- else }}
+              <span class="nav nav-prev"><i class="fa fa-chevron-left fa-fw"></i></span>
+          {{- end}}
+          </div>
+        {{- end }}
+        {{- if .Site.Params.editURL }}
           {{- $File := .File }}
           {{- $Site := .Site }}
           {{- with $File.Path }}
           <div id="top-github-link">
             <a class="github-link" title='{{ T "Edit-this-page" }}' href="{{ $Site.Params.editURL }}{{ replace $File.Dir "\\" "/" }}{{ $File.LogicalName }}" target="blank">
-              <i class="fas fa-pencil"></i>
+              <i class="fas fa-pencil fa-fw"></i>
             </a>
           </div>
           {{- end }}
@@ -49,11 +69,11 @@
           <div id="breadcrumbs">
             <span id="sidebar-toggle-span">
               <a href="#" id="sidebar-toggle" title='{{ T "Navigation-toggle" }}' data-sidebar-toggle="">
-                <i class="fas fa-bars"></i>
+                <i class="fas fa-bars fa-fw"></i>
               </a>
             </span>
           {{- if $toc }}
-            <span id="toc-menu"><i class="fas fa-list-alt"></i></span>
+            <span id="toc-menu"><i class="fas fa-list-alt fa-fw"></i></span>
           {{- end }}
           {{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
           {{- if $showBreadcrumb }}
@@ -71,7 +91,6 @@
           {{- partial "toc.html" . }}
         {{- end }}
         </div></div>
-      {{- end }}
         <div id="head-tags">
 {{- partial "tags.html" . }}
         </div>

static/css/print.css

@@ -36,6 +36,7 @@ pre {
     padding-left: 0; /* for print, we want to align with the footer to ease the layout */
     color: #777;
 }
+.navigation,
 #top-github-link {
     /* we don't need this while printing */
     display: none;

static/css/theme.css

@@ -353,17 +353,22 @@ th {
 }
 
 #body .padding {
-    padding: 3rem 6rem;
+    padding: 0;
+}
+#body-inner {
+    padding: 0 3rem 4rem 3rem;
 }
 @media only all and (max-width: 59.938em) {
     #body .padding {
         position: static;
-        padding: 15px 3rem;
+    }
+    #body-inner {
+        padding: 0 2rem 15px 2rem;
     }
 }
 @media only all and (max-width: 47.938em) {
-    #body .padding {
+    #body-inner {
-        padding: 5px 1rem;
+        padding: 0 1rem 5px 1rem;
     }
 }
 
@@ -372,60 +377,6 @@ th {
     margin-top: -1rem;
 }
 
-@media only all and (max-width: 59.938em) {
-    #body #navigation {
-        display: table;
-        margin-right: 0 !important;
-        position: static;
-        width: 100%;
-    }
-}
-
-#body .nav {
-    bottom: 0;
-    cursor: pointer;
-    display: table;
-    font-size: 50px;
-    height: 100%;
-    position: fixed;
-    text-align: center;
-    top: 0;
-    width: 4rem;
-}
-#body .nav > i {
-    display: table-cell;
-    text-align: center;
-    vertical-align: middle;
-}
-@media only all and (max-width: 59.938em) {
-    #body .nav {
-        display: table-cell;
-        height: 100px;
-        line-height: 100px;
-        padding-top: 0;
-        position: static;
-        text-align: center;
-        top: auto;
-        width: 50%;
-    }
-    #body .nav > i {
-        display: inline-block;
-    }
-}
-
-#body .nav:hover {
-    background-color: rgba( 134, 134, 134, .066 );
-}
-
-#body .nav.nav-pref {
-    left: 0;
-}
-
-#body .nav.nav-next {
-    margin-right: 0px;
-    right: 0;
-}
-
 /* we limit width if we have large screens */
 @media screen and ( min-width: 1300px ){ /* #sidebar/width + ./max-width */
   #body #body-inner {
@@ -935,27 +886,40 @@ td {
 
 #top-bar > div {
     background-color: rgba( 134, 134, 134, .066 );
-    padding: 0 1rem;
     height: 100%;
 }
 
-#top-bar.is-sticky {
+.navigation,
-    box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
-}
-
 #top-github-link {
     display: block;
     float: right;
     z-index: 1;
 }
 
-#top-github-link,
+.nav,
-#body #breadcrumbs {
+.github-link {
+    border-left: thin solid rgba( 134, 134, 134, .333 );
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+span.nav i{
+    color: rgba( 134, 134, 134, .333 );
+}
+
+.navigation,
+#top-github-link {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
 }
 
+#toc-menu,
+#sidebar-toggle-span {
+  border-right: thin solid rgba( 134, 134, 134, .333 );
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 #body #breadcrumbs {
     display: inline-block;
     float: left;
@@ -963,29 +927,33 @@ td {
     line-height: 1.4;
     margin-bottom: 0;
     overflow: hidden;
-    padding-left: 0;
+    position: relative;
     text-overflow: ellipsis;
+    top: 50%;
+    transform: translateY(-50%);
     white-space: nowrap;
-    width: 70%;
+    width: calc(100% - 4*3.25rem);
 }
 
 #sidebar-toggle-span {
     display: none;
 }
-
+.progress {
+    left: 1rem;
+    top: 1rem;
+}
 @media only all and (max-width: 47.938em) {
     #sidebar-toggle-span {
         display: inline;
     }
-}
+    .progress {
-
+        left: 4.25rem;
-#body #breadcrumbs span {
+    }
-    padding: 0 0.1rem;
 }
 
 #body #breadcrumbs .links {
     display: inline;
-    padding: 0 0.1rem;
+    padding: 0 .75rem;
 }
 
 #body #breadcrumbs .links * {
@@ -1042,7 +1010,7 @@ a[aria-disabled="true"] {
         position: absolute;
         right: 0;
         top: 0;
-        z-index: 10;
+        z-index: 1000;
     }
 }
 
@@ -1224,6 +1192,7 @@ option {
     width: 100%;
 }
 
+#body .navigation a.highlight:after,
 #body #sidebar-toggle-span a.highlight:after,
 #body #top-github-link a.highlight:after {
     background-color: transparent;
@@ -1262,18 +1231,6 @@ option {
     font-weight: 500;
 }
 
-#toc-menu {
-  border-right: thin solid rgba( 134, 134, 134, .333 );
-  margin-right: 0.5rem !important;
-  padding-right: 1rem !important;
-}
-
-#sidebar-toggle-span {
-  border-right: thin solid rgba( 134, 134, 134, .333 );
-  margin-right: 1rem !important;
-  padding-right: 0.5rem !important;
-}
-
 .btn {
   background-image: none !important;
   border: 1px solid transparent !important;

static/js/relearn.js

@@ -375,10 +375,10 @@ jQuery(function() {
 
     // allow keyboard control for prev/next links
     jQuery(function() {
-        jQuery('.nav-prev').click(function(){
+        jQuery('a.nav-prev').click(function(){
             location.href = jQuery(this).attr('href');
         });
-        jQuery('.nav-next').click(function() {
+        jQuery('a.nav-next').click(function() {
             location.href = jQuery(this).attr('href');
         });
     });
@@ -393,12 +393,12 @@ jQuery(function() {
     jQuery(document).keydown(function(e) {
       // prev links - left arrow key
       if(e.which == '37') {
-        jQuery('.nav.nav-prev').click();
+        jQuery('a.nav-prev').click();
       }
 
       // next links - right arrow key
       if(e.which == '39') {
-        jQuery('.nav.nav-next').click();
+        jQuery('a.nav-next').click();
       }
     });