made the navigation responsive

5 files changed, 215 insertions, 2 deletions

diff --git a/_layouts/default.html b/_layouts/default.html
index cbaa92e6e..b42e12b30 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -45,6 +45,17 @@
   <header class="site-header">
     <div class="container">
       <a href="{{ site.baseurl }}" class="site-title"><h1>Alaveteli</h1></a>
+      <div class="nav-position">
+        <nav role="navigation" class="site-nav nav-collapse">
+          <ul>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Get started</a></li>
+            <li><a href="#">Documentation</a></li>
+            <li><a href="#">Blog</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
     </div>
   </header>
 
@@ -55,7 +66,11 @@
 
     </footer>
 
-   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="/assets/scripts/responsive-nav.min.js"></script>
+    <script>
+      var nav = responsiveNav(".nav-collapse");
+    </script>
     <script>
       function replace_str(base, replacement) {
         return base + replacement; // FIXME TODO should replace %s
diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css
index 3f2b3641a..cea46ec0e 100644
--- a/assets/css/alaveteli-org.css
+++ b/assets/css/alaveteli-org.css
@@ -1,3 +1,32 @@
+.image-replacement {
+  text-indent: -1000%;
+  white-space: nowrap;
+  overflow: hidden; }
+
+.container {
+  max-width: 63.333333333em;
+  padding: 0 1em;
+  margin: 0 auto;
+  position: relative; }
+
+.unstyled-list, .unstyled, .site-nav ul {
+  margin-left: 0;
+  padding-left: 0;
+  list-style: none outside none; }
+
+.inline-list {
+  margin-left: -0.5em;
+  margin-bottom: 0; }
+  .inline-list li {
+    display: inline-block;
+    margin-left: 0.5em; }
+
+.text--center {
+  text-align: center; }
+
+.bg-default {
+  background: lightblue; }
+
 /* Alaveteli's purple */
 .hero, .what-is-alaveteli, .features, .get-started {
   padding: 2em 0; }
@@ -43,6 +72,78 @@ h3 {
     border-color: rgba(255, 255, 255, 0.2);
     text-decoration: none; }
 
+@media (min-width: 47.5em) {
+  .nav-position {
+    position: absolute;
+    top: 0.33em;
+    left: 180px; } }
+@media (min-width: 56.88889em) {
+  .nav-position {
+    left: 240px;
+    top: 0; } }
+
+.site-nav ul {
+  margin-top: 0; }
+@media (min-width: 47.5em) {
+  .site-nav li {
+    display: inline-block; } }
+.site-nav a {
+  color: #fff;
+  margin-right: 0.33em;
+  display: block;
+  padding: 0.33em;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
+  @media (min-width: 47.5em) {
+    .site-nav a {
+      display: inline-block;
+      border-bottom: none; } }
+  @media (min-width: 56.88889em) {
+    .site-nav a {
+      font-size: 1.125em;
+      margin-right: 0.66em; } }
+
+/*! responsive-nav.js 1.0.32 by @viljamis */
+.js .nav-collapse {
+  clip: rect(0 0 0 0);
+  max-height: 0;
+  position: absolute;
+  display: block;
+  overflow: hidden;
+  zoom: 1; }
+
+.nav-collapse.opened {
+  max-height: 9999px; }
+
+.disable-pointer-events {
+  pointer-events: none !important; }
+
+.nav-toggle {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  position: absolute;
+  top: 0.1em;
+  right: 5em;
+  display: inline-block;
+  padding: 0.3em 0.75em;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+  color: #fff;
+  font-size: 0.875em; }
+
+@media screen and (min-width: 47.5em) {
+  .js .nav-collapse {
+    position: relative; }
+
+  .js .nav-collapse.closed {
+    max-height: none; }
+
+  .nav-toggle {
+    display: none; } }
 .hero {
   background-color: #974495;
   background-size: cover;
@@ -55,6 +156,9 @@ h3 {
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     padding-bottom: 0.5em;
     margin-bottom: 0.25em; }
+    @media (min-width: 56.88889em) {
+      .hero h1 {
+        font-size: 4em; } }
   .hero span {
     opacity: 0.7;
     display: block; }
diff --git a/assets/sass/_config.scss b/assets/sass/_config.scss
index 356c58711..7e665163f 100644
--- a/assets/sass/_config.scss
+++ b/assets/sass/_config.scss
@@ -1,5 +1,5 @@
 $logo_path: "../img/alaveteli-logo.svg";
 $logo_height: 60px;
-$logo_width: 320px;
+$logo_width: 140px;
 $colour_brand: #a94ca6; /* Alaveteli's purple */
 
diff --git a/assets/sass/alaveteli-org.scss b/assets/sass/alaveteli-org.scss
index 18979d08d..97749896e 100644
--- a/assets/sass/alaveteli-org.scss
+++ b/assets/sass/alaveteli-org.scss
@@ -1,4 +1,5 @@
 @import '../../theme/sass/variables';
+@import '../../theme/sass/mixins';
 @import 'config';
 
 $high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi';
@@ -60,6 +61,95 @@ h3 {
         text-decoration: none;
     }
 }
+.nav-position {
+    @media (min-width: 47.5em) {
+        position: absolute;
+        top: 0.33em;
+        left: 180px;
+    }
+    @media (min-width: $large-screen) {
+        left: 240px;
+        top: 0;
+    }
+}
+
+.site-nav {
+    ul {
+        margin-top: 0;
+        @extend .unstyled-list;
+    }
+    li {
+        @media (min-width: 47.5em) {
+            display: inline-block;
+        }
+    }
+    a {
+        color: #fff;
+        margin-right: 0.33em;
+        display: block;
+        padding: 0.33em;
+        border-bottom: 1px solid rgba(255,255,255,0.1);
+        @media (min-width: 47.5em) {
+            display: inline-block;
+            border-bottom: none;
+        }
+        @media (min-width: $large-screen) {
+            font-size: 1.125em;
+            margin-right: 0.66em;
+        }
+    }
+}
+
+/*! responsive-nav.js 1.0.32 by @viljamis */
+
+.js .nav-collapse {
+  clip: rect(0 0 0 0);
+  max-height: 0;
+  position: absolute;
+  display: block;
+  overflow: hidden;
+  zoom: 1;
+}
+
+.nav-collapse.opened {
+  max-height: 9999px;
+}
+
+.disable-pointer-events {
+  pointer-events: none !important;
+}
+
+.nav-toggle {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  position: absolute;
+  top: 0.1em;
+  right: 5em;
+  display: inline-block;
+  padding: 0.3em 0.75em;
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 5px;
+  color: #fff;
+  font-size: 0.875em;
+}
+
+@media screen and (min-width: 47.5em) {
+  .js .nav-collapse {
+    position: relative;
+  }
+  .js .nav-collapse.closed {
+    max-height: none;
+  }
+  .nav-toggle {
+    display: none;
+  }
+}
+
 
 .hero {
     @extend %dark-section;
@@ -75,6 +165,9 @@ h3 {
         border-bottom: 1px solid rgba(255,255,255,0.2);
         padding-bottom: 0.5em;
         margin-bottom: 0.25em;
+        @media (min-width: $large-screen) {
+            font-size: 4em;
+        }
     }
     span {
         opacity: 0.7;
diff --git a/assets/scripts/responsive-nav.min.js b/assets/scripts/responsive-nav.min.js
new file mode 100755
index 000000000..714c1652c
--- /dev/null
+++ b/assets/scripts/responsive-nav.min.js
@@ -0,0 +1 @@
+!function(a,b,c){"use strict";var d=function(d,e){var f=!!b.getComputedStyle;f||(b.getComputedStyle=function(a){return this.el=a,this.getPropertyValue=function(b){var c=/(\-([a-z]){1})/g;return"float"===b&&(b="styleFloat"),c.test(b)&&(b=b.replace(c,function(){return arguments[2].toUpperCase()})),a.currentStyle[b]?a.currentStyle[b]:null},this});var g,h,i,j,k,l,m=function(a,b,c,d){if("addEventListener"in a)try{a.addEventListener(b,c,d)}catch(e){if("object"!=typeof c||!c.handleEvent)throw e;a.addEventListener(b,function(a){c.handleEvent.call(c,a)},d)}else"attachEvent"in a&&("object"==typeof c&&c.handleEvent?a.attachEvent("on"+b,function(){c.handleEvent.call(c)}):a.attachEvent("on"+b,c))},n=function(a,b,c,d){if("removeEventListener"in a)try{a.removeEventListener(b,c,d)}catch(e){if("object"!=typeof c||!c.handleEvent)throw e;a.removeEventListener(b,function(a){c.handleEvent.call(c,a)},d)}else"detachEvent"in a&&("object"==typeof c&&c.handleEvent?a.detachEvent("on"+b,function(){c.handleEvent.call(c)}):a.detachEvent("on"+b,c))},o=function(a){if(a.children.length<1)throw new Error("The Nav container has no containing elements");for(var b=[],c=0;c<a.children.length;c++)1===a.children[c].nodeType&&b.push(a.children[c]);return b},p=function(a,b){for(var c in b)a.setAttribute(c,b[c])},q=function(a,b){0!==a.className.indexOf(b)&&(a.className+=" "+b,a.className=a.className.replace(/(^\s*)|(\s*$)/g,""))},r=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)");a.className=a.className.replace(c," ").replace(/(^\s*)|(\s*$)/g,"")},s=function(a,b,c){for(var d=0;d<a.length;d++)b.call(c,d,a[d])},t=a.createElement("style"),u=a.documentElement,v=function(b,c){var d;this.options={animate:!0,transition:284,label:"Menu",insert:"before",customToggle:"",closeOnNavClick:!1,openPos:"relative",navClass:"nav-collapse",navActiveClass:"js-nav-active",jsClass:"js",init:function(){},open:function(){},close:function(){}};for(d in c)this.options[d]=c[d];if(q(u,this.options.jsClass),this.wrapperEl=b.replace("#",""),a.getElementById(this.wrapperEl))this.wrapper=a.getElementById(this.wrapperEl);else{if(!a.querySelector(this.wrapperEl))throw new Error("The nav element you are trying to select doesn't exist");this.wrapper=a.querySelector(this.wrapperEl)}this.wrapper.inner=o(this.wrapper),h=this.options,g=this.wrapper,this._init(this)};return v.prototype={destroy:function(){this._removeStyles(),r(g,"closed"),r(g,"opened"),r(g,h.navClass),r(g,h.navClass+"-"+this.index),r(u,h.navActiveClass),g.removeAttribute("style"),g.removeAttribute("aria-hidden"),n(b,"resize",this,!1),n(a.body,"touchmove",this,!1),n(i,"touchstart",this,!1),n(i,"touchend",this,!1),n(i,"mouseup",this,!1),n(i,"keyup",this,!1),n(i,"click",this,!1),h.customToggle?i.removeAttribute("aria-hidden"):i.parentNode.removeChild(i)},toggle:function(){j===!0&&(l?this.close():this.open())},open:function(){l||(r(g,"closed"),q(g,"opened"),q(u,h.navActiveClass),q(i,"active"),g.style.position=h.openPos,p(g,{"aria-hidden":"false"}),l=!0,h.open())},close:function(){l&&(q(g,"closed"),r(g,"opened"),r(u,h.navActiveClass),r(i,"active"),p(g,{"aria-hidden":"true"}),h.animate?(j=!1,setTimeout(function(){g.style.position="absolute",j=!0},h.transition+10)):g.style.position="absolute",l=!1,h.close())},resize:function(){"none"!==b.getComputedStyle(i,null).getPropertyValue("display")?(k=!0,p(i,{"aria-hidden":"false"}),g.className.match(/(^|\s)closed(\s|$)/)&&(p(g,{"aria-hidden":"true"}),g.style.position="absolute"),this._createStyles(),this._calcHeight()):(k=!1,p(i,{"aria-hidden":"true"}),p(g,{"aria-hidden":"false"}),g.style.position=h.openPos,this._removeStyles())},handleEvent:function(a){var c=a||b.event;switch(c.type){case"touchstart":this._onTouchStart(c);break;case"touchmove":this._onTouchMove(c);break;case"touchend":case"mouseup":this._onTouchEnd(c);break;case"click":this._preventDefault(c);break;case"keyup":this._onKeyUp(c);break;case"resize":this.resize(c)}},_init:function(){this.index=c++,q(g,h.navClass),q(g,h.navClass+"-"+this.index),q(g,"closed"),j=!0,l=!1,this._closeOnNavClick(),this._createToggle(),this._transitions(),this.resize();var d=this;setTimeout(function(){d.resize()},20),m(b,"resize",this,!1),m(a.body,"touchmove",this,!1),m(i,"touchstart",this,!1),m(i,"touchend",this,!1),m(i,"mouseup",this,!1),m(i,"keyup",this,!1),m(i,"click",this,!1),h.init()},_createStyles:function(){t.parentNode||(t.type="text/css",a.getElementsByTagName("head")[0].appendChild(t))},_removeStyles:function(){t.parentNode&&t.parentNode.removeChild(t)},_createToggle:function(){if(h.customToggle){var b=h.customToggle.replace("#","");if(a.getElementById(b))i=a.getElementById(b);else{if(!a.querySelector(b))throw new Error("The custom nav toggle you are trying to select doesn't exist");i=a.querySelector(b)}}else{var c=a.createElement("a");c.innerHTML=h.label,p(c,{href:"#","class":"nav-toggle"}),"after"===h.insert?g.parentNode.insertBefore(c,g.nextSibling):g.parentNode.insertBefore(c,g),i=c}},_closeOnNavClick:function(){if(h.closeOnNavClick&&"querySelectorAll"in a){var b=g.querySelectorAll("a"),c=this;s(b,function(a){m(b[a],"click",function(){k&&c.toggle()},!1)})}},_preventDefault:function(a){a.preventDefault?(a.preventDefault(),a.stopPropagation()):a.returnValue=!1},_onTouchStart:function(b){b.stopPropagation(),"after"===h.insert&&q(a.body,"disable-pointer-events"),this.startX=b.touches[0].clientX,this.startY=b.touches[0].clientY,this.touchHasMoved=!1,n(i,"mouseup",this,!1)},_onTouchMove:function(a){(Math.abs(a.touches[0].clientX-this.startX)>10||Math.abs(a.touches[0].clientY-this.startY)>10)&&(this.touchHasMoved=!0)},_onTouchEnd:function(c){if(this._preventDefault(c),!this.touchHasMoved){if("touchend"===c.type)return this.toggle(),"after"===h.insert&&setTimeout(function(){r(a.body,"disable-pointer-events")},h.transition+300),void 0;var d=c||b.event;3!==d.which&&2!==d.button&&this.toggle()}},_onKeyUp:function(a){var c=a||b.event;13===c.keyCode&&this.toggle()},_transitions:function(){if(h.animate){var a=g.style,b="max-height "+h.transition+"ms";a.WebkitTransition=b,a.MozTransition=b,a.OTransition=b,a.transition=b}},_calcHeight:function(){for(var a=0,b=0;b<g.inner.length;b++)a+=g.inner[b].offsetHeight;var c="."+h.jsClass+" ."+h.navClass+"-"+this.index+".opened{max-height:"+a+"px !important}";t.styleSheet?t.styleSheet.cssText=c:t.innerHTML=c,c=""}},new v(d,e)};b.responsiveNav=d}(document,window,0);
\ No newline at end of file