/*
*
* Golden Gridlet (1.01)
* by Joni Korpi
* licensed under MIT
*
*/
var guideColor = 'rgb(255,195,0)';
var guideInnerColor = 'rgba(255,255,255, 0.91)';
var guideOpacity = '0.618';
var switchColor = 'rgb(0,0,0)';
var switchOpacity = '0.618';
var baseFontSize = 16;
var baselineGridHeight = (24 / baseFontSize)+'em';
var eightColBreakpoint = ((720-1) / baseFontSize)+'em';
var sixteenColBreakpoint = ((1872-1) / baseFontSize)+'em';
/*
* Note that the script might not work as expected if
* the element of your page has a set width and
* position: relative;, because the guides are appended
* inside , but positioned in relation to .
*
* Also note that the baseline grid doesn't really align
* up anymore after zooming the baseline grid in or out,
* because of rounding errors.
*/
/*!
* Ender: open module JavaScript framework
* copyright Dustin Diaz & Jacob Thornton 2011 (@ded @fat)
* https://ender.no.de
* License MIT
* Build: ender -b jeesh
*/
!function(a){function d(a,b){return c(a,b)}function c(a,e,f){d._select&&(typeof a=="string"||a.nodeName||a.length&&"item"in a||a==window)?(f=d._select(a,e),f.selector=a):f=isFinite(a.length)?a:[a];return b(f,c)}function b(a,b){for(var c in b)c!="noConflict"&&c!="_VERSION"&&(a[c]=b[c]);return a}b(d,{_VERSION:"0.2.4",ender:function(a,e){b(e?c:d,a)},fn:a.$&&a.$.fn||{}}),b(c,{forEach:function(a,b,c){for(c=0,l=this.length;c]+)/.exec(a),d=c.createElement(b&&k[b[1].toLowerCase()]||"div"),e=[];d.innerHTML=a;var f=d.childNodes;d=d.firstChild,e.push(d);while(d=d.nextSibling)d.nodeType==1&&e.push(d);return e}():z(a)?[a.cloneNode(!0)]:[]},J.doc=function(){var a=d.scrollWidth,b=d.scrollHeight,c=this.viewport();return{width:Math.max(a,c.width),height:Math.max(b,c.height)}},J.firstChild=function(a){for(var b=a.childNodes,c=0,d=b&&b.length||0,e;c=0;e=e-2)while(j=H[r[e+1]](j,c[f]))if(p=Q.apply(j,P(r[e])))break;p&&(d[g++]=c[f])}return d}function S(a,b,c){switch(a){case"=":return b==c;case"^=":return b.match(L.g("^="+c)||L.s("^="+c,new RegExp("^"+R(c))));case"$=":return b.match(L.g("$="+c)||L.s("$="+c,new RegExp(R(c)+"$")));case"*=":return b.match(L.g(c)||L.s(c,new RegExp(R(c))));case"~=":return b.match(L.g("~="+c)||L.s("~="+c,new RegExp("(?:^|\\s+)"+R(c)+"(?:\\s+|$)")));case"|=":return b.match(L.g("|="+c)||L.s("|="+c,new RegExp("^"+R(c)+"(-|$)")))}return 0}function R(a){return K.g(a)||K.s(a,a.replace(D,"\\$1"))}function Q(a,b,c,e,f,g,h){var j,k,l;if(b&&this.tagName.toLowerCase()!==b)return!1;if(c&&(j=c.match(u))&&j[1]!==this.id)return!1;if(c&&(q=c.match(v)))for(d=q.length;d--;){k=q[d].slice(1);if(!(J.g(k)||J.s(k,new RegExp("(^|\\s+)"+k+"(\\s+|$)"))).test(this.className))return!1}if(e&&!h){i=this.attributes;for(l in i)if(Object.prototype.hasOwnProperty.call(i,l)&&(i[l].name||l)==f)return this}if(e&&!S(g,this.getAttribute(f)||"",h))return!1;return this}function P(a){return a.match(G)}function O(a){while(a=a.previousSibling)if(a.nodeType==1)break;return a}function N(a){k=[];for(d=0,o=a.length;d])\s*/g,C=/([\s\>\+\~])(?![\s\w\-\/\?\&\=\:\.\(\)\!,@#%<>\{\}\$\*\^'"]*\])/,D=/([.*+?\^=!:${}()|\[\]\/\\])/g,E=/^([a-z0-9]+)?(?:([\.\#]+[\w\-\.#]+)?)/,F=/\[([\w\-]+)(?:([\|\^\$\*\~]?\=)['"]?([ \w\-\/\?\&\=\:\.\(\)\!,@#%<>\{\}\$\*\^]+)["']?)?\]/,G=new RegExp(E.source+"("+F.source+")?"),H={" ":function(a){return a&&a!==A&&a.parentNode},">":function(a,b){return a&&a.parentNode==b.parentNode&&a.parentNode},"~":function(a){return a&&a.previousSibling},"+":function(a,b,c,d){if(!a)return!1;c=O(a),d=O(b);return c&&d&&c==d&&c}};I.prototype={g:function(a){return this.c[a]||undefined},s:function(a,b){this.c[a]=b;return b}};var J=new I,K=new I,L=new I,M=new I,Y="compareDocumentPosition"in A?function(a,b){return(b.compareDocumentPosition(a)&16)==16}:"contains"in A?function(a,c){c=c==b||c==window?A:c;return c!==a&&c.contains(a)}:function(a,b){while(a=a.parentNode)if(a===b)return 1;return 0},Z=b.querySelector&&b.querySelectorAll?function(a,c){if(b.getElementsByClassName&&(h=a.match(x)))return N(c.getElementsByClassName(h[1]));return N(c.querySelectorAll(a))}:function(a,c){a=a.replace(B,"$1");var d=[],f,i=[],j;if(h=a.match(z)){s=c.getElementsByTagName(h[1]||"*"),k=J.g(h[2])||J.s(h[2],new RegExp("(^|\\s+)"+h[2]+"(\\s+|$)"));for(j=0,g=s.length,e=0;j]+)/.exec(b)[1],f=(c||a).createElement(d[e]||"div"),g=[];f.innerHTML=b;var h=f.childNodes;f=f.firstChild,g.push(f);while(f=f.nextSibling)f.nodeType==1&&g.push(f);return g}var b=qwery.noConflict(),c="table",d={thead:c,tbody:c,tfoot:c,tr:"tbody",th:"tr",td:"tr",fieldset:"form",option:"select"};$._select=function(a,c){return/^\s* or ? */
if (ender('body').offset().height > ender('html').offset().height) {
var largerHeight = ender('body').offset().height;
}
else {
var largerHeight = ender('html').offset().height;
}
/* Give guides the new height */
ender('.ggs-guide').each(function() {
ender(this).css('height', largerHeight);
});
/* Calculate the amount of lines needed and append them */
var lines = Math.floor(largerHeight/24);
ender('#ggs-baseline-container').empty();
for (i=0; i<=lines; i++) {
ender('#ggs-baseline-container').append('');
}
/* Set the baseline container to the same height as the guides, so there's no overflow */
ender('#ggs-baseline-container').css('height', largerHeight);
}
}
ender.domReady(function () {
/* Add control classes and switch element */
ender('body').addClass('ggs-hidden ggs-animated').append('');
/* Create CSS */
var styles = '\
html{height:100%;position:relative;}\
#ggs-switch{position:fixed;top:0;right:0;z-index:9500; cursor:pointer; width: 24px; margin: 18px 18px 14px; opacity:'+switchOpacity+'; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.145s ease-out; -moz-transition: all 0.145s ease-out; -ms-transition: all 0.145s ease-out; transition: all 0.145s ease-out;}\
.ggs-switchBar {background: '+switchColor+'; height: 4px; margin-bottom: 4px;}\
.ggs-animated #ggs-switch {-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg);}\
.ggs-guide{position:absolute;top:0;z-index:9000;height:100%;margin-left:-0.75em;border:solid '+guideColor+';border-width:0 0.75em;background:'+guideColor+';opacity:'+guideOpacity+'; -webkit-transition: all 0.235s ease-out; -moz-transition: all 0.235s ease-out; -ms-transition: all 0.235s ease-out; transition: all 0.235s ease-out;}\
.ggs-animated .ggs-guide {-webkit-transform: scale(0, 1); -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); opacity: 0;}\
.ggs-animated #ggs-baseline-container {opacity: 0;}\
.ggs-hidden .ggs-guide, .ggs-hidden #ggs-baseline-container {display: none;}\
.ggs-0{left:0;}\
.ggs-1{left:11.11111111111111%;}\
.ggs-2{left:16.666666666666664%;}\
.ggs-3{left:22.22222222222222%;}\
.ggs-4{left:27.77777777777778%;}\
.ggs-5{left:33.33333333333333%;}\
.ggs-6{left:38.888888888888886%;}\
.ggs-7{left:44.44444444444444%;}\
.ggs-8{left:50%;}\
.ggs-9{left:55.55555555555556%;}\
.ggs-10{left:61.11111111111111%;}\
.ggs-11{left:66.66666666666666%;}\
.ggs-12{left:72.22222222222221%;}\
.ggs-13{left:77.77777777777777%;}\
.ggs-14{left:83.33333333333333%;}\
.ggs-15{left:88.88888888888889%;}\
.ggs-16{right:0;}\
.ggs-0,.ggs-16{width:5.555555555555555%;padding-right:0.75em;border:0;margin:0;-moz-box-size:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}\
.ggs-guide div{background:'+guideInnerColor+';width:2px;height:100%;position:absolute;left:-1px;top:0;}\
.ggs-0 div{left:auto;right:0.75em;}\
.ggs-16 div{left:0.75em;}\
#ggs-baseline-container {opacity: '+guideOpacity+'; position: absolute; left:0; top:0; z-index: 8000; width: 100%; height: 100%; -webkit-transition: opacity 0.235s ease-out; -moz-transition: opacity 0.235s ease-out; -ms-transition: opacity 0.235s ease-out; transition: opacity 0.235s ease-out; overflow-y: hidden;}\
.ggs-line {border-top: 1px dotted '+guideColor+'; height: '+baselineGridHeight+'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}\
@media screen and (max-width: '+(eightColBreakpoint)+'){.ggs-2,.ggs-6,.ggs-10,.ggs-14{display:none;}}\
@media screen and (max-width: '+(sixteenColBreakpoint)+'){.ggs-1,.ggs-3,.ggs-5,.ggs-7,.ggs-9,.ggs-11,.ggs-13,.ggs-15{display:none;}}\
';
/* Create guides */
for (i=0; i<=16; i++) {
ender('body').append(ender(''));
};
ender('body').append(ender(''));
/* Append CSS */
(function(d,u) {
if(d.createStyleSheet) {
d.createStyleSheet( u );
}
else {
var css=d.createElement('style');
css.setAttribute("type","text/css");
css.appendChild(document.createTextNode(u));
d.getElementsByTagName("head")[0].appendChild(css);
}
}(document, styles))
/* Resize guides when window size changes */
ender(window).on('resize', setHeights);
/* Add listeners for switch element */
ender('#ggs-switch').click(function(){
if (ender('body').hasClass('ggs-hidden')) {
ender('body').removeClass('ggs-hidden');
setHeights();
setTimeout(
function () {
ender('body').removeClass('ggs-animated');
},
20
);
}
else {
ender('body').addClass('ggs-animated');
setTimeout(
function () {
ender('body').addClass('ggs-hidden');
},
300
);
}
});
});