mirror of
https://github.com/inspec/inspec
synced 2024-11-10 15:14:23 +00:00
Mobile Nav - cross browser support - general UI edits
This commit is contained in:
Hannah Maddy
Christoph Hartmann
parent
be65505e8e
commit
3317c3fc5d
19 changed files with 431 additions and 171 deletions
|
|
@ -3,9 +3,9 @@ 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
|
||||
.row.margin-both-offset
|
||||
.columns.large-6.medium-6
|
||||
h2#icon-trigger.columns data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
h2#icon-trigger data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
| Inspec is better with friends.
|
||||
br/
|
||||
| Let’s build together.
|
||||
|
|
@ -16,12 +16,13 @@ description: This is where you interact with the InSpec open source community -
|
|||
| 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.
|
||||
p
|
||||
| <a href="https://slack.com/">Sign in</a> to slack or request an invite below:
|
||||
|
||||
<form id="invite">
|
||||
<input type="email" name="email" placeholder="you@yourdomain.com" class="form-item">
|
||||
<button class="strict-r"><i class="fa fa-slack"></i>Invite Me!</button>
|
||||
</form>
|
||||
|
||||
.columns.large-6.medium-6.relative
|
||||
.columns.large-6.medium-6.relative.mobile-hide
|
||||
img.grid.strict-right src="/images/community/blue-web.svg" /
|
||||
img.ball src="/images/community/glow-ball.png" /
|
||||
img.ball.bright-animate src="/images/community/glow-ball.png" /
|
||||
|
|
@ -34,30 +35,30 @@ description: This is where you interact with the InSpec open source community -
|
|||
.section.purp-shade
|
||||
#particles-second
|
||||
canvas.particles-js-canvas-el
|
||||
.row.relative-top
|
||||
.large-6.medium-6.strict-center.column.margin-top-xl.margin-under
|
||||
.box-white.shadow
|
||||
img.icon-art src="/images/community/contribute.svg" /
|
||||
h3 Contribute to InSpec
|
||||
p
|
||||
| InSpec is an open source project created and supported by active and
|
||||
passionate users. If you would like to contribute, we would love to have you.
|
||||
br/
|
||||
a.btn.margin-top-xs href="https://github.com/chef/inspec" Start Contributing
|
||||
p
|
||||
|
||||
.large-6.medium-6.strict-center.column.margin-top-xl.margin-under
|
||||
.box-white.shadow
|
||||
img.icon-art src="/images/community/bugs.svg" /
|
||||
h3 Report Bugs and Request Features
|
||||
p
|
||||
| We rely on your feedback to improve InSpec. <br>Whether you found a bug
|
||||
or have a great idea for an improvement, join us on GitHub.
|
||||
br/
|
||||
a.btn.margin-top-xs href="https://github.com/chef/inspec/issues" Give Feedback
|
||||
p
|
||||
.row.relative-top.padding-top-xl.padding-under
|
||||
.large-6.medium-6.strict-center.column.margin-under-xs
|
||||
.box-white.shadow
|
||||
img.icon-art src="/images/community/contribute.svg" /
|
||||
h3 Contribute to InSpec
|
||||
p
|
||||
| InSpec is an open source project created and supported by active and
|
||||
passionate users. If you would like to contribute, we would love to have you.
|
||||
br/
|
||||
a.btn.margin-top-xs href="https://github.com/chef/inspec" Start Contributing
|
||||
p
|
||||
|
||||
.large-6.medium-6.strict-center.column
|
||||
.box-white.shadow
|
||||
img.icon-art src="/images/community/bugs.svg" /
|
||||
h3 Report Bugs and Request Features
|
||||
p
|
||||
| We rely on your feedback to improve InSpec. <br>Whether you found a bug
|
||||
or have a great idea for an improvement, join us on GitHub.
|
||||
br/
|
||||
a.btn.margin-top-xs href="https://github.com/chef/inspec/issues" Give Feedback
|
||||
p
|
||||
|
||||
//Old Twitter - Hannah
|
||||
/.row
|
||||
/ .icon.shadow
|
||||
/ img src="/images/circ-arrow.svg" /
|
||||
|
|
|
|||
|
|
@ -1,21 +1,26 @@
|
|||
|
||||
|
||||
/! animated banner
|
||||
header.child-h.blue-gradient
|
||||
header.child-h.blue-gradient.margin-top-offset
|
||||
#particles-second
|
||||
canvas.particles-js-canvas-el /
|
||||
.purp-shade
|
||||
.row.relative-top.searchbar
|
||||
column.columns.large-11.medium-11
|
||||
form.main-sidebar--search action="/docs/search/" method="get"
|
||||
input type="text" placeholder="Search Documentation" name="q"
|
||||
column.columns.large-1.medium-1
|
||||
.search.shadow
|
||||
img src="/images/community/search.svg" /
|
||||
|
||||
.column.columns
|
||||
|
||||
|
||||
form.main-sidebar--search action="/docs/search/" method="get"
|
||||
input type="text" placeholder="Search Documentation" name="q"
|
||||
|
||||
|
||||
button.search.shadow action="/docs/search/" method="get"
|
||||
img src="/images/community/search.svg"
|
||||
|
||||
|
||||
.row.margin-both
|
||||
|
||||
column.columns.large-3.medium-3#sidebar
|
||||
column.columns.large-3.medium-3#sidebar.mobile-hide
|
||||
- if locals[:sidebar_layout] == 'docs'
|
||||
ul.main-sidebar--links
|
||||
- sidebar_data(sidebar_layout).each do |item|
|
||||
|
|
@ -48,7 +53,7 @@ header.child-h.blue-gradient
|
|||
|
||||
.row
|
||||
.columns.medium-6
|
||||
.box-white-brdr.strict-center
|
||||
.box-white-brdr.strict-center.
|
||||
p Complete a short interactive demo
|
||||
a.btn.try-demo href="#" Try the Demo
|
||||
.columns.medium-6
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ title: InSpec - Audit and Test Framework
|
|||
---
|
||||
|
||||
/! animated banner
|
||||
header.blue-gradient
|
||||
header.blue-gradient.margin-top-offset
|
||||
.h-top.strict-center.purp-shade
|
||||
h1.columns.t-white.strict-center data-enllax-ratio=".1" data-enllax-type="foreground" InSpec is compliance as code
|
||||
img.grid-animate.strict-center style="opacity:0.8" src="/images/home/web.svg" /
|
||||
/! diamond image
|
||||
img.strict-center.bright-animate.3d-animate data-enllax-ratio=".3" data-enllax-type="foreground" src="/images/home/diamond.png" /
|
||||
img.strict-center.bright-animate.3d-animate src="/images/home/diamond.png" /
|
||||
/! canvas elements
|
||||
#particles-js
|
||||
canvas.particles-js-canvas-el /
|
||||
|
|
@ -19,9 +19,9 @@ header.blue-gradient
|
|||
|
||||
/! Second Content
|
||||
.row.margin-both
|
||||
.large-8.medium-8.columns data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
.large-9.medium-9.columns data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
h2 Automated testing, codified
|
||||
h4#icon-trigger
|
||||
p#icon-trigger
|
||||
| InSpec is an open-source testing framework for infrastructure with a human-readable language for specifying compliance, security and other policy requirements. Easily integrate automated tests that check for adherence to policy into any stage of your deployment pipeline.
|
||||
|
||||
/! Third Content
|
||||
|
|
@ -115,7 +115,7 @@ header.blue-gradient
|
|||
span.code-attribute.indent end
|
||||
br/
|
||||
span.code-attribute end
|
||||
a.btn.strict-right.t-white.try-demo Try the Demo
|
||||
a.btn.strict-right.t-white.try-demo.mobile-hide Try the Demo
|
||||
/! Next row
|
||||
.row
|
||||
.large-6.medium-6.columns.margin-under-xs data-enllax-ratio=".1" data-enllax-type="foreground"
|
||||
|
|
@ -178,4 +178,4 @@ header.blue-gradient
|
|||
| {should be_listening}
|
||||
br/
|
||||
span.code-attribute end
|
||||
a.btn.strict-right.t-white.try-demo Try the Demo
|
||||
a.btn.strict-right.t-white.try-demo.mobile-hide Try the Demo
|
||||
|
|
|
|||
6
www/source/javascripts/jquery.slicknav.min.js
vendored
Executable file
6
www/source/javascripts/jquery.slicknav.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
|
|
@ -1,26 +1,67 @@
|
|||
// Nav Scripts
|
||||
const navBreakpoint = 710;
|
||||
const $mainNav = $('#main-nav');
|
||||
const $navLinks = $('.main-nav--link-text');
|
||||
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 $mainNav = $('#main-nav');
|
||||
const $mainNavCtas = $('#main-nav-ctas');
|
||||
const currentPagePath = location.pathname;
|
||||
const navPageLinks = [ 'docs', 'tutorials', 'community'];
|
||||
const stickyBreakpoint = 120;
|
||||
const stickyVisibleBreakpoint = 160;
|
||||
|
||||
const navPageLinks = ['about', 'docs', 'tutorials', 'community'];
|
||||
|
||||
$navToggle.click(function() {
|
||||
$navLinks.slideToggle();
|
||||
$mainNav.toggleClass('t-purple');
|
||||
$(this).toggleClass('turn');
|
||||
$navLinks.slideToggle(100);
|
||||
});
|
||||
|
||||
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');
|
||||
$(window).resize(function() {
|
||||
if ($(window).width() >= navBreakpoint) {
|
||||
$navToggle.removeClass('is-active');
|
||||
$navLinks.attr("style", "");
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
//Sub Mobile Nav for docs
|
||||
|
||||
$(document).ready(function() {
|
||||
//Hide links for docs
|
||||
$('li.main-nav--link.docs--inside--link').hide();
|
||||
});
|
||||
|
||||
$('span.toggle').click(function() {
|
||||
$(this).toggleClass('turn');
|
||||
//hide links that are not docs
|
||||
$('.docs').toggleClass('t-blue');
|
||||
$('.hide-docs').toggleClass('hide');
|
||||
$('li.main-nav--link.docs--inside--link').slideToggle(100);
|
||||
});
|
||||
|
||||
// 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();
|
||||
});
|
||||
|
||||
///Logic to add color to actie page link --Not working WIP - Hannah
|
||||
//for (var linkName in navPageLinks) {
|
||||
// var linkNamePath = navPageLinks[linkName],
|
||||
// currentPagePath = currentPagePath.split('/')[1];
|
||||
// if (currentPagePath == linkNamePath) {
|
||||
// $('#main-nav-ctas a' + navPageLinks[linkName]).addClass('t-purple');
|
||||
// }
|
||||
//};
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,14 @@ footer#main-footer.dark-bg
|
|||
#dlmsg.strict-center
|
||||
img#hex src="/images/hexagon.svg" /
|
||||
h3.t-white.margin-top-xs See how it works in less than 10 minutes!
|
||||
|
||||
.row.margin-top-xs
|
||||
a.btn.t-white.try-demo href="#" Try the Demo
|
||||
a.btn.t-white.try-demo.hide-for-small-only href="#" Try the Demo
|
||||
a.btn.t-white href="https://downloads.chef.io/inspec"
|
||||
i.fa.fa-cloud-download
|
||||
span Download
|
||||
|
||||
.columns.large-4.medium-4
|
||||
.columns.large-4.medium-4.mobile-hide
|
||||
ul.footer--logos
|
||||
li
|
||||
a.footer--logo.inspec href="/"
|
||||
|
|
@ -28,5 +29,17 @@ footer#main-footer.dark-bg
|
|||
li
|
||||
a.footer--link href="/legal/privacy-policy" Privacy Policy
|
||||
|
||||
|
||||
//logos for mobile
|
||||
|
||||
.columns.large-4.medium-4.margin-both-xs.mobile-show
|
||||
ul.footer--logos
|
||||
li
|
||||
a.footer--logo.inspec href="/"
|
||||
img src="/images/inspec-by-chef-logo.png"
|
||||
li
|
||||
a.footer--logo.chef href="http://www.chef.io"
|
||||
img src="/images/chef-logo.png"
|
||||
|
||||
p.strict-center.clear
|
||||
small © Chef Software 2016
|
||||
|
|
|
|||
|
|
@ -1,27 +1,70 @@
|
|||
|
||||
nav
|
||||
nav#main-nav
|
||||
<progress value="0"></progress>
|
||||
|
||||
#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
|
||||
|
||||
i.fa.fa-bars.main-nav--toggle.strict-right.show-for-small-only
|
||||
|
||||
ul.main-nav--links
|
||||
li.main-nav--link.hide-docs
|
||||
a href="/tutorials"
|
||||
span.main-nav--link-text Tutorials
|
||||
li
|
||||
li.main-nav--link
|
||||
a href="/docs"
|
||||
span.main-nav--link-text Docs
|
||||
li
|
||||
span.main-nav--link-text.docs Docs
|
||||
span.fa.fa-angle-right.t-purple.toggle.mobile-show
|
||||
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/cli.html"
|
||||
span.main-nav--link-text inspec executable
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/profiles.html"
|
||||
span.main-nav--link-text Profiles
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/resources.html"
|
||||
span.main-nav--link-text Resources
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/matchers.html"
|
||||
span.main-nav--link-text Matchers
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/dsl_inspec.html"
|
||||
span.main-nav--link-text InSpec DSL
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/dsl_resource.html"
|
||||
span.main-nav--link-text Resource DSL
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/plugin_kitchen_inspec.html"
|
||||
span.main-nav--link-text kitchen-inspec
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/shell.html"
|
||||
span.main-nav--link-text inspec shell
|
||||
|
||||
li.main-nav--link.docs--inside--link
|
||||
a href="/docs/reference/ruby_usage.html"
|
||||
span.main-nav--link-text Ruby usage
|
||||
|
||||
|
||||
li.main-nav--link.hide-docs
|
||||
a href="/community"
|
||||
span.main-nav--link-text Community
|
||||
li
|
||||
li.main-nav--link.hide-docs
|
||||
a href="https://github.com/chef/inspec"
|
||||
i.fa.fa-github-alt
|
||||
span.main-nav--link-text Github
|
||||
li
|
||||
li.main-nav--link.mobile-hide
|
||||
a.btn.try-demo href="#" Try the Demo
|
||||
li
|
||||
li.main-nav--link.hide-docs
|
||||
a.btn href="https://downloads.chef.io/inspec"
|
||||
i.fa.fa-cloud-download
|
||||
span.main-nav--link-text Download
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ html
|
|||
|
||||
= partial "layouts/footer"
|
||||
|
||||
script src='https://s3.amazonaws.com/menumaker/menumaker.min.js'
|
||||
script src='scripts/inspec_tutorial.js'
|
||||
script src='dist/inspec_tutorial.js'
|
||||
div inspec-tutorial="true" class="inspec-tutorial" hidden="true"
|
||||
|
|
@ -36,11 +37,15 @@ html
|
|||
== javascript_include_tag "all"
|
||||
|
||||
javascript:
|
||||
|
||||
//initiate sticky sidebar from jquery.sticky.js
|
||||
|
||||
$('#sidebar').stick_in_parent();
|
||||
|
||||
javascript:
|
||||
|
||||
//Parallax Text
|
||||
|
||||
if (window.innerWidth > 760) { //don't parallax on tablet/mobile
|
||||
$(window).enllax(); //initiate parallax on larger screens
|
||||
}
|
||||
|
|
@ -115,6 +120,7 @@ html
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
javascript:
|
||||
|
||||
$(document).foundation();
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
svg.main-nav--toggle[xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 25.8 23.8" style="enable-background:new 0 0 25.8 23.8;" xml:space="preserve"]
|
||||
g
|
||||
path d="M0,19h25.8v4.7H0V19z M25.8,14.6H2.7V9.9h23.1V14.6z M25.8,4.7H0.1V0h25.7V4.7z"
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Licensing
|
||||
---
|
||||
.row.margin-both-offset
|
||||
.row.margin-both-offset.columns
|
||||
|
||||
h2 Legal/Licensing
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Inspec - Trademark Policy
|
||||
---
|
||||
.row.margin-both-offset
|
||||
.row.margin-both-offset.columns
|
||||
|
||||
h2 Chef Trademark Policy
|
||||
p
|
||||
|
|
|
|||
|
|
@ -1,10 +1,18 @@
|
|||
//default
|
||||
|
||||
code {
|
||||
padding : 2%;
|
||||
color : $color_white;
|
||||
color : $color_link;
|
||||
border-radius : 7px;
|
||||
background : $color_heading;
|
||||
background : $color_lt_blue;
|
||||
border-color: $color_lt_blue;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 10px;
|
||||
margin-bottom: 1em;
|
||||
background : $color_lt_blue;
|
||||
border: 1px solid rgba(65,151,181,0.3);
|
||||
color: $color_link
|
||||
}
|
||||
|
||||
// Container for code example
|
||||
|
|
|
|||
|
|
@ -14,6 +14,12 @@ footer > #dlmsg {
|
|||
|
||||
footer a.btn:last-child {
|
||||
margin-left : 1.6em;
|
||||
|
||||
//mobile
|
||||
@include nav-small{
|
||||
margin-left: initial;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
footer span {
|
||||
|
|
@ -22,6 +28,9 @@ footer span {
|
|||
|
||||
ul.footer--logos {
|
||||
margin-left: 0!important;
|
||||
@include nav-small {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
ul.footer--logos li {
|
||||
|
|
@ -39,6 +48,12 @@ ul.footer--logos li {
|
|||
width : 80px;
|
||||
padding-left : 1.6em; //same as default li margin
|
||||
border-left : 1px solid $color_white;
|
||||
|
||||
//mobile
|
||||
@include nav-small{
|
||||
border-left : initial;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.inspec {
|
||||
|
|
@ -51,6 +66,18 @@ ul.footer--links {
|
|||
@extend .no-bullet;
|
||||
display : inline-flex;
|
||||
margin-left : auto;
|
||||
//mobile
|
||||
@include nav-small{
|
||||
display:block;
|
||||
}
|
||||
|
||||
li {
|
||||
//mobile
|
||||
@include nav-small{
|
||||
margin-left: initial;
|
||||
margin-bottom: $percent_sm/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li a.footer--link {
|
||||
|
|
@ -63,8 +90,10 @@ li a.footer--link {
|
|||
&:hover {
|
||||
color : $color_purple;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Hex Animation
|
||||
|
||||
img#hex {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
|
||||
header {
|
||||
height : 360px;
|
||||
@include nav-small {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
#particles-js {
|
||||
|
|
@ -26,7 +29,7 @@ header {
|
|||
background-color : transparent;
|
||||
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
@include nav-small{
|
||||
height : 100%;
|
||||
}
|
||||
|
||||
|
|
@ -35,6 +38,9 @@ header {
|
|||
.h-top {
|
||||
// Container for homepage header art
|
||||
height : 360px; //same as header height
|
||||
@include nav-small {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
img {
|
||||
&:first-of-type {
|
||||
|
|
@ -43,6 +49,10 @@ header {
|
|||
position : absolute;
|
||||
top : 90px;
|
||||
height : 360px;
|
||||
@include nav-small {
|
||||
height: 300px;
|
||||
top : 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
|
|
@ -50,9 +60,9 @@ header {
|
|||
height : 220px;
|
||||
margin-top : 55px;
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
height : 200px;
|
||||
margin-top : 65px;
|
||||
@include nav-small{
|
||||
height : 190px;
|
||||
margin-top : 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -63,8 +73,8 @@ header {
|
|||
position : absolute;
|
||||
margin-top : 280px;
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
margin-top : 260px;
|
||||
@include nav-small{
|
||||
margin-top : 210px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -254,3 +264,13 @@ hr.first {
|
|||
transform : rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
//Rotate 90 degrees for nav-small
|
||||
|
||||
.turn {
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
text-align : right;
|
||||
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
@include nav-small{
|
||||
float: initial;
|
||||
margin : 0 auto;
|
||||
text-align : center;
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
margin-top : $percent_lg;
|
||||
margin-bottom : $percent_lg;
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
@include nav-small{
|
||||
margin-top : $percent_md;
|
||||
margin-bottom : $percent_md;
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
.margin-top-xl {
|
||||
margin-top : $percent_lg;
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
@include nav-small{
|
||||
margin-top : $percent_md;
|
||||
}
|
||||
}
|
||||
|
|
@ -64,11 +64,19 @@
|
|||
.margin-under-xl {
|
||||
margin-bottom : $percent_lg;
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
@include nav-small{
|
||||
margin-bottom : $percent_md;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-top-xl {
|
||||
padding-top : $percent_lg;
|
||||
//mobile
|
||||
@include nav-small{
|
||||
padding-top : $percent_md;
|
||||
}
|
||||
}
|
||||
|
||||
// default
|
||||
|
||||
.margin-both {
|
||||
|
|
@ -82,14 +90,18 @@
|
|||
}
|
||||
|
||||
.margin-both-offset {
|
||||
margin-top : $percent_md+80px;
|
||||
margin-top : $percent_md + 80px; // add header height
|
||||
margin-bottom : $percent_md;
|
||||
// add header height
|
||||
@include nav-small {
|
||||
margin-top : $percent_md + 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-top-offset {
|
||||
margin-top : $percent_md+80px;
|
||||
// add header height
|
||||
margin-top : 80px; // add header height
|
||||
@include nav-small {
|
||||
margin-top : 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-top {
|
||||
|
|
@ -100,6 +112,10 @@
|
|||
margin-bottom : $percent_md;
|
||||
}
|
||||
|
||||
.padding-under {
|
||||
padding-bottom : $percent_md;
|
||||
}
|
||||
|
||||
// small
|
||||
|
||||
.margin-both-xs {
|
||||
|
|
@ -129,6 +145,9 @@
|
|||
padding : 2em;
|
||||
border : 1px solid #d3e2e2;
|
||||
border-radius : 7px;
|
||||
@include nav-small {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Art
|
||||
|
|
@ -170,7 +189,7 @@
|
|||
-webkit-clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
@include nav-small{
|
||||
-webkit-clip-path: initial;
|
||||
clip-path: initial;
|
||||
}
|
||||
|
|
@ -255,10 +274,19 @@
|
|||
input.form-item {
|
||||
display : inline;
|
||||
width : 60%;
|
||||
@include nav-small {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
form > button {
|
||||
margin-left : 1em;
|
||||
@include nav-small {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
form > button > i {
|
||||
|
|
@ -358,12 +386,32 @@ progress[value]::progress-value {
|
|||
//search bar
|
||||
|
||||
|
||||
|
||||
.searchbar{
|
||||
display:flex;
|
||||
align-items: center
|
||||
align-items: center;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
//search form
|
||||
|
||||
form.main-sidebar--search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
//search input
|
||||
|
||||
form.main-sidebar--search input[type="text"] {
|
||||
width: 90%;
|
||||
display: inline;
|
||||
margin-top: 1.2em;
|
||||
|
||||
@include nav-small {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
//Search button
|
||||
|
||||
.search {
|
||||
|
|
@ -377,10 +425,15 @@ progress[value]::progress-value {
|
|||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
float: right;
|
||||
outline: none;
|
||||
|
||||
@include nav-small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display : block;
|
||||
height : auto;
|
||||
padding : 30%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,4 @@
|
|||
|
||||
$side-nav-width: 200px;
|
||||
$top-nav-height: 100px;
|
||||
$side-nav-padding-large: 10px;
|
||||
$side-nav-padding-small: 30px;
|
||||
$nav-breakpoint: 730px;
|
||||
|
||||
|
||||
|
||||
@mixin nav-large {
|
||||
@media (min-width: #{$nav-breakpoint}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nav-small {
|
||||
@media (max-width: $nav-breakpoint - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
#main-nav {
|
||||
position: fixed;
|
||||
|
|
@ -49,32 +30,7 @@ $nav-breakpoint: 730px;
|
|||
}
|
||||
}
|
||||
|
||||
.main-nav--toggle {
|
||||
display: none;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
path {
|
||||
fill: $color_gray;
|
||||
}
|
||||
|
||||
@include nav-small {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: $side-nav-padding-small;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
transform: rotate(-90deg);
|
||||
|
||||
path {
|
||||
fill: $color_link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav--link-ctas {
|
||||
padding: 9px 0 9px $side-nav-padding-small;
|
||||
|
|
@ -84,9 +40,6 @@ $nav-breakpoint: 730px;
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include nav-large {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav--logo {
|
||||
|
|
@ -96,8 +49,6 @@ $nav-breakpoint: 730px;
|
|||
}
|
||||
|
||||
.main-nav--links {
|
||||
border-top: 1px solid lighten($color_gray, 40%);
|
||||
margin-bottom: 0;
|
||||
@extend .no-bullet;
|
||||
|
||||
@include nav-small {
|
||||
|
|
@ -114,23 +65,7 @@ $nav-breakpoint: 730px;
|
|||
}
|
||||
}
|
||||
|
||||
.main-nav--link {
|
||||
position: relative;
|
||||
padding: 9px 0;
|
||||
border-bottom: 1px solid lighten($color_gray, 40%);
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
|
||||
& > a {
|
||||
color: $color_gray;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: darken($color_gray, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-nav--link-icon {
|
||||
position: absolute;
|
||||
|
|
@ -155,6 +90,12 @@ $nav-breakpoint: 730px;
|
|||
padding-right: 40px;
|
||||
box-shadow: 0 0 4px rgba(151, 110, 229, 0.1);
|
||||
|
||||
@include nav-small {
|
||||
padding-left: .9375rem;
|
||||
padding-right: .9375rem;
|
||||
box-shadow: initial;
|
||||
}
|
||||
|
||||
.main-nav--link-text {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
|
@ -163,9 +104,6 @@ $nav-breakpoint: 730px;
|
|||
color: $color_gray;
|
||||
}
|
||||
|
||||
a#main-nav--logo {
|
||||
margin-left: initial!important;
|
||||
}
|
||||
|
||||
a:hover, a.btn, a:active {
|
||||
color: $color_purple;
|
||||
|
|
@ -175,9 +113,6 @@ $nav-breakpoint: 730px;
|
|||
color: white;
|
||||
}
|
||||
|
||||
@include nav-small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include nav-large {
|
||||
position: fixed;
|
||||
|
|
@ -198,16 +133,64 @@ $nav-breakpoint: 730px;
|
|||
nav {
|
||||
z-index: 200;
|
||||
height: 80px;
|
||||
margin-bottom: 80px;
|
||||
|
||||
@include nav-small {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
line-height: 80px;
|
||||
|
||||
@include nav-small {
|
||||
line-height: 60px;
|
||||
clear:both;
|
||||
display:block;
|
||||
line-height: initial;
|
||||
padding-top: $percent_sm/2;
|
||||
padding-bottom: $percent_sm/2;
|
||||
border-bottom: 1px solid $color_lt_blue;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
nav li:first-child{
|
||||
@include nav-small {
|
||||
padding-top: $percent_sm;
|
||||
}
|
||||
}
|
||||
|
||||
nav li:last-child {
|
||||
@include nav-small {
|
||||
padding-top: $percent_sm;
|
||||
padding-bottom: $percent_sm;
|
||||
}
|
||||
}
|
||||
|
||||
#main-nav-ctas > i {
|
||||
display:none;
|
||||
color: $color_gray;
|
||||
|
||||
@include nav-small {
|
||||
display: block;
|
||||
font-size: 1.25em;
|
||||
float: right;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
span.toggle {
|
||||
font-size: 1.25em;
|
||||
float: right;
|
||||
|
||||
}
|
||||
|
||||
a.main-nav--logo {
|
||||
|
|
@ -215,4 +198,8 @@ a.main-nav--logo {
|
|||
width: 130px;
|
||||
float: left;
|
||||
margin-left: initial!important;
|
||||
|
||||
@include nav-small {
|
||||
margin-top: 0.8em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ $color_triangle_block : #41ade5;
|
|||
$color_purple_shade : rgba(151,110,229,0.4);
|
||||
$color_blue_shade : rgba(91, 201, 163, 1);
|
||||
$color_blue_shade_2 : rgba(58, 142, 206, 1);
|
||||
$color_lt_blue : #eaf8f9;
|
||||
|
||||
//fonts
|
||||
$heading-font : 'Roboto', sans-serif;
|
||||
|
|
@ -21,6 +22,27 @@ $percent_lg : 12%;
|
|||
$percent_md : 100px;
|
||||
$percent_sm : 40px;
|
||||
|
||||
//mixins
|
||||
|
||||
$side-nav-width: 200px;
|
||||
$top-nav-height: 100px;
|
||||
$side-nav-padding-large: 10px;
|
||||
$side-nav-padding-small: 30px;
|
||||
$nav-breakpoint: 780px;
|
||||
|
||||
|
||||
@mixin nav-large {
|
||||
@media (min-width: #{$nav-breakpoint}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nav-small {
|
||||
@media (max-width: $nav-breakpoint - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//shared styles
|
||||
%uppercase {
|
||||
text-transform : uppercase;
|
||||
|
|
@ -34,6 +56,32 @@ $percent_sm : 40px;
|
|||
transition : all .2s;
|
||||
}
|
||||
|
||||
//Hide/show div on mobile
|
||||
|
||||
.mobile-hide {
|
||||
display: initial;
|
||||
@include nav-small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-show {
|
||||
display: none;
|
||||
@include nav-small {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
//Hide Global Message
|
||||
|
||||
#global-message {
|
||||
display : none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ h1 {
|
|||
font-size : 2.25em;
|
||||
font-weight : 300;
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
@include nav-small{
|
||||
font-size : 1.8em;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@ h2 {
|
|||
font-size : 1.75em;
|
||||
font-weight : 300;
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
@include nav-small{
|
||||
font-size : 1.4em;
|
||||
}
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@ h3 {
|
|||
font-size : 1.25em;
|
||||
font-weight : 300;
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
@include nav-small{
|
||||
font-size : 1.2em;
|
||||
}
|
||||
}
|
||||
|
|
@ -38,7 +38,7 @@ h4 {
|
|||
font-weight : 300;
|
||||
line-height : 1.4em;
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
@include nav-small{
|
||||
font-size : 1.2em;
|
||||
line-height : 1.6em;
|
||||
}
|
||||
|
|
@ -47,7 +47,7 @@ h4 {
|
|||
|
||||
p {
|
||||
//mobile
|
||||
@media only screen and (max-width: 40.063em) {
|
||||
@include nav-small{
|
||||
line-height : 1.6em;
|
||||
}
|
||||
|
||||
|
|
@ -74,6 +74,10 @@ small {
|
|||
li {
|
||||
// indent for li
|
||||
margin-left : 1.6em;
|
||||
|
||||
@include nav-small {
|
||||
margin-left : initial;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: InSpec - Tutorials
|
|||
---
|
||||
|
||||
/! animated banner
|
||||
header.child-h.blue-gradient
|
||||
header.child-h.blue-gradient.margin-top-offset
|
||||
#particles-second
|
||||
canvas.particles-js-canvas-el /
|
||||
.purp-shade
|
||||
|
|
|
|||
Loading…
Reference in a new issue