mirror of
https://github.com/inspec/inspec
synced 2024-11-14 00:47:10 +00:00
Merge pull request #1105 from chef/mw/styling-setup
Styling setup and main navigation
This commit is contained in:
Maggie Walker
GitHub
commit
725e0a1bc5
34 changed files with 410 additions and 522 deletions
|
|
@ -44,6 +44,7 @@ configure :build do
|
|||
activate :minify_javascript
|
||||
end
|
||||
|
||||
activate :sprockets
|
||||
activate :autoprefixer
|
||||
activate :directory_indexes
|
||||
set :trailing_slash, false
|
||||
|
|
|
|||
BIN
www/source/fonts/jaapokki-regular-webfont.eot
Executable file
BIN
www/source/fonts/jaapokki-regular-webfont.eot
Executable file
Binary file not shown.
BIN
www/source/fonts/jaapokki-regular-webfont.ttf
Executable file
BIN
www/source/fonts/jaapokki-regular-webfont.ttf
Executable file
Binary file not shown.
BIN
www/source/fonts/jaapokki-regular-webfont.woff
Executable file
BIN
www/source/fonts/jaapokki-regular-webfont.woff
Executable file
Binary file not shown.
BIN
www/source/fonts/jaapokki-regular-webfont.woff2
Executable file
BIN
www/source/fonts/jaapokki-regular-webfont.woff2
Executable file
Binary file not shown.
BIN
www/source/fonts/jaapokkisubtract-regular-webfont.eot
Executable file
BIN
www/source/fonts/jaapokkisubtract-regular-webfont.eot
Executable file
Binary file not shown.
BIN
www/source/fonts/jaapokkisubtract-regular-webfont.ttf
Executable file
BIN
www/source/fonts/jaapokkisubtract-regular-webfont.ttf
Executable file
Binary file not shown.
BIN
www/source/fonts/jaapokkisubtract-regular-webfont.woff
Executable file
BIN
www/source/fonts/jaapokkisubtract-regular-webfont.woff
Executable file
Binary file not shown.
BIN
www/source/fonts/jaapokkisubtract-regular-webfont.woff2
Executable file
BIN
www/source/fonts/jaapokkisubtract-regular-webfont.woff2
Executable file
Binary file not shown.
BIN
www/source/fonts/roboto-light-webfont.eot
Executable file
BIN
www/source/fonts/roboto-light-webfont.eot
Executable file
Binary file not shown.
BIN
www/source/fonts/roboto-light-webfont.ttf
Executable file
BIN
www/source/fonts/roboto-light-webfont.ttf
Executable file
Binary file not shown.
BIN
www/source/fonts/roboto-light-webfont.woff
Executable file
BIN
www/source/fonts/roboto-light-webfont.woff
Executable file
Binary file not shown.
BIN
www/source/fonts/roboto-light-webfont.woff2
Executable file
BIN
www/source/fonts/roboto-light-webfont.woff2
Executable file
Binary file not shown.
BIN
www/source/fonts/roboto-medium-webfont.eot
Executable file
BIN
www/source/fonts/roboto-medium-webfont.eot
Executable file
Binary file not shown.
BIN
www/source/fonts/roboto-medium-webfont.ttf
Executable file
BIN
www/source/fonts/roboto-medium-webfont.ttf
Executable file
Binary file not shown.
BIN
www/source/fonts/roboto-medium-webfont.woff
Executable file
BIN
www/source/fonts/roboto-medium-webfont.woff
Executable file
Binary file not shown.
BIN
www/source/fonts/roboto-medium-webfont.woff2
Executable file
BIN
www/source/fonts/roboto-medium-webfont.woff2
Executable file
Binary file not shown.
BIN
www/source/images/inspec-by-chef-logo.png
Normal file
BIN
www/source/images/inspec-by-chef-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
65
www/source/images/inspec-by-chef-logo.svg
Normal file
65
www/source/images/inspec-by-chef-logo.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -1 +1,3 @@
|
|||
//= require_tree .
|
||||
//= require vendor/jquery.min
|
||||
//= require vendor/foundation.min
|
||||
//= require nav
|
||||
16
www/source/javascripts/nav.js
Normal file
16
www/source/javascripts/nav.js
Normal 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", "");
|
||||
}
|
||||
});
|
||||
2
www/source/javascripts/vendor/foundation.min.js
vendored
Normal file
2
www/source/javascripts/vendor/foundation.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
www/source/javascripts/vendor/jquery.min.js
vendored
Normal file
8
www/source/javascripts/vendor/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -10,10 +10,13 @@ html
|
|||
link href='//fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'
|
||||
|
||||
== stylesheet_link_tag :site
|
||||
== javascript_include_tag "all"
|
||||
|
||||
body class="#{page_classes}"
|
||||
= partial "layouts/nav"
|
||||
|
||||
#content-outer
|
||||
main#main-content
|
||||
== yield
|
||||
|
||||
== javascript_include_tag "all"
|
||||
javascript:
|
||||
$(document).foundation();
|
||||
|
|
|
|||
4
www/source/layouts/svg/_nav-icon.svg.slim
Normal file
4
www/source/layouts/svg/_nav-icon.svg.slim
Normal 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"
|
||||
28
www/source/stylesheets/_buttons.scss
Normal file
28
www/source/stylesheets/_buttons.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.button {
|
||||
font-family: $heading-font;
|
||||
text-transform: uppercase;
|
||||
border-radius: 0;
|
||||
box-shadow: 3px 3px 0 0 $off-white;
|
||||
|
||||
&.primary {
|
||||
color: $inspec-grey;
|
||||
background: $white;
|
||||
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;
|
||||
}
|
||||
}
|
||||
45
www/source/stylesheets/_fonts.scss
Normal file
45
www/source/stylesheets/_fonts.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
@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');
|
||||
src: url('/fonts/jaapokki-regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('/fonts/jaapokki-regular-webfont.woff2') format('woff2'),
|
||||
url('/fonts/jaapokki-regular-webfont.woff') format('woff'),
|
||||
url('/fonts/jaapokki-regular-webfont.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Jaapokki Alternate';
|
||||
src: url('/fonts/jaapokkisubtract-regular-webfont.eot');
|
||||
src: url('/fonts/jaapokkisubtract-regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('/fonts/jaapokkisubtract-regular-webfont.woff2') format('woff2'),
|
||||
url('/fonts/jaapokkisubtract-regular-webfont.woff') format('woff'),
|
||||
url('/fonts/jaapokkisubtract-regular-webfont.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/roboto-light-webfont.eot');
|
||||
src: url('/fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('/fonts/roboto-light-webfont.woff2') format('woff2'),
|
||||
url('/fonts/roboto-light-webfont.woff') format('woff'),
|
||||
url('/fonts/roboto-light-webfont.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('/fonts/roboto-medium-webfont.eot');
|
||||
src: url('/fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('/fonts/roboto-medium-webfont.woff2') format('woff2'),
|
||||
url('/fonts/roboto-medium-webfont.woff') format('woff'),
|
||||
url('/fonts/roboto-medium-webfont.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: bold;
|
||||
}
|
||||
18
www/source/stylesheets/_layout.scss
Normal file
18
www/source/stylesheets/_layout.scss
Normal 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
154
www/source/stylesheets/_nav.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,375 +0,0 @@
|
|||
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Corrects `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling for `hidden` attribute not present in IE 8/9.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Sets default font family to sans-serif.
|
||||
* 2. Prevents iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
|
||||
* Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Corrects font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sets consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Removes border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects color not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects font family not being inherited in all browsers.
|
||||
* 2. Corrects font size not being inherited in all browsers.
|
||||
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Corrects inability to style clickable `input` types in iOS.
|
||||
* 3. Improves usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Removes excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Removes default vertical scrollbar in IE 8/9.
|
||||
* 2. Improves readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
11
www/source/stylesheets/_settings.scss
Normal file
11
www/source/stylesheets/_settings.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
$inspec-blue: #4197b5;
|
||||
$inspec-green: #63ce99;
|
||||
$inspec-dark-blue: #5c6670;
|
||||
$inspec-grey: #606468;
|
||||
$inspec-light-grey: #c3c6c8;
|
||||
$off-white: #e6e6e6;
|
||||
$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;
|
||||
|
|
@ -1,126 +1,7 @@
|
|||
@charset "utf-8";
|
||||
@import "normalize";
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 18.75em;
|
||||
margin-top: 6em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: rgba(0,0,0,0.5);
|
||||
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 1.8em;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.doc {
|
||||
margin: 3em 0;
|
||||
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 1.1em;
|
||||
font-weight: 300;
|
||||
|
||||
a {
|
||||
border: 1px solid white;
|
||||
border-radius: 3px;
|
||||
padding: 0.75em 0.7em;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
transition: color 0.1s linear;
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.2);
|
||||
color: white;
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.welcome {
|
||||
-webkit-animation-name: welcome;
|
||||
-webkit-animation-duration: .9s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes welcome {
|
||||
from {
|
||||
-webkit-transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
82.5% {
|
||||
-webkit-transform: scale(1.03);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------
|
||||
|
||||
$highlight: #007173;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: $highlight;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
border-radius: 5px;
|
||||
border: 1px solid $highlight;
|
||||
padding: 0.85em 1em;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
background: url("../images/inspec-logo.png") no-repeat left 40%;
|
||||
background-size: 10rem;
|
||||
min-width: 10rem;
|
||||
height: 100px;
|
||||
text-indent: 200%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site-container {
|
||||
max-width: 75rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
$height: 100px;
|
||||
|
||||
.logo {
|
||||
width: 25%;
|
||||
float: left;
|
||||
}
|
||||
.nav {
|
||||
float: right;
|
||||
}
|
||||
div {
|
||||
height: $height;
|
||||
}
|
||||
ul {
|
||||
line-height: $height;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "vendor/foundation-min";
|
||||
@import "fonts";
|
||||
@import "settings";
|
||||
@import "buttons";
|
||||
@import "nav";
|
||||
@import "layout";
|
||||
|
|
|
|||
2
www/source/stylesheets/vendor/_foundation-min.scss
vendored
Normal file
2
www/source/stylesheets/vendor/_foundation-min.scss
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue