diff --git a/wp-content/themes/gf2013/footer.php b/wp-content/themes/gf2013/footer.php index f3413fb..b7c3544 100644 --- a/wp-content/themes/gf2013/footer.php +++ b/wp-content/themes/gf2013/footer.php @@ -33,6 +33,8 @@ + + diff --git a/wp-content/themes/gf2013/javascripts/jquery.stick.js b/wp-content/themes/gf2013/javascripts/jquery.stick.js new file mode 100644 index 0000000..d73b1b0 --- /dev/null +++ b/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; + + })(); +})(); \ No newline at end of file diff --git a/wp-content/themes/gf2013/javascripts/main.js b/wp-content/themes/gf2013/javascripts/main.js new file mode 100644 index 0000000..1a2bed1 --- /dev/null +++ b/wp-content/themes/gf2013/javascripts/main.js @@ -0,0 +1,3 @@ +$(document).ready(function () { + $(".nav-wrapper").stick(); +}); diff --git a/wp-content/themes/gf2013/sass/app.scss b/wp-content/themes/gf2013/sass/app.scss index 4406e3a..f394572 100644 --- a/wp-content/themes/gf2013/sass/app.scss +++ b/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); } diff --git a/wp-content/themes/gf2013/stylesheets/app.css b/wp-content/themes/gf2013/stylesheets/app.css index 21a4679..174c51e 100644 --- a/wp-content/themes/gf2013/stylesheets/app.css +++ b/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;