diff options
| -rw-r--r-- | content/assets/javascripts/docs.js | 18 | ||||
| -rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 357 | ||||
| -rw-r--r-- | content/index.erb | 34 | ||||
| -rw-r--r-- | layouts/header.html | 10 | ||||
| -rw-r--r-- | layouts/home.html | 2 |
5 files changed, 269 insertions, 152 deletions
diff --git a/content/assets/javascripts/docs.js b/content/assets/javascripts/docs.js index 327fe50a..47f1dd56 100644 --- a/content/assets/javascripts/docs.js +++ b/content/assets/javascripts/docs.js @@ -1,5 +1,23 @@ var NAV_INLINE_BREAKPOINT = 1100; +var landingHeaderBar = document.getElementById('landing-header-bar') +var headerLinks = document.getElementsByClassName('header-link') + +window.addEventListener('scroll', function() { + if (window.scrollY >= 100) { + landingHeaderBar.classList.add('scrolling-header') + for (var i = 0; i < headerLinks.length; i++) { + headerLinks[i].classList.add('scrolling-header-links') + } + } + else { + landingHeaderBar.classList.remove('scrolling-header') + for (var i = 0; i < headerLinks.length; i++) { + headerLinks[i].classList.remove('scrolling-header-links') + } + } +}); + var navtoggle = document.getElementById("docs-nav-toggle"); if (navtoggle) { navtoggle.addEventListener("click", toggleNavigation); diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index 0fd35173..d05bf539 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -101,7 +101,7 @@ pre { position: absolute; color: $white; background-color: $pre-code-color; - border: none; + border: 0; outline: 0; i { @@ -137,7 +137,7 @@ a > code { } hr { - border: none; + border: 0; border-top: 1px solid $hr-border-color; } @@ -337,134 +337,33 @@ li { } } -.header { - z-index: 1; - position: relative; - width: 100%; - padding: 20px 60px; - text-align: left; - display: flex; - justify-content: space-between; - align-items: center; - white-space: nowrap; - font-size: 1.1em; - - a { - color: $color-white; - cursor: pointer; - } - - a:hover { - opacity: .8; - color: $color-white; - } - - p { - margin: 0; - } - - .logo { - height: 40px; - margin-right: 6px; - } - - .logo-container:hover { - color: $color-white; - } - - .nav-item { - padding: 12px 20px; - margin-right: 6px; - text-align: center; - } +.scrolling-header { + background: $color-white; + border-bottom: 1px solid $color-gray-extra-light; + color: $black; + padding: 6px 60px !important; @media all and (max-width: $mobile-width) { - height: auto; - padding-left: 5px; + padding: 10px !important; } - ul { - text-align: right; - list-style-type: none; - display: inline-block; +} - @media all and (max-width: $mobile-width) { - display: none; - } - } +.header-link { + color: $color-white; @media all and (max-width: $mobile-width) { - &.active { - display: block; - - ul { - display: block; - text-align: left; - padding: 0; - width: 100%; - } - - li { - display: block; - padding: 10px 0; - } - } - } - - li { - display: inline-block; - line-height: 20px; - margin: 0 10px; - vertical-align: middle; + font-size: .8em; } - input { - box-sizing: content-box; - border: 1px solid $search-border; - border-radius: $border-radius; - background-color: $white; - -webkit-appearance: none; - padding: 7px 11px 7px 28px; - margin: -20; - width: 190px; - background-image: url("<%= @items['/assets/images/icon_search.svg'].path %>"); - background-repeat: no-repeat; - background-size: 16px; - background-position: 7px 8px; - - @media(max-width:1099px) { - width: 130px; - } - } - - .nav-container { - margin: auto 0; - display: flex; - } - - .nav-toggle { - display: none; - - @media all and (max-width: $mobile-width) { - display: inline-block; - position: absolute; - top: 15px; - right: 15px; - } - } - - // Override bootstrap - .nav > li > a { - padding: 0 10px; - text-decoration: none; - } +} - // Override bootstrap - .nav > li > a:focus, .nav > li > a:hover { - text-decoration: none; - background-color: transparent; - } +.scrolling-header-links { + color: $black !important; +} +.scrolling-header-links:hover { + color: $black !important; } // Styles for breadcrumbs navigation @@ -541,6 +440,7 @@ li { border-radius: $border-radius; font-size: 18px; line-height: inherit; + outline: 0; } img { @@ -550,6 +450,7 @@ li { h1 { text-align: center; letter-spacing: normal; + white-space: nowrap; span { margin-left: 8px; @@ -557,6 +458,13 @@ li { } + @media all and (max-width: $mobile-width) { + h1 { + font-size: 22px; + transform: translateY(20px); + } + } + } h1 { @@ -586,23 +494,173 @@ li { opacity: .8; } -} + input:focus { + box-shadow: 0 10px 20px rgba(0,0,0,.2); + } + + } .docsearch { box-sizing: content-box; position: relative; padding: 12px; padding-left: 40px; - border: none; + border: 0; color: $black; + width: 500px; + min-width: 500px; + + @media all and (max-width: $mobile-width) { + min-width: 300px; + width: 300px; + } + } + + .header { + z-index: 1000; + position: fixed; + width: 100%; + padding: 20px 60px; + text-align: left; + display: flex; + justify-content: space-between; + align-items: center; + white-space: nowrap; + font-size: 1.1em; + transition: .2s cubic-bezier(0, 0, 0, 1); + + a { + color: $color-white; + cursor: pointer; + } + + a:hover { + opacity: .8; + color: $color-white; + } + + p { + margin: 0; + } + + .logo { + height: 40px; + margin-right: 6px; + } + + .logo-container { + margin-right: auto; + } + + .logo-container:hover { + color: $color-white; + } + + .nav-item { + padding: 12px 20px; + margin-right: 6px; + text-align: center; + + @media all and (max-width: $mobile-width) { + font-size: .8em; + padding: 10px; + margin-right: 0; + } + + } + + @media all and (max-width: $mobile-width) { + height: auto; + padding: 10px; + } + + ul { + text-align: right; + list-style-type: none; + display: inline-block; + + @media all and (max-width: $mobile-width) { + display: none; + } + } + + @media all and (max-width: $mobile-width) { + &.active { + display: block; + + ul { + display: block; + text-align: left; + padding: 0; + width: 100%; + } + + li { + display: block; + padding: 10px 0; + } + } + } + + li { + display: inline-block; + line-height: 20px; + margin: 0 10px; + vertical-align: middle; + } + + input { + box-sizing: content-box; + border: 1px solid $search-border; + border-radius: $border-radius; + background-color: $white; + -webkit-appearance: none; + padding: 7px 11px 7px 28px; + margin: -20; + width: 190px; + background-image: url("<%= @items['/assets/images/icon_search.svg'].path %>"); + background-repeat: no-repeat; + background-size: 16px; + background-position: 7px 8px; + + @media(max-width:1099px) { + width: 130px; + } + } - @media all and (min-width: $mobile-width) { - min-width: 500px; + .nav-container { + margin: auto 0; + display: flex; } + + .nav-toggle { + display: none; + + @media all and (max-width: $mobile-width) { + display: inline-block; + position: absolute; + top: 15px; + right: 15px; + } + } + + // Override bootstrap + .nav > li > a { + padding: 0 10px; + text-decoration: none; + } + + // Override bootstrap + .nav > li > a:focus, .nav > li > a:hover { + text-decoration: none; + background-color: transparent; + } + } + } -.topics { +.main-topics { position: relative; display: flex; flex-flow: row wrap; @@ -624,7 +682,8 @@ li { width: 100%; min-width: auto; flex: initial; - margin: 20px; + margin: 0; + margin-top: 20px; } a p, a:visited p { @@ -636,17 +695,22 @@ li { padding: 40px; img { - height: 80px; + height: 76px; margin: auto; margin-bottom: 20px; + transition: .2s cubic-bezier(0, 0, 0, 1); } h2 { border-bottom: 1px solid $hr-border-color; } + .topic-info { + transition: .2s cubic-bezier(0, 0, 0, 1); + } + @media all and (max-width: $mobile-width) { - padding: 0 15px 15px; + padding: 30px; } } @@ -669,6 +733,16 @@ li { } } } + + li:hover { + img { + transform: scale(1.05); + } + .topic-info { + transform: translateY(4px); + } + } + } // https://gitlab.com/gitlab-com/gitlab-docs/issues/107#note_36655246 @@ -841,10 +915,9 @@ li { // On a max-width of 768px @media (max-width: 768px) { .ds-dropdown-menu { - max-width: calc(100vw - 32px) !important; - min-width: calc(100vw - 32px) !important; - width: calc(100vw - 32px) !important; - margin-left: 16px !important; + max-width: 100% !important; + min-width: 350px !important; + width: 370px !important; } .algolia-docsearch-suggestion--content { width: 100% !important; @@ -893,6 +966,11 @@ li { .topic { color: $blog-color-text; width: 100%; + + @media all and (max-width: $mobile-width) { + margin-bottom: 20px; + } + } .topic:hover { @@ -902,6 +980,11 @@ li { .topic:not(:first-child) { margin-left: 40px; + + @media all and (max-width: $mobile-width) { + margin-left: 0px; + } + } h4 { @@ -909,13 +992,18 @@ li { color: $black; } + @media all and (max-width: $mobile-width) { + flex-wrap: wrap; + margin-top: 40px; + } + } .popular-topics { width: 100%; max-width: 1200px; margin: auto; - padding: 100px 20px; + padding: 100px 30px; padding-top: 0; padding-bottom: 160px; @@ -924,6 +1012,11 @@ li { color: $header-color; } + @media all and (max-width: $mobile-width) { + flex-wrap: wrap; + padding-bottom: 80px; + } + } .footer-link-title { diff --git a/content/index.erb b/content/index.erb index b32e8875..b1031991 100644 --- a/content/index.erb +++ b/content/index.erb @@ -33,31 +33,37 @@ title: GitLab Documentation </ul> </div> --> <div class="row"> - <ul class="topics"> + <ul class="main-topics"> <li> - <a href=""> + <a href="/ee"> <div class="wrapper flex-container flex-column"> <img src="/assets/images/docs-gitlab.svg" alt="gitlab line logo"> - <h2 itemprop="name">GitLab</h2> - <p>Browse user and administration documentation and guides for GitLab Community Edition, Enterprise Edition, and GitLab.com.</p> + <div class="topic-info"> + <h2 itemprop="name">GitLab</h2> + <p>Browse user and administration documentation and guides for GitLab Community Edition, Enterprise Edition, and GitLab.com.</p> + </div> </div> </a> </li> <li> - <a href=""> + <a href="/omnibus"> <div class="wrapper flex-container flex-column"> <img src="/assets/images/docs-omnibus.svg" alt="gitlab omnibus icon"> - <h2 itemprop="name">Omnibus</h2> - <p>Browse installation, configuration, maintenance, and troubleshooting documentation for Omnibus GitLab.</p> + <div class="topic-info"> + <h2 itemprop="name">Omnibus</h2> + <p>Browse installation, configuration, maintenance, and troubleshooting documentation for Omnibus GitLab.</p> + </div> </div> </a> </li> <li> - <a href=""> + <a href="/runner"> <div class="wrapper flex-container flex-column"> <img src="/assets/images/docs-runner.svg" alt="gitlab runner icon"> - <h2 itemprop="name">Runner</h2> - <p>Browse installation, configuration, maintenance, and troubleshooting documentation for GitLab Runner.</p> + <div class="topic-info"> + <h2 itemprop="name">Runner</h2> + <p>Browse installation, configuration, maintenance, and troubleshooting documentation for GitLab Runner.</p> + </div> </div> </a> </li> @@ -66,19 +72,19 @@ title: GitLab Documentation <div class="popular-topics"> <h1>Most popular topics</h1> <div class="topics-container flex-container"> - <a class="topic" href=""> + <a class="topic" href="/ee/ci/yaml"> <h4>CI/CD YAML reference</h4> <p>Learn how to configure gitlab-ci.yml for your project.</p> </a> - <a class="topic" href=""> + <a class="topic" href="/ee/api"> <h4>API</h4> <p>Automate GitLab via a simple and powerful API.</p> </a> - <a class="topic" href=""> + <a class="topic" href="/ee/ssh"> <h4>SSH</h4> <p>Learn how to create an SSH key pair and configure GitLab to authenticate via SSH from your local computer.</p> </a> - <a class="topic" href=""> + <a class="topic" href="ee/user/gitlab_com"> <h4>GitLab.com Settings</h4> <p>Information about the settings that are used on GitLab.com, like SSH keys fingerprints, shared Runners configuration, etc.</p> </a> diff --git a/layouts/header.html b/layouts/header.html index ee460b15..fd924a7f 100644 --- a/layouts/header.html +++ b/layouts/header.html @@ -1,16 +1,16 @@ -<div class="header"> - <a class="logo-container flex-container justify-center align-center" href="/"> +<div class="header" id="landing-header-bar"> + <a class="header-link logo-container flex-container justify-center align-center" href="/"> <img src="<%= @items['/assets/images/gitlab-logo.svg'].path %>" class="logo" /> <p>GitLab <strong>Docs</strong></p> </a> <nav class="nav-container"> - <a class="nav-item flex-container justify-center align-center" href=""> + <a class="header-link nav-item flex-container justify-center align-center" href=""> <p>GitLab</p> </a> - <a class="nav-item flex-container justify-center align-center" href=""> + <a class="header-link nav-item flex-container justify-center align-center" href=""> <p>Omnibus</p> </a> - <a class="nav-item flex-container justify-center align-center" href=""> + <a class="header-link nav-item flex-container justify-center align-center" href=""> <p>Runner</p> </a> </nav> diff --git a/layouts/home.html b/layouts/home.html index 34555f6d..33284da3 100644 --- a/layouts/home.html +++ b/layouts/home.html @@ -14,7 +14,7 @@ <meta itemprop="target" content="https://docs.gitlab.com/search/?q={q}"/> <div class="input-container"> <img src="/assets/images/icon_search.svg" alt="search-icon"> - <input itemprop="query-input" type="text" name="q" class="docsearch" placeholder="Find anything in our docs" required/> + <input itemprop="query-input" type="text" name="q" class="docsearch" placeholder="Find anything in our docs" autofocus required/> </div> <input type="submit" style="visibility: hidden; position:absolute;"/> </form> |