studio - added in revised footer styles and fix for smoothscroll

cms/static/js/base.js

@@ -81,7 +81,7 @@ $(document).ready(function () {
     });
 
     // general link management - smooth scrolling page links
-    $('a[rel*="view"]').bind('click', smoothScrollLink);
+    $('a[rel*="view"][href|="#"]').bind('click', smoothScrollLink);
 
     // tender feedback window scrolling
     $('a.show-tender').bind('click', smoothScrollTop);
@@ -159,7 +159,7 @@ function smoothScrollLink(e) {
         easing: 'swing', 
         speed: 1000,
         scrollElement: null,
-        scrollTarget: $(this).attr('href')
+        scrollTarget: $(this).attr('href'),
     });
 }
 

cms/static/sass/_base.scss

@@ -50,6 +50,12 @@ h1 {
 
 // ====================
 
+// layout - view
+.wrapper-view {
+  position: relative;
+  min-height: 100%;
+}
+
 // layout - basic page header
 .wrapper-mast {
   margin: 0;

cms/static/sass/_reset.scss

@@ -1,6 +1,7 @@
 // studio - utilities - reset
 // ====================
 
+// not ready for this yet, but this should be done as things get cleaner
 // * {
 // 	@include box-sizing(border-box);
 // }
@@ -26,6 +27,10 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 
+html,body {
+  height: 100%;
+}
+
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
 	display: block;

cms/static/sass/_variables.scss

@@ -12,6 +12,9 @@ $fg-max-columns: 12;
 $fg-max-width: 1280px;
 $fg-min-width: 900px;
 
+// elements
+$footer-primary-height: ($baseline*3);
+
 // type
 $sans-serif: 'Open Sans', $verdana;
 $body-line-height: golden-ratio(.875em, 1);
@@ -57,6 +60,10 @@ $blue-s3: saturate($blue,45%);
 $blue-u1: desaturate($blue,15%);
 $blue-u2: desaturate($blue,30%);
 $blue-u3: desaturate($blue,45%);
+$blue-t0: rgba(85, 151, 221,0.125);
+$blue-t1: rgba(85, 151, 221,0.25);
+$blue-t2: rgba(85, 151, 221,0.50);
+$blue-t3: rgba(85, 151, 221,0.75);
 
 $pink: rgb(183, 37, 103);
 $pink-l1: tint($pink,20%);

cms/static/sass/base-style.scss

@@ -22,6 +22,7 @@
 
 // elements
 @import 'elements/header';
+@import 'elements/sock';
 @import 'elements/footer';
 @import 'elements/navigation';
 @import 'elements/forms';

cms/static/sass/elements/_footer.scss

@@ -2,10 +2,14 @@
 // ====================
 
 .wrapper-footer {
-  margin: ($baseline*1.5) 0 $baseline 0;
+  @include box-shadow(inset 0 1px 2px $shadow-d1);
+  margin: ($baseline*1.5) 0 0 0;
   padding: $baseline;
-  position: relative;
+  position: absolute;
+  bottom: 0;
   width: 100%;
+  height: $footer-primary-height;
+  background: $gray-l3;
 
   footer.primary {
     @include clearfix();
@@ -14,9 +18,7 @@
     min-width: $fg-min-width;
     width: flex-grid(12);
     margin: 0 auto;
-    padding-top: $baseline;
-    border-top: 1px solid $gray-l4;
-    color: $gray-l2;
+    color: $gray-l1;
 
     .colophon {
       width: flex-grid(4, 12);
@@ -24,6 +26,14 @@
       margin-right: flex-gutter(2);
     }
 
+    a {
+      color: $gray;
+
+      &:hover, &:active {
+        color: $gray-d2;
+      }
+    }
+
     .nav-peripheral {
       width: flex-grid(6, 12);
       float: right;
@@ -36,14 +46,32 @@
         &:last-child {
           margin-right: 0;
         }
-      }
-    }
 
-    a {
-      color: $gray-l1;
+        a {
+          @include border-radius(2px);
+          padding: ($baseline/2) ($baseline*0.75);
+          background: transparent;
 
-      &:hover, &:active {
-        color: $blue;
+          .ss-icon {
+            @include transition(top .25s ease-in-out .25s);
+            @include font-size(15);
+            position: relative;
+            top: 0;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: ($baseline/4);
+            color: $gray-l1;
+          }
+
+          &:hover, &:active {
+            color: $gray-d2;
+
+            .ss-icon {
+              top: -($baseline/10);
+              color: $gray-d2;
+            }
+          }
+        }
       }
     }
   }

cms/static/sass/elements/_sock.scss

@@ -0,0 +1,18 @@
+// studio - elements - sock
+// ====================
+
+.wrapper-sock {
+  margin: 0;
+  padding: $baseline $baseline $footer-primary-height $baseline;
+  position: relative;
+  width: 100%;
+
+  .sock {
+    @include clearfix();
+    @include font-size(13);
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto ($baseline*2) auto;
+  }
+}

cms/static/sass/views/_index.scss

@@ -9,17 +9,6 @@ body.index {
       margin-bottom: 0;
     }
 
-    .wrapper-footer {
-      margin: 0;
-      border-top: 2px solid $gray-l3;
-
-      footer.primary {
-        border: none;
-        margin-top: 0;
-        padding-top: 0;
-      }
-    }
-
     .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
       @include box-sizing(border-box);
       margin: 0;
@@ -199,7 +188,7 @@ body.index {
           img {
             display: block;
             width: 100%;
-            height: 100%;
+            height: auto;
           }
         }
 
@@ -306,7 +295,8 @@ body.index {
 
     // call to action content
     .wrapper-content-cta {
-      padding-bottom: ($baseline*2);
+      position: relative;
+      padding-bottom: ($footer-primary-height*2);
       padding-top: ($baseline*2);
       background: $white;
     }