diff --git a/www/source/community.html.slim b/www/source/community.html.slim
index 220cbf8dd..34830882d 100644
--- a/www/source/community.html.slim
+++ b/www/source/community.html.slim
@@ -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
| Sign in to slack or request an invite below:
+
- .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.
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.
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" /
diff --git a/www/source/docs/index.html.slim b/www/source/docs/index.html.slim
index 732bffcd9..4c7a4b0a6 100644
--- a/www/source/docs/index.html.slim
+++ b/www/source/docs/index.html.slim
@@ -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
diff --git a/www/source/index.html.slim b/www/source/index.html.slim
index 55d0cf045..b178981f5 100644
--- a/www/source/index.html.slim
+++ b/www/source/index.html.slim
@@ -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
diff --git a/www/source/javascripts/jquery.slicknav.min.js b/www/source/javascripts/jquery.slicknav.min.js
new file mode 100755
index 000000000..598cbcb93
--- /dev/null
+++ b/www/source/javascripts/jquery.slicknav.min.js
@@ -0,0 +1,6 @@
+/*!
+ * SlickNav Responsive Mobile Menu v1.0.10
+ * (c) 2016 Josh Cope
+ * licensed under MIT
+ */
+!function(e,t,n){function a(t,n){this.element=t,this.settings=e.extend({},i,n),this.settings.duplicate||n.hasOwnProperty("removeIds")||(this.settings.removeIds=!1),this._defaults=i,this._name=s,this.init()}var i={label:"MENU",duplicate:!0,duration:200,easingOpen:"swing",easingClose:"swing",closedSymbol:"►",openedSymbol:"▼",prependTo:"body",appendTo:"",parentTag:"a",closeOnClick:!1,allowParentLinks:!1,nestedParentLinks:!0,showChildren:!1,removeIds:!0,removeClasses:!1,removeStyles:!1,brand:"",animations:"jquery",init:function(){},beforeOpen:function(){},beforeClose:function(){},afterOpen:function(){},afterClose:function(){}},s="slicknav",o="slicknav",l={DOWN:40,ENTER:13,ESCAPE:27,LEFT:37,RIGHT:39,SPACE:32,TAB:9,UP:38};a.prototype.init=function(){var n,a,i=this,s=e(this.element),r=this.settings;if(r.duplicate?i.mobileNav=s.clone():i.mobileNav=s,r.removeIds&&(i.mobileNav.removeAttr("id"),i.mobileNav.find("*").each(function(t,n){e(n).removeAttr("id")})),r.removeClasses&&(i.mobileNav.removeAttr("class"),i.mobileNav.find("*").each(function(t,n){e(n).removeAttr("class")})),r.removeStyles&&(i.mobileNav.removeAttr("style"),i.mobileNav.find("*").each(function(t,n){e(n).removeAttr("style")})),n=o+"_icon",""===r.label&&(n+=" "+o+"_no-text"),"a"==r.parentTag&&(r.parentTag='a href="#"'),i.mobileNav.attr("class",o+"_nav"),a=e(''),""!==r.brand){var c=e(''+r.brand+"
");e(a).append(c)}i.btn=e(["<"+r.parentTag+' aria-haspopup="true" role="button" tabindex="0" class="'+o+"_btn "+o+'_collapsed">','",'','','','',"",""].join("")),e(a).append(i.btn),""!==r.appendTo?e(r.appendTo).append(a):e(r.prependTo).prepend(a),a.append(i.mobileNav);var p=i.mobileNav.find("li");e(p).each(function(){var t=e(this),n={};if(n.children=t.children("ul").attr("role","menu"),t.data("menu",n),n.children.length>0){var a=t.contents(),s=!1,l=[];e(a).each(function(){return e(this).is("ul")?!1:(l.push(this),void(e(this).is("a")&&(s=!0)))});var c=e("<"+r.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+o+'_item"/>');if(r.allowParentLinks&&!r.nestedParentLinks&&s)e(l).wrapAll('').parent();else{var p=e(l).wrapAll(c).parent();p.addClass(o+"_row")}r.showChildren?t.addClass(o+"_open"):t.addClass(o+"_collapsed"),t.addClass(o+"_parent");var d=e(''+(r.showChildren?r.openedSymbol:r.closedSymbol)+"");r.allowParentLinks&&!r.nestedParentLinks&&s&&(d=d.wrap(c).parent()),e(l).last().after(d)}else 0===t.children().length&&t.addClass(o+"_txtnode");t.children("a").attr("role","menuitem").click(function(t){r.closeOnClick&&!e(t.target).parent().closest("li").hasClass(o+"_parent")&&e(i.btn).click()}),r.closeOnClick&&r.allowParentLinks&&(t.children("a").children("a").click(function(t){e(i.btn).click()}),t.find("."+o+"_parent-link a:not(."+o+"_item)").click(function(t){e(i.btn).click()}))}),e(p).each(function(){var t=e(this).data("menu");r.showChildren||i._visibilityToggle(t.children,null,!1,null,!0)}),i._visibilityToggle(i.mobileNav,null,!1,"init",!0),i.mobileNav.attr("role","menu"),e(t).mousedown(function(){i._outlines(!1)}),e(t).keyup(function(){i._outlines(!0)}),e(i.btn).click(function(e){e.preventDefault(),i._menuToggle()}),i.mobileNav.on("click","."+o+"_item",function(t){t.preventDefault(),i._itemClick(e(this))}),e(i.btn).keydown(function(t){var n=t||event;switch(n.keyCode){case l.ENTER:case l.SPACE:case l.DOWN:t.preventDefault(),n.keyCode===l.DOWN&&e(i.btn).hasClass(o+"_open")||i._menuToggle(),e(i.btn).next().find('[role="menuitem"]').first().focus()}}),i.mobileNav.on("keydown","."+o+"_item",function(t){var n=t||event;switch(n.keyCode){case l.ENTER:t.preventDefault(),i._itemClick(e(t.target));break;case l.RIGHT:t.preventDefault(),e(t.target).parent().hasClass(o+"_collapsed")&&i._itemClick(e(t.target)),e(t.target).next().find('[role="menuitem"]').first().focus()}}),i.mobileNav.on("keydown",'[role="menuitem"]',function(t){var n=t||event;switch(n.keyCode){case l.DOWN:t.preventDefault();var a=e(t.target).parent().parent().children().children('[role="menuitem"]:visible'),s=a.index(t.target),r=s+1;a.length<=r&&(r=0);var c=a.eq(r);c.focus();break;case l.UP:t.preventDefault();var a=e(t.target).parent().parent().children().children('[role="menuitem"]:visible'),s=a.index(t.target),c=a.eq(s-1);c.focus();break;case l.LEFT:if(t.preventDefault(),e(t.target).parent().parent().parent().hasClass(o+"_open")){var p=e(t.target).parent().parent().prev();p.focus(),i._itemClick(p)}else e(t.target).parent().parent().hasClass(o+"_nav")&&(i._menuToggle(),e(i.btn).focus());break;case l.ESCAPE:t.preventDefault(),i._menuToggle(),e(i.btn).focus()}}),r.allowParentLinks&&r.nestedParentLinks&&e("."+o+"_item a").click(function(e){e.stopImmediatePropagation()})},a.prototype._menuToggle=function(e){var t=this,n=t.btn,a=t.mobileNav;n.hasClass(o+"_collapsed")?(n.removeClass(o+"_collapsed"),n.addClass(o+"_open")):(n.removeClass(o+"_open"),n.addClass(o+"_collapsed")),n.addClass(o+"_animating"),t._visibilityToggle(a,n.parent(),!0,n)},a.prototype._itemClick=function(e){var t=this,n=t.settings,a=e.data("menu");a||(a={},a.arrow=e.children("."+o+"_arrow"),a.ul=e.next("ul"),a.parent=e.parent(),a.parent.hasClass(o+"_parent-link")&&(a.parent=e.parent().parent(),a.ul=e.parent().next("ul")),e.data("menu",a)),a.parent.hasClass(o+"_collapsed")?(a.arrow.html(n.openedSymbol),a.parent.removeClass(o+"_collapsed"),a.parent.addClass(o+"_open"),a.parent.addClass(o+"_animating"),t._visibilityToggle(a.ul,a.parent,!0,e)):(a.arrow.html(n.closedSymbol),a.parent.addClass(o+"_collapsed"),a.parent.removeClass(o+"_open"),a.parent.addClass(o+"_animating"),t._visibilityToggle(a.ul,a.parent,!0,e))},a.prototype._visibilityToggle=function(t,n,a,i,s){function l(t,n){e(t).removeClass(o+"_animating"),e(n).removeClass(o+"_animating"),s||p.afterOpen(t)}function r(n,a){t.attr("aria-hidden","true"),d.attr("tabindex","-1"),c._setVisAttr(t,!0),t.hide(),e(n).removeClass(o+"_animating"),e(a).removeClass(o+"_animating"),s?"init"==n&&p.init():p.afterClose(n)}var c=this,p=c.settings,d=c._getActionItems(t),u=0;a&&(u=p.duration),t.hasClass(o+"_hidden")?(t.removeClass(o+"_hidden"),s||p.beforeOpen(i),"jquery"===p.animations?t.stop(!0,!0).slideDown(u,p.easingOpen,function(){l(i,n)}):"velocity"===p.animations&&t.velocity("finish").velocity("slideDown",{duration:u,easing:p.easingOpen,complete:function(){l(i,n)}}),t.attr("aria-hidden","false"),d.attr("tabindex","0"),c._setVisAttr(t,!1)):(t.addClass(o+"_hidden"),s||p.beforeClose(i),"jquery"===p.animations?t.stop(!0,!0).slideUp(u,this.settings.easingClose,function(){r(i,n)}):"velocity"===p.animations&&t.velocity("finish").velocity("slideUp",{duration:u,easing:p.easingClose,complete:function(){r(i,n)}}))},a.prototype._setVisAttr=function(t,n){var a=this,i=t.children("li").children("ul").not("."+o+"_hidden");n?i.each(function(){var t=e(this);t.attr("aria-hidden","true");var i=a._getActionItems(t);i.attr("tabindex","-1"),a._setVisAttr(t,n)}):i.each(function(){var t=e(this);t.attr("aria-hidden","false");var i=a._getActionItems(t);i.attr("tabindex","0"),a._setVisAttr(t,n)})},a.prototype._getActionItems=function(e){var t=e.data("menu");if(!t){t={};var n=e.children("li"),a=n.find("a");t.links=a.add(n.find("."+o+"_item")),e.data("menu",t)}return t.links},a.prototype._outlines=function(t){t?e("."+o+"_item, ."+o+"_btn").css("outline",""):e("."+o+"_item, ."+o+"_btn").css("outline","none")},a.prototype.toggle=function(){var e=this;e._menuToggle()},a.prototype.open=function(){var e=this;e.btn.hasClass(o+"_collapsed")&&e._menuToggle()},a.prototype.close=function(){var e=this;e.btn.hasClass(o+"_open")&&e._menuToggle()},e.fn[s]=function(t){var n=arguments;if(void 0===t||"object"==typeof t)return this.each(function(){e.data(this,"plugin_"+s)||e.data(this,"plugin_"+s,new a(this,t))});if("string"==typeof t&&"_"!==t[0]&&"init"!==t){var i;return this.each(function(){var o=e.data(this,"plugin_"+s);o instanceof a&&"function"==typeof o[t]&&(i=o[t].apply(o,Array.prototype.slice.call(n,1)))}),void 0!==i?i:this}}}(jQuery,document,window);
\ No newline at end of file
diff --git a/www/source/javascripts/nav.js b/www/source/javascripts/nav.js
index 55f099090..2794b62fc 100644
--- a/www/source/javascripts/nav.js
+++ b/www/source/javascripts/nav.js
@@ -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');
+// }
+//};
diff --git a/www/source/layouts/_footer.slim b/www/source/layouts/_footer.slim
index 32f2e18bb..da73780d0 100644
--- a/www/source/layouts/_footer.slim
+++ b/www/source/layouts/_footer.slim
@@ -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
diff --git a/www/source/layouts/_nav.slim b/www/source/layouts/_nav.slim
index 33e2cbe4f..c75a66cc0 100644
--- a/www/source/layouts/_nav.slim
+++ b/www/source/layouts/_nav.slim
@@ -1,27 +1,70 @@
-nav
+nav#main-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'"
- 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
- a.btn href="https://downloads.chef.io/inspec"
+ 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
diff --git a/www/source/layouts/layout.slim b/www/source/layouts/layout.slim
index 9e37ee86a..91a819369 100644
--- a/www/source/layouts/layout.slim
+++ b/www/source/layouts/layout.slim
@@ -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();
diff --git a/www/source/layouts/svg/_nav-icon.svg.slim b/www/source/layouts/svg/_nav-icon.svg.slim
index ac58df433..e69de29bb 100644
--- a/www/source/layouts/svg/_nav-icon.svg.slim
+++ b/www/source/layouts/svg/_nav-icon.svg.slim
@@ -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"
diff --git a/www/source/legal/licensing.html.slim b/www/source/legal/licensing.html.slim
index 2031842bf..d550470d1 100644
--- a/www/source/legal/licensing.html.slim
+++ b/www/source/legal/licensing.html.slim
@@ -1,7 +1,7 @@
---
title: Licensing
---
-.row.margin-both-offset
+.row.margin-both-offset.columns
h2 Legal/Licensing
diff --git a/www/source/legal/trademark-policy.html.slim b/www/source/legal/trademark-policy.html.slim
index 37d527a1e..628bba6b6 100644
--- a/www/source/legal/trademark-policy.html.slim
+++ b/www/source/legal/trademark-policy.html.slim
@@ -1,7 +1,7 @@
---
title: Inspec - Trademark Policy
---
-.row.margin-both-offset
+.row.margin-both-offset.columns
h2 Chef Trademark Policy
p
diff --git a/www/source/stylesheets/_code.scss b/www/source/stylesheets/_code.scss
index 7b2c0bce2..648c505dc 100644
--- a/www/source/stylesheets/_code.scss
+++ b/www/source/stylesheets/_code.scss
@@ -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
diff --git a/www/source/stylesheets/_footer.scss b/www/source/stylesheets/_footer.scss
index 94d2d77c7..dab31e0f2 100644
--- a/www/source/stylesheets/_footer.scss
+++ b/www/source/stylesheets/_footer.scss
@@ -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 {
diff --git a/www/source/stylesheets/_homepage.scss b/www/source/stylesheets/_homepage.scss
index 279a85300..6962dc577 100644
--- a/www/source/stylesheets/_homepage.scss
+++ b/www/source/stylesheets/_homepage.scss
@@ -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);
+}
diff --git a/www/source/stylesheets/_layout.scss b/www/source/stylesheets/_layout.scss
index 8497a80fb..b21a4081e 100644
--- a/www/source/stylesheets/_layout.scss
+++ b/www/source/stylesheets/_layout.scss
@@ -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%;
}
}
diff --git a/www/source/stylesheets/_nav.scss b/www/source/stylesheets/_nav.scss
index f4917c400..0f3df182e 100644
--- a/www/source/stylesheets/_nav.scss
+++ b/www/source/stylesheets/_nav.scss
@@ -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;
+ }
}
diff --git a/www/source/stylesheets/_settings.scss b/www/source/stylesheets/_settings.scss
index 0b189c9c6..5c3c91c70 100644
--- a/www/source/stylesheets/_settings.scss
+++ b/www/source/stylesheets/_settings.scss
@@ -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;
}
diff --git a/www/source/stylesheets/_typography.scss b/www/source/stylesheets/_typography.scss
index f874e4829..89132e804 100644
--- a/www/source/stylesheets/_typography.scss
+++ b/www/source/stylesheets/_typography.scss
@@ -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 {
diff --git a/www/source/tutorials.html.slim b/www/source/tutorials.html.slim
index 89280b1cf..f3e40b50c 100644
--- a/www/source/tutorials.html.slim
+++ b/www/source/tutorials.html.slim
@@ -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