mirror of
https://github.com/inspec/inspec
synced 2024-11-23 13:13:22 +00:00
Edits to nav to support responsive
This commit is contained in:
Hannah Maddy
Christoph Hartmann
parent
d8590b6d9c
commit
1f294e5bfc
9 changed files with 112 additions and 81 deletions
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<progress value="0"></progress>
|
||||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue