From d506bec6fa29bfd39f666f136a1ce8a8d9f11a33 Mon Sep 17 00:00:00 2001 From: Bradley Sepos Date: Sun, 24 Apr 2016 19:12:57 -0400 Subject: [PATCH] template: Make article header position fixed. --- templates/mark1/css/style.css | 65 +++++++++++++++++++++++++++++++---- templates/mark1/js/scripts.js | 10 ++++-- templates/mark1/nav.html | 2 +- templates/mark1/template.yaml | 4 +-- 4 files changed, 68 insertions(+), 13 deletions(-) diff --git a/templates/mark1/css/style.css b/templates/mark1/css/style.css index 2a90777e..8cf218e5 100644 --- a/templates/mark1/css/style.css +++ b/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%; } diff --git a/templates/mark1/js/scripts.js b/templates/mark1/js/scripts.js index 389ead29..967875cd 100644 --- a/templates/mark1/js/scripts.js +++ b/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; } diff --git a/templates/mark1/nav.html b/templates/mark1/nav.html index ece7aca7..7fcade6b 100644 --- a/templates/mark1/nav.html +++ b/templates/mark1/nav.html @@ -1,3 +1,3 @@ diff --git a/templates/mark1/template.yaml b/templates/mark1/template.yaml index 40261947..81a625d9 100644 --- a/templates/mark1/template.yaml +++ b/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 ...