template: Make article header position fixed.

templates/mark1/css/style.css

@@ -48,6 +48,12 @@
   src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('../fonts/opensans-bolditalic-1.10.woff2') format('woff2'), url('../fonts/opensans-bolditalic-1.10.woff') format('woff');
 }
 
+body {
+    margin: 0;
+    padding: 0;
+    background-color: rgb(255,255,255);
+}
+
 article.docs {
     margin: 0 auto;
     padding: 1.875rem 15px;
@@ -78,15 +84,35 @@ article.docs a:active {
     color: orange;
 }
 
-article.docs nav {
+article.docs header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
     width: 100%;
+    background-color: rgb(255,255,248);
+    background: linear-gradient(0deg, rgba(255,255,248,0), rgb(255,255,248) 30px);
+}
+
+article.docs header + h1 {
+    margin-top: 8.5rem;
+}
+
+article.docs nav {
+    margin: 0 auto;
+    padding: 15px 15px 45px;
+    width: 90%;
+    font-size: 0.6875rem;
+}
+
+article.docs nav .breadcrumbs {
+    margin: 1em 0 0;
 }
 
 article.docs nav .system-select,
 article.docs nav .system-select li {
     margin: 0;
     padding: 0;
-    font-size: 0.75rem;
     list-style-type: none;
 }
 
@@ -160,10 +186,6 @@ article.docs h6 {
     letter-spacing: -0.005em;
 }
 
-article.docs header .breadcrumbs {
-    font-size: 0.75rem;
-}
-
 article.docs footer p {
     font-style: italic;
 }
@@ -171,7 +193,6 @@ article.docs footer p {
 article.docs p,
 article.docs ol,
 article.docs ul,
-article.docs header .breadcrumbs,
 article.docs footer p,
 article.docs footer small {
     margin: 1.33333em 0;
@@ -201,6 +222,17 @@ article.docs figcaption {
     border-radius: 3px;
 }
 
+/* Wider than 350 */
+@media (min-width: 350px) {
+    article.docs header + h1 {
+        margin-top: 7.5rem;
+    }
+
+    article.docs nav {
+        font-size: 0.75rem;
+    }
+}
+
 /* Wider than 390 */
 @media (min-width: 390px) {
 
@@ -222,6 +254,19 @@ article.docs figcaption {
         max-width: 580px;
     }
 
+    article.docs header + h1 {
+        margin-top: 8.75rem;
+    }
+
+    article.docs nav {
+        padding: 30px 50px 60px;
+        width: 580px;
+    }
+
+    article.docs nav .breadcrumbs {
+        margin-top: 1.33333em;
+    }
+
     article.docs figure {
         display: inline-block;
         margin: 1.33333em 0;
@@ -249,6 +294,12 @@ article.docs figcaption {
         max-width: 680px;
     }
 
+    article.docs nav {
+        padding-left: 100px;
+        padding-right: 100px;
+        width: 680px;
+    }
+
     article.docs figure {
         max-width: 45%;
     }

templates/mark1/js/scripts.js

@@ -9,6 +9,7 @@ $(document).ready(function() {
     var system_select_all = $('.system-select-all');
 
     var system_switch = function(control, scroll){
+        var header = $('article.docs header').first();
         var system_lin = $('.system-lin');
         var system_mac = $('.system-mac');
         var system_win = $('.system-win');
@@ -29,7 +30,8 @@ $(document).ready(function() {
                     var cur_offset = $(window).scrollTop();
                     var new_offset = system_lin.first().offset();
                     if (typeof new_offset != 'undefined'){
-                        new_offset = new_offset.top;
+                        new_offset = new_offset.top - header.height();
+                        new_offset < 0 ? 0 : new_offset;
                     } else {
                         new_offset = 0;
                     }
@@ -52,7 +54,8 @@ $(document).ready(function() {
                     var cur_offset = $(window).scrollTop();
                     var new_offset = system_mac.first().offset();
                     if (typeof new_offset != 'undefined'){
-                        new_offset = new_offset.top;
+                        new_offset = new_offset.top - header.height();
+                        new_offset < 0 ? 0 : new_offset;
                     } else {
                         new_offset = 0;
                     }
@@ -75,7 +78,8 @@ $(document).ready(function() {
                     var cur_offset = $(window).scrollTop();
                     var new_offset = system_win.first().offset();
                     if (typeof new_offset != 'undefined'){
-                        new_offset = new_offset.top;
+                        new_offset = new_offset.top - header.height();
+                        new_offset < 0 ? 0 : new_offset;
                     } else {
                         new_offset = 0;
                     }

templates/mark1/nav.html

@@ -1,3 +1,3 @@
 <nav>
-    <div class="breadcrumbs"><a href="{{ base.relpath }}">Docs</a> > <a href="{{ base.relpath }}{{ document.language-code slug }}/">{{ document.language }}</a> > <a href="{{ base.relpath }}{{ document.language-code slug }}/{{ document.project-version slug }}/">{{ document.project }} {{ document.project-version }}</a> > {{ document.title }}</div>
+    <div class="breadcrumbs"><a href="{{ base.relpath }}">Docs</a>&nbsp;> <a href="{{ base.relpath }}{{ document.language-code slug }}/">{{ document.language }}</a>&nbsp;> <a href="{{ base.relpath }}{{ document.language-code slug }}/{{ document.project-version slug }}/">{{ document.project }} {{ document.project-version }}</a>&nbsp;> {{ document.title }}</div>
 </nav>

templates/mark1/template.yaml

@@ -8,6 +8,6 @@ Document: document.html
 Footer:   footer.html
 Redirect: redirect.html
 Fonts:    fonts/opensans-bold-1.10.woff, fonts/opensans-bold-1.10.woff2, fonts/opensans-bolditalic-1.10.woff, fonts/opensans-bolditalic-1.10.woff2, fonts/opensans-italic-1.10.woff, fonts/opensans-italic-1.10.woff2, fonts/opensans-regular-1.10.woff, fonts/opensans-regular-1.10.woff2, fonts/ropasans-italic-1.002.ttf, fonts/ropasans-italic-1.002.woff, fonts/ropasans-italic-1.002.woff2, fonts/ropasans-regular-1.002.ttf, fonts/ropasans-regular-1.002.woff, fonts/ropasans-regular-1.002.woff2
-Scripts:  js/vendor/jquery/jquery-2.2.3.min.js, js/vendor/js-cookie/js-cookie-2.1.1.min.js, js/vendor/featherlight/featherlight-1.4.0.min.js, js/scripts.js?201604210003
-Styles:   css/vendor/featherlight/featherlight-1.4.0.min.css, css/style.css?201604210002
+Scripts:  js/vendor/jquery/jquery-2.2.3.min.js, js/vendor/js-cookie/js-cookie-2.1.1.min.js, js/vendor/featherlight/featherlight-1.4.0.min.js, js/scripts.js?201604240001
+Styles:   css/vendor/featherlight/featherlight-1.4.0.min.css, css/style.css?201604240001
 ...