Merge pull request #1105 from chef/mw/styling-setup

Styling setup and main navigation

www/config.rb

@@ -44,6 +44,7 @@ configure :build do
   activate :minify_javascript
 end
 
+activate :sprockets
 activate :autoprefixer
 activate :directory_indexes
 set :trailing_slash, false

www/source/images/inspec-by-chef-logo.svg

@@ -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>

www/source/javascripts/all.js

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

www/source/javascripts/nav.js

@@ -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", "");
+  }
+});

www/source/layouts/_nav.slim

@@ -1,19 +1,42 @@
-#main-nav.site-container.top-nav
+nav#main-nav
-  .container.clearfix
+  a.main-nav--logo href="/"
-    a href="/"
+    img src="/images/inspec-by-chef-logo.svg" onerror="this.src='/images/inspec-by-chef-logo.png'"
-      .logo
+
-        h1 InSpec
+  = partial "layouts/svg/nav-icon.svg"
-    .nav.links-wrap
+
-      ul.links
+  ul.main-nav--links
-        li.link
+    li.main-nav--link-ctas
-          a.overview href="/intro" Intro
+      a.button.transparent href="" Try the Demo
-        li.link
+      a.button.secondary href="" Download
-          a.docs href="/docs/index.html" Docs
+    li.main-nav--link
-        li.link
+      a href="/overview"
-          a.tutorials href="/docs/tutorials.html" Tutorials
+        i.main-nav--link-icon.fa.fa-home
-        li.link
+        span.main-nav--link-text Overview
-          a.community href="/community" Community
+    li.main-nav--link
-        li.link
+      a href="/tutorials"
-          a.community href="/under_construction" Download
+        i.main-nav--link-icon.fa.fa-flask
-        li.link
+        span.main-nav--link-text Tutorials
-          a.community href="/demo" Try the Demo
+    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

www/source/layouts/layout.slim

@@ -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();

www/source/layouts/svg/_nav-icon.svg.slim

@@ -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"

www/source/stylesheets/_buttons.scss

@@ -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;
+  }
+}

www/source/stylesheets/_fonts.scss

@@ -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;
+}

www/source/stylesheets/_layout.scss

@@ -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);
+  }
+}

www/source/stylesheets/_nav.scss

@@ -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;
+    }
+  }
+}

www/source/stylesheets/_normalize.scss

@@ -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;
-}

www/source/stylesheets/_settings.scss

@@ -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;

www/source/stylesheets/site.css.scss

@@ -1,126 +1,7 @@
 @charset "utf-8";
-@import "normalize";
+@import "vendor/foundation-min";
-
+@import "fonts";
-body {
+@import "settings";
-  text-align: center;
+@import "buttons";
-  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@import "nav";
-  font-size: 1em;
+@import "layout";
-}
-
-.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;
-    }
-  }
-}