From 1f294e5bfc849232cb60528cb637258c6e45f6ba Mon Sep 17 00:00:00 2001 From: Hannah Maddy Date: Mon, 9 Jan 2017 14:11:49 -0800 Subject: [PATCH] Edits to nav to support responsive --- www/source/community.html.slim | 8 ++--- www/source/javascripts/nav.js | 46 ++++++++---------------- www/source/layouts/_nav.slim | 48 ++++++++++++------------- www/source/stylesheets/_code.scss | 15 +++++--- www/source/stylesheets/_homepage.scss | 15 ++++---- www/source/stylesheets/_layout.scss | 4 +++ www/source/stylesheets/_nav.scss | 28 ++++++++++----- www/source/stylesheets/_sidebar.scss | 1 + www/source/stylesheets/_typography.scss | 28 +++++++++++++++ 9 files changed, 112 insertions(+), 81 deletions(-) diff --git a/www/source/community.html.slim b/www/source/community.html.slim index 56d2623e6..220cbf8dd 100644 --- a/www/source/community.html.slim +++ b/www/source/community.html.slim @@ -3,14 +3,14 @@ title: InSpec - Community description: This is where you interact with the InSpec open source community - contribute to the project, provide feedback and ask questions of other community members. --- -.row.margin-both-offset +.row.margin-both .columns.large-6.medium-6 - h2#icon-trigger data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground" + h2#icon-trigger.columns data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground" | Inspec is better with friends. br/ | Let’s build together. - hr.strict-left - h3.margin-top + hr.strict-left.margin-under + h3.clear | Join us on Slack and get answers fast P | Is something unclear or are you just feeling stuck? We're here to help keep you moving. Chat with us on Slack, so we can help you keep moving. diff --git a/www/source/javascripts/nav.js b/www/source/javascripts/nav.js index 699ab0b7e..55f099090 100644 --- a/www/source/javascripts/nav.js +++ b/www/source/javascripts/nav.js @@ -1,43 +1,27 @@ // Nav Scripts -const $navLinks = $('.main-nav--links'); -const $navToggle = $('.main-nav--toggle'); -const navBreakpoint = 730; // this should match $nav-breakpoint in _nav.scss -const $mainContent = $('#main-content'); +const navBreakpoint = 710; const $mainNav = $('#main-nav'); -const $mainNavCtas = $('#main-nav-ctas'); +const $navLinks = $('.main-nav--link-text'); +const $navToggle = $('.main-nav--toggle'); +const currentPagePath = location.pathname; +const navPageLinks = [ 'docs', 'tutorials', 'community']; +const stickyBreakpoint = 120; +const stickyVisibleBreakpoint = 160; + $navToggle.click(function() { - $(this).toggleClass('is-active'); $navLinks.slideToggle(); + $mainNav.toggleClass('t-purple'); }); -$(window).resize(function() { - if ($(window).width() >= navBreakpoint) { - $navToggle.removeClass('is-active'); - $navLinks.attr("style", ""); +for (var linkName in navPageLinks) { + var linkNamePath = navPageLinks[linkName], + currentPageRoot = currentPagePath.split('/')[1]; + if (currentPageRoot == linkNamePath) { + $('a.main-nav--link-text' + navPageLinks[linkName]).addClass('t-purple'); } -}); +}; -// toggles fixed nav position when the window is too short -var footerOffsetTop, navOffsetBottom; - -function toggleFixedNavPosition() { - navOffsetBottom = $mainNav.outerHeight() + $(window).scrollTop(); - footerOffsetTop = $("#main-footer").offset().top; - - $mainNav.toggleClass("is-fixed-bottom", (footerOffsetTop < navOffsetBottom) && $(window).height() <= 759) -} - -$(document).ready(function() { - $mainContent.css('min-height', $mainNav.outerHeight() - $('#main-nav-ctas').outerHeight()); - toggleFixedNavPosition(); -}); - -$(window).scroll(function() { - toggleFixedNavPosition(); -}); - -// // handle nav when global message exists diff --git a/www/source/layouts/_nav.slim b/www/source/layouts/_nav.slim index 02f506b22..33e2cbe4f 100644 --- a/www/source/layouts/_nav.slim +++ b/www/source/layouts/_nav.slim @@ -1,27 +1,27 @@ -nav#main-nav class="sidebar-layout-#{locals[:sidebar_layout]}" - - = partial "layouts/svg/nav-icon.svg" - - - if locals[:sidebar_layout] == 'docs' - li.main-nav--sidebar - = partial "layouts/sidebar" - - else +nav -nav#main-nav-ctas - a.main-nav--logo href="/" - img src="/images/inspec-by-chef-logo.svg" onerror="this.src='/images/inspec-by-chef-logo.png'" - a href="/tutorials" - span.main-nav--link-text Tutorials - a href="/docs" - span.main-nav--link-text Docs - a href="/community" - span.main-nav--link-text Community - a href="https://github.com/chef/inspec" - i.fa.fa-github-alt - span.main-nav--link-text Github - a.btn.try-demo href="#" Try the Demo - a.btn href="https://downloads.chef.io/inspec" - i.fa.fa-cloud-download - span.main-nav--link-text Download + #main-nav-ctas + a.main-nav--logo href="/" + img src="/images/inspec-by-chef-logo.svg" onerror="this.src='/images/inspec-by-chef-logo.png'" + ul + li + a href="/tutorials" + span.main-nav--link-text Tutorials + li + a href="/docs" + span.main-nav--link-text Docs + li + a href="/community" + span.main-nav--link-text Community + li + a href="https://github.com/chef/inspec" + i.fa.fa-github-alt + span.main-nav--link-text Github + li + a.btn.try-demo href="#" Try the Demo + li + a.btn href="https://downloads.chef.io/inspec" + i.fa.fa-cloud-download + span.main-nav--link-text Download diff --git a/www/source/stylesheets/_code.scss b/www/source/stylesheets/_code.scss index db67a006a..7b2c0bce2 100644 --- a/www/source/stylesheets/_code.scss +++ b/www/source/stylesheets/_code.scss @@ -1,8 +1,4 @@ -.code-example { - padding : $percent_sm; - border-radius : 7px; - background : $color_heading; -} +//default code { padding : 2%; @@ -11,6 +7,15 @@ code { background : $color_heading; } +// Container for code example + +.code-example { + padding : $percent_sm; + border-radius : 7px; + background : $color_heading; +} + + // Code Font Colors .code-demo { diff --git a/www/source/stylesheets/_homepage.scss b/www/source/stylesheets/_homepage.scss index 4cfb6a6e7..2579991e5 100644 --- a/www/source/stylesheets/_homepage.scss +++ b/www/source/stylesheets/_homepage.scss @@ -1,7 +1,7 @@ // Hero Banner - Home Page header { - height : 440px; + height : 360px; } #particles-js { @@ -20,28 +20,28 @@ header { position : absolute; width : 100%; max-width : 100%; - height : 100%; + height : 80%; overflow : hidden; background-color : transparent; } .h-top { // Container for homepage header art - height : 440px; + height : 360px; img { &:first-of-type { // Grid Art z-index : 10; position : absolute; - top : 70px; - height : 420px; + top : 100px; + height : 360px; } &:nth-child(3) { // Diamond height : 220px; - margin-top : 132px; + margin-top : 85px; } } @@ -49,7 +49,7 @@ header { // Heading z-index : 10; position : absolute; - margin-top : 358px; + margin-top : 290px; } } @@ -86,7 +86,6 @@ img.ball:nth-child(3) { .child-h { height : 180px; - margin-top : 81px; // plus header height } diff --git a/www/source/stylesheets/_layout.scss b/www/source/stylesheets/_layout.scss index 2a11add1e..be3b10fda 100644 --- a/www/source/stylesheets/_layout.scss +++ b/www/source/stylesheets/_layout.scss @@ -295,6 +295,7 @@ progress { color : $color_link; border : none; background-color : transparent; + z-index : 500; /* Dimensions */ /* Reset the appearance */ /* Get rid of the default border in Firefox/Opera. */ @@ -328,6 +329,9 @@ progress[value]::progress-value { //search bar + + + .searchbar{ display:flex; align-items: center diff --git a/www/source/stylesheets/_nav.scss b/www/source/stylesheets/_nav.scss index 72e0955c7..c50554a1e 100644 --- a/www/source/stylesheets/_nav.scss +++ b/www/source/stylesheets/_nav.scss @@ -3,13 +3,9 @@ $side-nav-width: 200px; $top-nav-height: 100px; $side-nav-padding-large: 10px; $side-nav-padding-small: 30px; - $nav-breakpoint: 730px; -nav { - z-index: 200; - box-shadow: 0 0 4px rgba(151, 110, 229, 0.1); -} + @mixin nav-large { @media (min-width: #{$nav-breakpoint}) { @@ -145,10 +141,7 @@ nav { @include nav-large { left: $side-nav-padding-large; } -} -.main-nav--link-text { - margin-left: 55px; @include nav-large { margin-left: 34px; @@ -166,7 +159,6 @@ nav { } a { - margin-left: 1.6em; color: $color_gray; } @@ -200,6 +192,24 @@ nav { } } +//Hannah's Styles' + +nav { + z-index: 200; + box-shadow: 0 0 4px rgba(151, 110, 229, 0.1); + height: 80px; +} + +nav ul { + margin-bottom: 0; +} + +nav li { + display: inline-block; + font-weight: 400; + line-height: 80px; +} + a.main-nav--logo { display: inline-block; width: 130px; diff --git a/www/source/stylesheets/_sidebar.scss b/www/source/stylesheets/_sidebar.scss index 7fb6cd4d1..e48296c56 100644 --- a/www/source/stylesheets/_sidebar.scss +++ b/www/source/stylesheets/_sidebar.scss @@ -20,6 +20,7 @@ ul.main-sidebar--links li:last-child { } // THIS IS STILL OLD STUFF - don't know what it is - hannah// + .gcsc-branding, .gsc-adBlock { display : none !important; diff --git a/www/source/stylesheets/_typography.scss b/www/source/stylesheets/_typography.scss index 55abc33fa..f874e4829 100644 --- a/www/source/stylesheets/_typography.scss +++ b/www/source/stylesheets/_typography.scss @@ -3,6 +3,10 @@ h1 { font-family : $heading-font; font-size : 2.25em; font-weight : 300; + //mobile + @media only screen and (max-width: 40.063em) { + font-size : 1.8em; + } } h2 { @@ -10,6 +14,10 @@ h2 { font-family : $heading-font; font-size : 1.75em; font-weight : 300; + //mobile + @media only screen and (max-width: 40.063em) { + font-size : 1.4em; + } } h3 { @@ -17,6 +25,10 @@ h3 { font-family : $heading-font; font-size : 1.25em; font-weight : 300; + //mobile + @media only screen and (max-width: 40.063em) { + font-size : 1.2em; + } } h4 { @@ -25,6 +37,20 @@ h4 { font-size : 1.25em; font-weight : 300; line-height : 1.4em; + //mobile + @media only screen and (max-width: 40.063em) { + font-size : 1.2em; + line-height : 1.6em; + } + +} + +p { + //mobile + @media only screen and (max-width: 40.063em) { + line-height : 1.6em; + } + } li, @@ -34,8 +60,10 @@ ul { color : $color_paragraph; font-family : $main-font; font-weight : 300; + list-style-type: none; } + small { @extend %uppercase; color : $color_gray;