Add main site footer

www/source/layouts/_footer.slim

@@ -0,0 +1,22 @@
+footer#main-footer
+  .container
+    .row
+      .columns.large-3.medium-4
+        .footer--logos
+          a.footer--logo.chef href="http://www.chef.io"
+            img src="/images/chef-logo.png"
+          a.footer--logo.inspec href="/"
+            img src="/images/inspec-by-chef-logo.png"
+      .columns.large-9.medium-8.medium-text-right.text-center
+        ul.footer--links
+          li
+            a.footer--link href="/licensing" Licensing
+          li
+            a.footer--link href="/terms-and-conditions" Terms & Conditions
+        ul.footer--links
+          li
+            a.footer--link href="/trademark-policy" Trademark Policy
+          li
+            a.footer--link href="/privacy-policy" Privacy Policy
+        p
+          small © Chef Software 2016

www/source/layouts/layout.slim

@@ -12,10 +12,13 @@ html
     == stylesheet_link_tag :site
 
   body class="#{page_classes}"
-    = partial "layouts/nav"
+    .container
+      = partial "layouts/nav"
 
-    main#main-content
-      == yield
+      main#main-content
+        == yield
+
+    = partial "layouts/footer"
 
     == javascript_include_tag "all"
     javascript:

www/source/stylesheets/_footer.scss

@@ -0,0 +1,78 @@
+
+
+#main-footer {
+  padding: 30px 0;
+  margin-top: 40px;
+  background: $off-white-2;
+}
+
+.footer--logos {
+  @include nav-small {
+    max-width: 230px;
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+  }
+}
+
+.footer--logo {
+  display: inline-block;
+  vertical-align: middle;
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+  &.chef {
+    width: 27%;
+    padding-right: 5%;
+    border-right: 1px solid $inspec-grey;
+  }
+
+  &.inspec {
+    width: 46%;
+    padding-left: 5%;
+  }
+}
+
+.footer--links {
+  @extend .no-bullet;
+  margin: 25px 0 0;
+  font-size: 14px;
+  line-height: 1.1;
+
+  & > li {
+    margin-bottom: 25px;
+  }
+
+  @media (min-width: 640px) {
+    margin: 10px 0 5px;
+
+    & > li {
+      display: inline-block;
+      margin: 0 25px 0 0;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  @media (min-width: 880px) {
+    display: inline-block;
+
+    &:first-child {
+      margin-right: 25px;
+    }
+  }
+}
+
+.footer--link {
+  color: $inspec-grey;
+  text-transform: uppercase;
+  font-family: $heading-font;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: darken($inspec-grey, 15%);
+  }
+}

www/source/stylesheets/_layout.scss

@@ -1,10 +1,17 @@
 body {
-  max-width: 1200px;
-  margin: 0 auto;
   font-family: $main-font;
   color: $body-text;
 }
 
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.row {
+  max-width: 1200px;
+}
+
 #main-content {
   margin-top: 64px;
 

www/source/stylesheets/_settings.scss

@@ -4,6 +4,7 @@ $inspec-dark-blue: #5c6670;
 $inspec-grey: #606468;
 $inspec-light-grey: #c3c6c8;
 $off-white: #e6e6e6;
+$off-white-2: #f2f2f2;
 $white: #fff;
 $body-text: $inspec-dark-blue;
 

www/source/stylesheets/site.css.scss

@@ -4,6 +4,7 @@
 @import "settings";
 @import "buttons";
 @import "nav";
+@import "footer";
 @import "layout";
 @import "typography";
 @import "icon-block";