From ca90ebc1c0558ca85441f4a87808dc0dd471f02f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jana=20Deutschl=C3=A4nder?= Date: Thu, 3 Nov 2016 17:21:39 +0100 Subject: [PATCH] magic matcher / direct nav / reset styles --- css/area_nav-direct.less | 52 ++++++++++++++ css/base.less | 125 +++++++++++++++++++++++++++++++-- css/base_fonts.less | 59 ++-------------- css/base_mixins.less | 55 +++++++++++++++ css/plugins/magic-matcher.less | 45 ++++++++++++ js/legacy/html5shiv.js | 8 +++ js/legacy/respond.min.js | 5 ++ main.php | 35 ++++----- style.ini | 16 +++-- tpl/favicon_tiles.php | 23 ++++++ 10 files changed, 337 insertions(+), 86 deletions(-) create mode 100644 css/area_nav-direct.less create mode 100644 css/base_mixins.less create mode 100644 css/plugins/magic-matcher.less create mode 100644 js/legacy/html5shiv.js create mode 100644 js/legacy/respond.min.js create mode 100644 tpl/favicon_tiles.php diff --git a/css/area_nav-direct.less b/css/area_nav-direct.less new file mode 100644 index 0000000..3601dbf --- /dev/null +++ b/css/area_nav-direct.less @@ -0,0 +1,52 @@ +/** + * This file provides the design styles for the direct / menu jump links. + * + * @author Jana Deutschlaender + */ + +.nav-direct { + background-color: __nav_direct_background__; + margin-top: -1px; + + p { + box-sizing: border-box; + text-align: center; + position: absolute; + left: 0; + top: -1px; + width: 100%; + height: 1px; + z-index: 200; + + a:link, + a:visited { + .sr-out(); + + box-shadow: __box_shadow__; + display: block; + width: 100%; + background-color: __nav_direct_background__; + border-bottom: 1px solid __shadow_color__; + color: __nav_direct_color__; + line-height: @line-height-default; + text-decoration: none; + padding: 1em; + box-sizing: border-box; + border-radius: 0; + } + + a:focus, + a:hover, + a:active { + top: 0; + left: 0; + text-decoration: underline; + min-height: 50px; + } + + a:hover, + a:active { + text-decoration: none; + } + } +} diff --git a/css/base.less b/css/base.less index 4528654..48784e9 100755 --- a/css/base.less +++ b/css/base.less @@ -1,9 +1,118 @@ /** - * This file provides the basic styles. + * This file provides the basic vars and reset styles. * * @author Jana Deutschlaender */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* global vars */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +@line-height-default: 125%; +@line-height-big: 135%; +@line-height-bigger: 140%; + +@break-min-xxs: 480; +@break-max-xxs: (@break-min-xxs - 1); + +@break-min-xs: 768; +@break-max-xs: (@break-min-xs - 1); + +@break-min-md: 1024; +@break-max-md: (@break-min-md - 1); + +@break-min-lg: 1440; +@break-max-lg: (@break-min-lg - 1); + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* all media */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +html, body{ + font-size: 100.1%; +} + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, +a, abbr, em,acronym, img, strong, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +input, select, option, textarea, button{ + background: transparent; + border: none 0; outline: 0; vertical-align: baseline; + font-style: normal; + margin: 0; padding: 0; +} + +div, span, object, +h1, h2, h3, h4, h5, h6, p, blockquote, +a, abbr, em,acronym, img, strong, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +input, select, option, textarea, button{ + font-size: 1rem; line-height: 100%; +} + + +ol, ul{ list-style: none outside none; } +blockquote, q{ quotes: none; } +acronym{ cursor: help; border-bottom: dotted 1px #333; } + +*:focus{ outline: 0; } + +table{ border-collapse: collapse; border-spacing: 0; empty-cells: show; caption-side: top; } +caption, th, td{ text-align: left; vertical-align: top; } + +img{ display: block; float: none; border: none 0; line-height: @line-height-default; } + +*, div, nav, header{ + box-sizing: border-box; +} + +header, footer, .container, .row, nav, nav > ul{ + &::before, &::after{ + display: table; + content: " "; + clear: both; + } +} + + + +.sr-out { + .sr-out(); +} + +.sr-only { + .sr-only(); +} + +.structure, .none, .mobile-only { + display: none; +} + +.mobile-only { + display: none; + + @media @screen_max-xs { + display: inline-block; + } +} + +.mobile-hide { + display: inline-block; + + @media @screen_max-xs { + display: none; + } +} + + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* screen */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + @media screen{ html { @@ -135,7 +244,7 @@ } html, body, div, span, applet, object, iframe, - h1, h2, h3, h4, h5, h6, p, blockquote, pre, + h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, @@ -150,11 +259,13 @@ color: @ini_text; } - code{ +} +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* print */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +@media print{ + body{ + font-size: 12pt; } } - -@media print{ - -} diff --git a/css/base_fonts.less b/css/base_fonts.less index 294490a..68470f5 100755 --- a/css/base_fonts.less +++ b/css/base_fonts.less @@ -5,57 +5,10 @@ */ -/* roboto light */ -@font-face { - font-family: 'roboto'; - font-style: normal; - font-weight: 300; - src: local('Roboto Light'), local('Roboto-Light'), url('/lib/tpl/sprintdoc-template/fonts/roboto-light.eot'); - src: url('/lib/tpl/sprintdoc-template/fonts/roboto-light.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-light.woff') format('woff'); -} - -/* roboto regular */ -@font-face { - font-family: 'roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url('/lib/tpl/sprintdoc-template/fonts/roboto-regular.eot'); - src: url('/lib/tpl/sprintdoc-template/fonts/roboto-regular.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-regular.woff') format('woff'); -} - -/* roboto medium */ -@font-face { - font-family: 'roboto'; - font-style: normal; - font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url('/lib/tpl/sprintdoc-template/fonts/roboto-medium.eot'); - src: url('/lib/tpl/sprintdoc-template/fonts/roboto-medium.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-medium.woff') format('woff'); -} - -/* roboto bold */ -@font-face { - font-family: 'roboto'; - font-style: normal; - font-weight: 700; - src: local('Roboto Bold'), local('Roboto-Bold'), url('/lib/tpl/sprintdoc-template/fonts/roboto-bold.eot'); - src: url('/lib/tpl/sprintdoc-template/fonts/roboto-bold.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-bold.woff') format('woff'); -} - -/* roboto condensed */ -@font-face { - font-family: 'roboto condensed'; - font-style: normal; - font-weight: 400; - src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('/lib/tpl/sprintdoc-template/fonts/roboto-condensed.eot'); - src: url('/lib/tpl/sprintdoc-template/fonts/roboto-condensed.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-condensed.woff') format('woff'); -} - -/* roboto condensed bold */ -@font-face { - font-family: 'roboto condensed'; - font-style: normal; - font-weight: 700; - src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url('/lib/tpl/sprintdoc-template/fonts/roboto-boldcondensed.eot'); - src: url('/lib/tpl/sprintdoc-template/fonts/roboto-boldcondensed.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-boldcondensed.woff') format('woff'); -} +.setLocalFontFace('roboto',300,'Roboto Light','Roboto-Light','roboto-light'); /* roboto light */ +.setLocalFontFace('roboto',400,'Roboto','Roboto-Regular','roboto-regular'); /* roboto regular */ +.setLocalFontFace('roboto',400,'Roboto Medium','Roboto-Medium','roboto-medium'); /* roboto medium */ +.setLocalFontFace('roboto',700,'Roboto Bold','Roboto-Bold','roboto-bold'); /* roboto bold */ +.setLocalFontFace('roboto',700,'Roboto Condensed','RobotoCondensed-Regular','roboto-condensed'); /* roboto condensed */ +.setLocalFontFace('roboto',700,'Roboto Condensed Bold','RobotoCondensed-Bold','roboto-boldcondensed'); /* roboto condensed */ diff --git a/css/base_mixins.less b/css/base_mixins.less new file mode 100644 index 0000000..c6d7212 --- /dev/null +++ b/css/base_mixins.less @@ -0,0 +1,55 @@ +/** + * This file provides less mixins for all other style modules + * + * @author Jana Deutschlaender + */ + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* Fonts */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +.setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename){ + @font-face { + font-family: @fontFamily; + font-style: normal; + font-weight: @fontWeight; + src: ~"local('@{localFontName}'), local("~"'@{localFontNameVar}'), url("~"@{filename}.eot)"; + src: ~"url("~"@{filename}.eot?#iefix') format('embedded-opentype'), url("~"@{filename}.woff') format('woff')"; + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* Screenreader / Hide */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +.sr-out() { + display: block; + width: 1px; + height: 1px; + overflow: hidden; + position: absolute; + top: -200000em; + left: -200000em; +} + +.sr-only(){ + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} + +.sr-only-focusable() { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} diff --git a/css/plugins/magic-matcher.less b/css/plugins/magic-matcher.less new file mode 100644 index 0000000..7086d7f --- /dev/null +++ b/css/plugins/magic-matcher.less @@ -0,0 +1,45 @@ + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* all media */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + + +/* + + + + + + + + + + + + + + + + + + + + + + + */ +/* magic matcher bar with form on top of page */ + +#dokuwiki_magic-matcher{ + #magicmatcher__context{ + box-sizing: border-box; + background-color: __nav_direct_background__; + box-shadow: __box_shadow__; + border-radius: 0 0 __default_border_radius__ __default_border_radius__; + position: relative; + z-index: 100; + left: .25%; + width: 99.5%; + min-height: 50px; + padding: .8em 1em .5em; + + .chosen-container-single .chosen-single span{ + line-height: @line-height-bigger; + } + } +} + +.no-js{ + #dokuwiki_magic-matcher{ + display: none; + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* print */ +/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ +@media print{ + #dokuwiki_magic-matcher{ + display: none; + } +} + diff --git a/js/legacy/html5shiv.js b/js/legacy/html5shiv.js new file mode 100644 index 0000000..448cebd --- /dev/null +++ b/js/legacy/html5shiv.js @@ -0,0 +1,8 @@ +/* + HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed +*/ +(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); +a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; +c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| +"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f); +if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d #mq-test-1 { width: 42px; }',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b @@ -36,10 +40,13 @@ $showSidebar = page_findnearest($conf['sidebar']) && ($ACT=='show'); /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* IE8 support HTML5 / media queries */ +/* conditional comments for HTML5 / media queries support in IE8 */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?> - + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + +