Fixes

wp-content/themes/gf2013/footer.php

@@ -33,6 +33,8 @@
 
 
 <script src="<?php echo get_template_directory_uri(); ?>/javascripts/foundation/foundation.js"></script>
+<script src="<?php echo get_template_directory_uri(); ?>/javascripts/jquery.stick.js"></script>
+<script src="<?php echo get_template_directory_uri(); ?>/javascripts/main.js"></script>
 <?php wp_footer(); ?>
 </body>
 </html>

wp-content/themes/gf2013/javascripts/jquery.stick.js

@@ -0,0 +1,83 @@
+(function() {
+  var $, FIXED, STATIC, Stick;
+
+  $ = jQuery;
+
+  STATIC = 'static';
+
+  FIXED = 'fixed';
+
+  $.fn.stick = function(args) {
+    var s;
+    return s = new Stick(this, args);
+  };
+
+  Stick = (function() {
+
+    function Stick(target, args) {
+      this.target = target;
+      this.offset = typeof args === "number" ? args : 0;
+      if (typeof args === "object") {
+        $.extend(this, args);
+      }
+      this.state = STATIC;
+      this.resize();
+      (function(s) {
+        return $(window).scroll(function() {
+          return s.scroll(this);
+        }).resize(function() {
+          return s.resize(this);
+        });
+      })(this);
+    }
+
+    Stick.prototype.position = function() {
+      return this.target.css({
+        "position": this.state,
+        "top": this.offset + "px",
+        "left": this.targetLeft + "px"
+      });
+    };
+
+    Stick.prototype.resize = function() {
+      var targetBottom;
+      this.targetOffset = parseInt(this.target.offset().top);
+      this.targetLeft = parseInt(this.target.offset().left);
+      targetBottom = this.targetOffset + this.target.height();
+      if ($(window).height() < targetBottom) {
+        this.disabled = true;
+        if (this.state === FIXED) {
+          return this.position();
+        }
+      } else {
+        this.disabled = false;
+        return this.scroll();
+      }
+    };
+
+    Stick.prototype.scroll = function(self) {
+      if (this.disabled) {
+        return;
+      }
+      if ((this.targetOffset - $(self).scrollTop()) - this.offset <= 0) {
+        if (this.state === STATIC) {
+          if (typeof this.onStick === "function") {
+            this.onStick();
+          }
+        }
+        this.state = FIXED;
+      } else {
+        if (this.state === FIXED) {
+          if (typeof this.onUnstick === "function") {
+            this.onUnstick();
+          }
+        }
+        this.state = STATIC;
+      }
+      return this.position();
+    };
+
+    return Stick;
+
+  })();
+})();

wp-content/themes/gf2013/javascripts/main.js

@@ -0,0 +1,3 @@
+$(document).ready(function () {
+    $(".nav-wrapper").stick();
+});

wp-content/themes/gf2013/sass/app.scss

@@ -82,6 +82,7 @@ body,html {
         margin-right: 0;
         margin-top: 0.15em;
         line-height: 1.1;
+        padding-left: 6px;
 
         a {
             color: $grey;
@@ -96,12 +97,14 @@ body,html {
     }
 }
 .nav-wrapper {
+    max-width: 320px;
     height: 100%;
     background-color: $grey;
     @include border-radius(2px);
     text-align: center;
 
     .date-mark {
+        max-width: 270px;
         margin-top: 2em;
 
         img {
@@ -139,6 +142,7 @@ body,html {
 
     }
     #site-navigation {
+        max-width: 270px;
         margin: 2em auto;
 
         .nav-menu {
@@ -158,7 +162,7 @@ body,html {
                     width: 50%;
                     background-color: $primary-color;
                     color: white;
-                    @include border-radius(2px);
+                    //@include border-radius(2px);
                     @include box-shadow(darken($grey, 10%), 2px 2px 10px);
                     @include text-shadow(darken($primary-color, 20%) 1px 1px 0);
                 }

wp-content/themes/gf2013/stylesheets/app.css

@@ -4723,6 +4723,7 @@ body h1, body h2, body h3, html h1, html h2, html h3 {
   margin-right: 0;
   margin-top: 0.15em;
   line-height: 1.1;
+  padding-left: 6px;
 }
 #page .site-title a {
   color: #2d2b29;
@@ -4734,6 +4735,7 @@ body h1, body h2, body h3, html h1, html h2, html h3 {
 }
 
 .nav-wrapper {
+  max-width: 320px;
   height: 100%;
   background-color: #2d2b29;
   -webkit-border-radius: 2px;
@@ -4744,6 +4746,7 @@ body h1, body h2, body h3, html h1, html h2, html h3 {
   text-align: center;
 }
 .nav-wrapper .date-mark {
+  max-width: 270px;
   margin-top: 2em;
 }
 .nav-wrapper .date-mark img {
@@ -4777,6 +4780,7 @@ body h1, body h2, body h3, html h1, html h2, html h3 {
   margin-bottom: 0;
 }
 .nav-wrapper #site-navigation {
+  max-width: 270px;
   margin: 2em auto;
 }
 .nav-wrapper #site-navigation .nav-menu {
@@ -4796,11 +4800,6 @@ body h1, body h2, body h3, html h1, html h2, html h3 {
   width: 50%;
   background-color: #e1842e;
   color: white;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  -ms-border-radius: 2px;
-  -o-border-radius: 2px;
-  border-radius: 2px;
   -webkit-box-shadow: #121211, 2px 2px 10px;
   -moz-box-shadow: #121211, 2px 2px 10px;
   box-shadow: #121211, 2px 2px 10px;