diff options
author | Sean Packham (GitLab) <sean@seanpackham.com> | 2017-05-19 16:09:16 +0300 |
---|---|---|
committer | Achilleas Pipinellis <axilleas@axilleas.me> | 2017-05-19 16:09:16 +0300 |
commit | 012b9fb3bed492946c490bda8a30d4c7481b99c7 (patch) | |
tree | 31eba4fb760c4c51fafb8cdd2798ddd758d9a3d1 /content | |
parent | 6bc62480609487d645465774850f3c533b5f0aae (diff) |
Tweaks to layouts and styles
Diffstat (limited to 'content')
-rw-r--r-- | content/assets/javascripts/docs.js | 31 | ||||
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 133 |
2 files changed, 125 insertions, 39 deletions
diff --git a/content/assets/javascripts/docs.js b/content/assets/javascripts/docs.js index 23fa38ff..4bf4e3ff 100644 --- a/content/assets/javascripts/docs.js +++ b/content/assets/javascripts/docs.js @@ -19,18 +19,39 @@ function toggleNavigation() { var sidebar = document.getElementById('doc-nav'); if(sidebar) { - sidebar.appendChild(nav[0]); - } + // if there is one h1 in the documentation + if(nav[0].children.length == 1) { + + // if there is a nested ul after the first anchor + if(nav[0].children[0].children.length > 1) { + var menu = nav[0].children[0].children[1]; + + // grab the h1's li anchor text + var title = document.createElement('h4'); + title.innerHTML = nav[0].children[0].children[0].innerHTML; + // add the text as a title + menu.insertBefore(title, menu.children[0]); + + sidebar.appendChild(menu); + } + + // remove what is left of the old navigation + nav[0].remove() + } + else { + nav[0].remove() + } + } - // float the main content + // main content has-toc var main = document.querySelectorAll('.main.class'); if (main[0] && main[0].classList) { - main[0].classList.add('float-left'); + main[0].classList.add('has-toc'); } else { - main[0].className += ' float-left'; + main[0].className += ' has-toc'; } } })(); diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index 54cac21b..da96093c 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -381,7 +381,7 @@ h6 code { } // ToC styles -.breadcrumbs + ul, .doc-nav > ul { +.breadcrumbs + ul, .doc-nav > ul, .quick-nav ul { padding: 20px; background: $body-background-color; @@ -399,23 +399,25 @@ h6 code { } } -.doc-nav { - float: left; - max-width: 350px; +.doc-nav, .quick-nav { + h4 { + padding-bottom: 5px; + border-bottom: solid 1px $h1-border-bottom; + } } .clear { clear: both; } -@media(max-width:1300px) { +// not wide enough to show quick nav and toc +@media(max-width:1099px) { .doc-nav { - float: none; margin: 0 auto; padding: 40px 40px 0; - max-width: 900px; - box-shadow: 0 3px 3px $main-box-shadow; background: $white; + width: inherit; + max-width: 900px; } .doc-nav > ul { @@ -424,39 +426,101 @@ h6 code { margin: 0; } - .float-left { + .main.class { float: none; + width: inherit; + margin: 0 auto; + max-width: 900px; + } + + .quick-nav { + display: none; } } -@media(min-width:1250px) { + +// wide enough to show toc but not quick nav +@media(min-width:1100px) { .header { - position: fixed; - top: 0; + position: fixed; + top: 0; left: 0; z-index: 1; } + .main.class { + padding-top: 75px; + } + .doc-nav { - position: fixed; - top: 0; - left: 0; + position: fixed; + top: 0; + right: 0; padding-top: 55px; overflow-y: scroll; height: 100%; } - .main.class { - margin-left: 350px; - padding-top: 75px; + .doc-nav ul ul { + padding-left: 25px; + } + + .doc-nav > ul .quick-nav ul { + margin: 0; + } + + .doc-nav, .quick-nav { + width: 25%; } } +@media(min-width:1100px) and (max-width:1500px) { + .quick-nav { + display: none; + } + + .doc-nav { + width: 30%; + max-width: 30%; + } + + .main.class.has-toc { + width: 70%; + max-width: 70%; + float: left; + } +} + + +// wide enough to show quick nav and toc +@media(min-width:1500px) { + .main.class.has-toc { + width: 50%; + margin-left: 25%; + max-width: 50%; + } + + .quick-nav { + position: fixed; + top: 0; + padding-top: 55px; + left: 0; + overflow-y: scroll; + height: 100%; + } + + .quick-nav ul ul { + padding-bottom: 0; + } -// if you want to center the nav and docs -// body > .wrapper { -// width: 1300px; -// margin: 0 auto; -// } + .quick-nav h4 { + margin-top: 25px; + } + + .quick-nav h4:first-child { + margin-top: 10px; + } + +} // Permalinks on header elements. .anchor { @@ -478,13 +542,14 @@ h6 code { background-color: $landing-background; .landing-header { - padding: 75px 35px 200px; + padding: 55px 0 150px; background-color: $landing-header-background; text-align: center; color: $white; + margin-bottom: -50px; input { - margin-top: 50px; + margin-top: 40px; border-radius: $border-radius; font-size: 20px; line-height: inherit; @@ -530,19 +595,19 @@ h6 code { position: relative; display: flex; flex-flow: row wrap; - top: -100px; - max-width: 1100px; + top: -30px; + max-width: 1350px; margin: auto; + padding-right: 40px; -webkit-padding-start: 0; li { display: inline-block; background-color: $white; border: 1px solid $topic-border; - border-radius: $border-radius; - margin: 15px; - flex: 1 0 300px; - min-width: 300px; + margin: 10px 10px 50px; + flex: 1 0 270px; + min-width: 270px; @media all and (max-width: $mobile-width) { width: 100%; @@ -557,7 +622,7 @@ h6 code { } .wrapper { - padding: 0 35px 40px; + padding: 0 30px 30px; @media all and (max-width: $mobile-width) { padding: 0 15px 15px; @@ -575,7 +640,7 @@ h6 code { h2 { height: 70px; - margin-bottom: 25px; + margin: 10px 0 25px; @media all and (max-width: $mobile-width) { height: auto; @@ -596,7 +661,7 @@ h6 code { color: $white; position: relative; margin: auto; - top: -28px; + top: -30px; } .topic-ce { |