diff options
| -rw-r--r-- | _layouts/default.html | 17 | ||||
| -rw-r--r-- | assets/css/alaveteli-org.css | 104 | ||||
| -rw-r--r-- | assets/sass/_config.scss | 2 | ||||
| -rw-r--r-- | assets/sass/alaveteli-org.scss | 93 | ||||
| -rwxr-xr-x | assets/scripts/responsive-nav.min.js | 1 |
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 |