Mirrors/inspec
2
0
Fork 0
mirror of https://github.com/inspec/inspec synced 2024-11-10 15:14:23 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add main site navigation

Browse source 
Also includes integration of Font awesome icons.
This commit is contained in:
Maggie Walker 2016-09-20 09:22:12 -07:00
parent 6c8a5c392f
commit f79ec02efc
13 changed files with 318 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
www/source/images/inspec-by-chef-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.2 KiB

65
www/source/images/inspec-by-chef-logo.svg Normal file
View file

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 169.2 44" style="enable-background:new 0 0 169.2 44;" xml:space="preserve">
<g>
<g>
<g>
<path style="fill:#616569;" d="M169.1,37l-0.2,0.4l-0.3-0.4h-0.1v0.7h0.1v-0.5l0.2,0.4h0l0.3-0.4v0.5h0.1V37H169.1z M167.8,37
L167.8,37l0.2,0.1v0.6h0.1v-0.6h0.2V37H167.8z"/>
<path style="fill:#616569;" d="M137.2,40.5L137.2,40.5c0-2,1.5-3.6,3.6-3.6c1.3,0,2.1,0.4,2.7,1.1l-1,1.1
c-0.5-0.5-1.1-0.8-1.8-0.8c-1.2,0-2,1-2,2.1v0c0,1.2,0.8,2.2,2,2.2c0.8,0,1.3-0.3,1.8-0.8l1,1c-0.7,0.8-1.5,1.2-2.8,1.2
C138.7,44,137.2,42.5,137.2,40.5"/>
<polygon style="fill:#616569;" points="145.6,37 147.1,37 147.1,39.7 149.9,39.7 149.9,37 151.4,37 151.4,43.9 149.9,43.9
149.9,41.1 147.1,41.1 147.1,43.9 145.6,43.9 "/>
<polygon style="fill:#616569;" points="153.8,37 159.1,37 159.1,38.4 155.4,38.4 155.4,39.8 158.7,39.8 158.7,41.2 155.4,41.2
155.4,42.7 159.2,42.7 159.2,44 153.8,44 "/>
<polygon style="fill:#616569;" points="161.4,37 166.7,37 166.7,38.4 162.9,38.4 162.9,39.9 166.2,39.9 166.2,41.2 162.9,41.2
162.9,43.9 161.4,43.9 "/>
<path style="fill:#616569;" d="M132.6,44v-1.7l1.5-2.3h-0.9l-1,1.6h0l-1-1.6h-0.9l1.5,2.3V44H132.6z M128.9,40.8
c0.4,0,0.5,0.2,0.5,0.4c0,0.2-0.2,0.4-0.5,0.4h-1v-0.9H128.9z M129,42.4c0.3,0,0.5,0.2,0.5,0.5c0,0.3-0.1,0.5-0.5,0.5h-1.1v-1
H129z M129.2,44c0.8,0,1.2-0.5,1.2-1.1c0-0.5-0.3-0.8-0.7-1v0c0.3-0.2,0.5-0.5,0.5-0.9c0-0.6-0.4-1-1.1-1h-1.9v4H129.2z"/>
</g>
</g>
<g>
<g>
<g>
<ellipse transform="matrix(5.068119e-03 -1 1 5.068119e-03 -0.1059 41.4307)" style="fill:#4297B6;" cx="20.8" cy="20.8" rx="7" ry="7"/>
<path style="fill:#4297B6;" d="M41.5,20.9c-0.1,11.5-9.4,20.7-20.8,20.6c-4.7,0-9.1-1.6-12.6-4.3l6-5.9c1.9,1.2,4.2,2,6.6,2
c6.9,0,12.5-5.5,12.5-12.4c0-6.9-5.5-12.5-12.4-12.5C14,8.3,8.4,13.8,8.3,20.7c0,2.4,0.7,4.7,1.9,6.7l-6,5.9
C1.6,29.8,0,25.4,0,20.7C0.1,9.2,9.4,0,20.9,0C32.3,0.1,41.6,9.4,41.5,20.9z"/>
</g>
</g>
<g>
<path style="fill:#616569;" d="M49.3,32.2V8.5h4.7v23.7H49.3z"/>
<path style="fill:#616569;" d="M78.5,32.2L65.2,18.4v13.9h-4.7V8.5h1.5l13.1,13.3V8.5h4.7v23.8H78.5z"/>
<path style="fill:#616569;" d="M93,22.2c-0.8-0.2-2.2-0.6-3.6-1.5c-1.9-1.3-2.9-3.1-3.1-5.4c-0.1-1.9,0.5-3.6,1.7-4.8
c1.8-1.8,4.3-2.3,5.5-2.3c3.5,0,5.4,1.3,7.1,2.4l0.8,0.5l-2.5,4l-0.8-0.5c-1.5-1-2.5-1.6-4.6-1.6c-0.3,0-1.5,0.2-2.1,0.9
c-0.2,0.2-0.4,0.6-0.4,1.4c0,1.2,0.9,1.9,3.1,2.4c0.3,0.1,0.5,0.1,0.7,0.2c2.3,0.8,4,1.8,5.3,3.2c1.2,1.4,1.9,2.9,1.9,4.6
c0,1.7-0.7,3.4-1.9,4.7c-1.4,1.6-3.3,2.4-5.5,2.4c-1.1,0-2.5-0.1-4.2-0.6c-2.1-0.7-4-1.9-5.7-3.6l3.5-3.3
c2.5,2.7,5.3,2.7,6.4,2.7c2,0,2.6-1.8,2.6-2.4c0-1.3-1.5-2.5-3.9-3.3l-0.1,0L93,22.2z"/>
<path style="fill:#616569;" d="M115.6,8.5c3.9,0,7.1,3.2,7.1,7.2c0,3.9-3.2,7.1-7.1,7.1h-2.9v9.5h-4.7V8.5H115.6z M115.6,18
c1.3,0,2.4-1.1,2.4-2.4c0-1.3-1.1-2.4-2.4-2.4h-2.9V18H115.6z"/>
<g>
<path style="fill:#616569;" d="M143.6,13.2h-15.8V8.5h15.8V13.2z M127.7,17.6h13.1v4.7h-13.1V17.6z M127.7,27.5h15.7v4.7h-15.7
V27.5z"/>
</g>
<path style="fill:#616569;" d="M165.9,14.2c-4.6-3-11.6-0.2-11.6,6.2c0,6.7,7.4,9.4,11.8,6l3.1,3.5c-2.1,1.8-4.9,2.8-7.9,2.8
c-6.8,0-12.3-5.5-12.3-12.3s5.5-12.3,12.3-12.3c2.8,0,5.5,1,7.6,2.6L165.9,14.2z"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

3
www/source/javascripts/all.js
View file

@ -1,2 +1,3 @@
//= require vendor/jquery.min
//= require vendor/foundation.min
//= require vendor/foundation.min
//= require nav

16
www/source/javascripts/nav.js Normal file
View file

@ -0,0 +1,16 @@
// Nav Scripts
const $navLinks = $('.main-nav--links');
const $navToggle = $('.main-nav--toggle');
const navBreakpoint = 730; // this should match $nav-breakpoint in _nav.scss
$navToggle.click(function() {
$(this).toggleClass('is-active');
$navLinks.slideToggle();
});
$(window).resize(function() {
if ($(window).width() >= navBreakpoint) {
$navToggle.removeClass('is-active');
$navLinks.attr("style", "");
}
});

61
www/source/layouts/_nav.slim
View file

@ -1,19 +1,42 @@
#main-nav.site-container.top-nav
.container.clearfix
a href="/"
.logo
h1 InSpec
.nav.links-wrap
ul.links
li.link
a.overview href="/intro" Intro
li.link
a.docs href="/docs/index.html" Docs
li.link
a.tutorials href="/docs/tutorials.html" Tutorials
li.link
a.community href="/community" Community
li.link
a.community href="/under_construction" Download
li.link
a.community href="/demo" Try the Demo
nav#main-nav
a.main-nav--logo href="/"
img src="/images/inspec-by-chef-logo.svg" onerror="this.src='/images/inspec-by-chef-logo.png'"
= partial "layouts/svg/nav-icon.svg"
ul.main-nav--links
li.main-nav--link-ctas
a.button.transparent href="" Try the Demo
a.button.secondary href="" Download
li.main-nav--link
a href="/overview"
i.main-nav--link-icon.fa.fa-home
span.main-nav--link-text Overview
li.main-nav--link
a href="/tutorials"
i.main-nav--link-icon.fa.fa-flask
span.main-nav--link-text Tutorials
li.main-nav--link
a href=""
i.main-nav--link-icon.fa.fa-file-text-o
span.main-nav--link-text Docs
li.main-nav--link
a href="/community"
i.main-nav--link-icon.fa.fa-group
span.main-nav--link-text Community
li.main-nav--link
a href=""
i.main-nav--link-icon.fa.fa-download
span.main-nav--link-text Downloads
li.main-nav--link
a href=""
i.main-nav--link-icon.fa.fa-github
span.main-nav--link-text Github Project
li.main-nav--link
a href=""
i.main-nav--link-icon.fa.fa-code-fork
span.main-nav--link-text Contribute
nav#main-nav-ctas
a.button.transparent href="" Try the Demo
a.button.secondary href="" Download

2
www/source/layouts/layout.slim
View file

@ -14,7 +14,7 @@ html
body class="#{page_classes}"
= partial "layouts/nav"
#content-outer
main#main-content
== yield
== javascript_include_tag "all"

4
www/source/layouts/svg/_nav-icon.svg.slim Normal file
View file

@ -0,0 +1,4 @@
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"

12
www/source/stylesheets/_buttons.scss
View file

@ -10,6 +10,18 @@
border: 1px solid $inspec-blue;
}
&.transparent {
color: $inspec-grey;
background: transparent;
padding-left: 0;
padding-right: 0;
box-shadow: none;
&:hover {
color: darken($inspec-grey, 20%);
}
}
& + .button {
margin-left: 15px;
}

2
www/source/stylesheets/_fonts.scss
View file

@ -1,3 +1,5 @@
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";
@font-face {
font-family: 'Jaapokki';
src: url('/fonts/jaapokki-regular-webfont.eot');

18
www/source/stylesheets/_layout.scss Normal file
View file

@ -0,0 +1,18 @@
body {
max-width: 1200px;
margin: 0 auto;
font-family: $main-font;
}
#main-content {
margin-top: 64px;
@include nav-small {
padding: 0 $side-nav-padding-small;
}
@include nav-large {
padding-right: 10px;
margin: $top-nav-height 0 0 ($side-nav-width + 50px);
}
}

154
www/source/stylesheets/_nav.scss Normal file
View file

@ -0,0 +1,154 @@
$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;
top: 0;
width: 100%;
background: $white;
@include nav-large {
position: fixed;
z-index: 100;
width: $side-nav-width;
}
}
.main-nav--toggle {
display: none;
transition: all 0.3s ease;
path {
fill: $inspec-grey;
}
@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: $inspec-blue;
}
}
}
.main-nav--link-ctas {
padding: 9px 0 9px $side-nav-padding-small;
border-bottom: 1px solid lighten($inspec-grey, 40%);
& > .button {
margin-bottom: 0;
}
@include nav-large {
display: none;
}
}
.main-nav--logo {
display: block;
@include nav-small {
max-width: 130px;
margin: 15px 0 15px $side-nav-padding-small;
}
@include nav-large {
padding: 0 $side-nav-padding-large;
margin: 30px 0;
}
}
.main-nav--links {
border-top: 1px solid lighten($inspec-grey, 40%);
margin-bottom: 0;
@extend .no-bullet;
@include nav-small {
display: none;
}
}
.main-nav--link {
position: relative;
padding: 9px 0;
border-bottom: 1px solid lighten($inspec-grey, 40%);
text-transform: uppercase;
font-size: 14px;
& > a {
color: $inspec-grey;
&:hover,
&:focus,
&:active {
color: darken($inspec-grey, 15%);
}
}
}
.main-nav--link-icon {
position: absolute;
top: 13px;
left: $side-nav-padding-small;
font-size: 0.9em;
@include nav-large {
left: $side-nav-padding-large;
}
}
.main-nav--link-text {
margin-left: 55px;
@include nav-large {
margin-left: 34px;
}
}
#main-nav-ctas {
background: $white;
@include nav-small {
display: none;
}
@include nav-large {
position: fixed;
z-index: 90;
top: 0;
width: 100%;
max-width: 1200px;
padding: 30px 10px 30px 0;
text-align: right;
& > .button {
margin-bottom: 0;
}
}
}

4
www/source/stylesheets/_settings.scss
View file

@ -9,7 +9,3 @@ $white: #fff;
$heading-accent-font: 'Jaapokki Alternate', 'Avenir', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$heading-font: 'Jaapokki', 'Avenir', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$main-font: 'Avenir', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
body {
font-family: $main-font;
}

2
www/source/stylesheets/site.css.scss
View file

@ -3,3 +3,5 @@
@import "fonts";
@import "settings";
@import "buttons";
@import "nav";
@import "layout";