From 4b0153af47fe3879a1126a4ac79c81dcdcb55449 Mon Sep 17 00:00:00 2001 From: raphaelgoettter Date: Wed, 8 Jul 2015 15:19:43 +0200 Subject: [PATCH] Ajout de classes helpers // spacings (choose unit you prefer) @tiny-value : .5rem; // tiny value for margins / paddings @tiny-plus-value : .7rem; // tiny+ value for margins / paddings @small-value : 1rem; // small value for margins / paddings @small-plus-value : 1.5rem; // small+ value for margins / paddings @medium-value : 2rem; // medium value for margins / paddings @medium-plus-value : 3rem; // medium+ value for margins / paddings @large-value : 4rem; // large value for margins / paddings @large-plus-value : 6rem; // large value for margins / paddings @extra-large-value : 8rem; // extra large value for margins / paddings @extra-large-plus-value : 12rem; // extra large value for margins / paddings @ultra-large-value : 16rem; // ultra large value for margins / paddings @ultra-large-plus-value : 20rem; // ultra large value for margins / paddings // breakpoints (choose unit you prefer) @tiny-screen : 320px; // tiny screens media query (less-equal than 320px) @tiny-plus-screen : 480px; // screens between 321px and 480px @small-screen : 640px; // screens between 481px and 640px @small-plus-screen : 768px; // screens between 641px and 768px @medium-screen : 960px; // screens between 769px and 960px @medium-plus-screen : 1024px; // screens between 961px and 1024px @large-screen : 1280px; // screens between 1025px and 1280px @large-plus-screen : 1440px; // screens between 1281px and 1440px @extra-large-screen : 1600px; // screens between 1441px and 1600px @ultra-large-screen : 1920px; // ultra large screens --- css/knacss-unminified.css | 106 +++++++++++++++++++------------------- css/knacss.css | 2 +- doc/07-responsive.md | 20 ++++--- less/_00-config.less | 30 +++++++---- sass/_00-config.scss | 30 +++++++---- 5 files changed, 108 insertions(+), 80 deletions(-) diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css index 427852a..2e82367 100644 --- a/css/knacss-unminified.css +++ b/css/knacss-unminified.css @@ -507,7 +507,7 @@ var { overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; } -@media (max-width: 768px) { +@media (max-width: 640px) { .no-small-screen { display: none; } @@ -565,7 +565,7 @@ svg { } /* margin-bottom on tables */ table { - margin-bottom: 20px; + margin-bottom: 2rem; } /* ----------------------------- */ /* ==layout and modules */ @@ -615,17 +615,17 @@ table { float: left; } img.fl { - margin-right: 10px; + margin-right: 1rem; } .fr { float: right; } img.fr { - margin-left: 10px; + margin-left: 1rem; } img.fl, img.fr { - margin-bottom: 5px; + margin-bottom: 0.5rem; } /* table layout */ .row { @@ -792,7 +792,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html width: calc(100% * 2 / 12 - 1em - .01px); } /* Responsive grid */ -@media (max-width: 768px) { +@media (max-width: 640px) { [class*="-small-4"] > * { width: calc(100% * 1 / 4 - 1em - .01px); } @@ -818,7 +818,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html width: calc(100% - 1em - .01px); } } -@media (max-width: 480px) { +@media (max-width: 320px) { [class*="-tiny-2"] > * { width: calc(100% * 1 / 2 - 1em - .01px); } @@ -838,7 +838,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .grid-2-1 > *:nth-child(even) { width: calc(33.33333333333333% - 1em - .01px); } -@media (max-width: 480px) { +@media (max-width: 320px) { .grid-2-1 > *:nth-child(n) { width: calc(100% - 1em - .01px); } @@ -849,7 +849,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .grid-1-2 > *:nth-child(even) { width: calc(66.66666666666666% - 1em - .01px); } -@media (max-width: 480px) { +@media (max-width: 320px) { .grid-1-2 > *:nth-child(n) { width: calc(100% - 1em - .01px); } @@ -860,7 +860,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .grid-3-1 > *:nth-child(even) { width: calc(25% - 1em - .01px); } -@media (max-width: 480px) { +@media (max-width: 320px) { .grid-3-1 > *:nth-child(n) { width: calc(100% - 1em - .01px); } @@ -871,7 +871,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .grid-1-3 > *:nth-child(even) { width: calc(75% - 1em - .01px); } -@media (max-width: 480px) { +@media (max-width: 320px) { .grid-1-3 > *:nth-child(n) { width: calc(100% - 1em - .01px); } @@ -882,7 +882,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .grid-3-2 > *:nth-child(even) { width: calc(40% - 1em - .01px); } -@media (max-width: 480px) { +@media (max-width: 320px) { .grid-3-2 > *:nth-child(n) { width: calc(100% - 1em - .01px); } @@ -893,7 +893,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .grid-2-3 > *:nth-child(even) { width: calc(60% - 1em - .01px); } -@media (max-width: 480px) { +@media (max-width: 320px) { .grid-2-3 > *:nth-child(n) { width: calc(100% - 1em - .01px); } @@ -904,7 +904,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .grid-4-1 > *:nth-child(even) { width: calc(20% - 1em - .01px); } -@media (max-width: 480px) { +@media (max-width: 320px) { .grid-4-1 > *:nth-child(n) { width: calc(100% - 1em - .01px); } @@ -915,7 +915,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .grid-1-4 > *:nth-child(even) { width: calc(80% - 1em - .01px); } -@media (max-width: 480px) { +@media (max-width: 320px) { .grid-1-4 > *:nth-child(n) { width: calc(100% - 1em - .01px); } @@ -941,7 +941,7 @@ table.table-auto { td, th { vertical-align: top; - min-width: 20px; + min-width: 2rem; cursor: default; } /* ----------------------------- */ @@ -1149,131 +1149,131 @@ s,m,l,n = small, medium, large, none padding: 0; } .mas { - margin: 10px; + margin: 1rem; } .mam { - margin: 20px; + margin: 2rem; } .mal { - margin: 40px; + margin: 4rem; } .pas { - padding: 10px; + padding: 1rem; } .pam { - padding: 20px; + padding: 2rem; } .pal { - padding: 40px; + padding: 4rem; } .mtn, .mt0 { margin-top: 0; } .mts { - margin-top: 10px; + margin-top: 1rem; } .mtm { - margin-top: 20px; + margin-top: 2rem; } .mtl { - margin-top: 40px; + margin-top: 4rem; } .mrn, .mr0 { margin-right: 0; } .mrs { - margin-right: 10px; + margin-right: 1rem; } .mrm { - margin-right: 20px; + margin-right: 2rem; } .mrl { - margin-right: 40px; + margin-right: 4rem; } .mbn, .mb0 { margin-bottom: 0; } .mbs { - margin-bottom: 10px; + margin-bottom: 1rem; } .mbm { - margin-bottom: 20px; + margin-bottom: 2rem; } .mbl { - margin-bottom: 40px; + margin-bottom: 4rem; } .mln, .ml0 { margin-left: 0; } .mls { - margin-left: 10px; + margin-left: 1rem; } .mlm { - margin-left: 20px; + margin-left: 2rem; } .mll { - margin-left: 40px; + margin-left: 4rem; } .ptn, .pt0 { padding-top: 0; } .pts { - padding-top: 10px; + padding-top: 1rem; } .ptm { - padding-top: 20px; + padding-top: 2rem; } .ptl { - padding-top: 40px; + padding-top: 4rem; } .prn, .pr0 { padding-right: 0; } .prs { - padding-right: 10px; + padding-right: 1rem; } .prm { - padding-right: 20px; + padding-right: 2rem; } .prl { - padding-right: 40px; + padding-right: 4rem; } .pbn, .pb0 { padding-bottom: 0; } .pbs { - padding-bottom: 10px; + padding-bottom: 1rem; } .pbm { - padding-bottom: 20px; + padding-bottom: 2rem; } .pbl { - padding-bottom: 40px; + padding-bottom: 4rem; } .pln, .pl0 { padding-left: 0; } .pls { - padding-left: 10px; + padding-left: 1rem; } .plm { - padding-left: 20px; + padding-left: 2rem; } .pll { - padding-left: 40px; + padding-left: 4rem; } /* ----------------------------- */ /* ==desktop and HD devices */ /* ----------------------------- */ -@media (min-width: 1025px) { +@media (min-width: 961px) { /* rules for big resources and big screens like: background-images, font-faces, etc. */ } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { @@ -1282,7 +1282,7 @@ s,m,l,n = small, medium, large, none /* ---------------------------------- */ /* ==Responsive large */ /* ---------------------------------- */ -@media (min-width: 1025px) { +@media (min-width: 961px) { /* layouts for large screens */ .large-hidden { display: none !important; @@ -1341,7 +1341,7 @@ s,m,l,n = small, medium, large, none /* ---------------------------------- */ /* ==Responsive medium */ /* ---------------------------------- */ -@media (min-width: 769px) and (max-width: 1024px) { +@media (min-width: 641px) and (max-width: 960px) { /* layouts for medium screens */ .medium-hidden { display: none !important; @@ -1401,7 +1401,7 @@ s,m,l,n = small, medium, large, none /* ---------------------------------- */ /* ==Responsive small */ /* ---------------------------------- */ -@media (min-width: 481px) and (max-width: 768px) { +@media (min-width: 321px) and (max-width: 640px) { /* quick reset in small resolution and less */ .w600p, .w700p, @@ -1474,7 +1474,7 @@ s,m,l,n = small, medium, large, none /* ---------------------------------- */ /* ==Responsive tiny */ /* ---------------------------------- */ -@media (max-width: 480px) { +@media (max-width: 320px) { /* quick tiny resolution reset */ .mod, .col, @@ -1677,7 +1677,7 @@ s,m,l,n = small, medium, large, none overflow: visible; clip: auto; } -@media (max-width: 768px) { +@media (max-width: 640px) { /* you shall not pass */ div, textarea, @@ -1792,7 +1792,7 @@ table, border: 1px solid #ccc; } caption { - padding: 10px; + padding: 1rem; color: #555; font-style: italic; } diff --git a/css/knacss.css b/css/knacss.css index 5144197..8ac3595 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,4 +1,4 @@ /*! * www.KNACSS.com V4.3.2 (8 juillet 2015) @author: Raphael Goetter, Alsacreations * Licence WTFPL http://www.wtfpl.net/ -*//*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */a:active,a:focus,a:hover,body,mark{color:#000}.row,.table,table{table-layout:fixed}.table,blockquote,code,img,input,pre,svg,table,td,textarea,video{max-width:100%}.col,.inbl,.row>*,.table,table,td,th{vertical-align:top}.italic,address,caption,cite,dfn,em,i,var{font-style:italic}html{font-family:sans-serif;box-sizing:border-box;font-size:62.5%;font-size:calc(1em * .625);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;color:#333}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}h1{margin:.67em 0}mark{background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em;bottom:1ex}sub{bottom:-.25em;top:.5ex}img{border:0;vertical-align:middle}svg:not(:root){overflow:hidden}figure{margin:1em 40px}pre,textarea{overflow:auto}code,kbd,pre,samp{font-size:1em}button,input,optgroup,select,textarea{font:inherit;margin:0;color:#000}.h1-like,.h2-like,body,h1,h2{font-family:Helvetica,Arial,sans-serif}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled],td,th{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{padding:0}*{box-sizing:inherit}ol,ul{padding-left:2em}ul.unstyled{list-style:none}img:not([src$=".svg"]){height:auto}blockquote,figure{margin-left:0;margin-right:0}body{margin:0;font-size:1.4em;background-color:#fff;line-height:1.5}.center,.left{margin-right:auto}.center,.right{margin-left:auto}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}.h1-like,h1{font-size:3.2rem}.h2-like,h2{font-size:2.8rem}.h3-like,h3{font-size:2.4rem}.h4-like,h4{font-size:2rem}.h5-like,h5{font-size:1.8rem}.h6-like,h6{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:Consolas,"DejaVu Sans Mono",Courier,monospace;line-height:normal}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(1px,1px,1px,1px)!important}.bfc,.mod,.skip-links a{overflow:hidden}.skip-links,.skip-links a{position:absolute}@media (max-width:768px){.no-small-screen{display:none}}@media (min-width:1280px){.no-large-screen{display:none}}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}table{border-spacing:0;margin-bottom:20px}.clear,.line,.row{clear:both}.clearfix::after,.line::after{content:"";display:table;clear:both;border-collapse:collapse}.txtleft{text-align:left}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:10px}.fr{float:right}img.fr{margin-left:10px}img.fl,img.fr{margin-bottom:5px}.row{display:table;width:100%}.col,.row>*{display:table-cell}body>script{display:none!important}.inbl{display:inline-block}.flex-container,[class*=flex-container]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flex-item-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-item-medium{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.flex-item-last{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flex-item-center{margin:auto}[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-1em;letter-spacing:-.31em;text-rendering:optimizespeed}[class*=grid-]>*{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% * 1 / 4 - 1em - .01px);margin-left:1em;display:inline-block;vertical-align:top;letter-spacing:normal;text-rendering:auto}[class*=grid-2]>*{width:calc(100% * 1 / 2 - 1em - .01px)}[class*=grid-2]>.flex-item-double{width:calc(100% * 2 / 2 - 1em - .01px)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 1em - .01px)}[class*=grid-3]>.flex-item-double{width:calc(100% * 2 / 3 - 1em - .01px)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 1em - .01px)}[class*=grid-4]>.flex-item-double{width:calc(100% * 2 / 4 - 1em - .01px)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 1em - .01px)}[class*=grid-5]>.flex-item-double{width:calc(100% * 2 / 5 - 1em - .01px)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 1em - .01px)}[class*=grid-6]>.flex-item-double{width:calc(100% * 2 / 6 - 1em - .01px)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 1em - .01px)}[class*=grid-7]>.flex-item-double{width:calc(100% * 2 / 7 - 1em - .01px)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 1em - .01px)}[class*=grid-8]>.flex-item-double{width:calc(100% * 2 / 8 - 1em - .01px)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 1em - .01px)}[class*=grid-10]>.flex-item-double{width:calc(100% * 2 / 10 - 1em - .01px)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 1em - .01px)}[class*=grid-12]>.flex-item-double{width:calc(100% * 2 / 12 - 1em - .01px)}@media (max-width:768px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 1em - .01px)}[class*="-small-4"]>.flexitem-double{width:calc(100% * 1 / 2 - 1em - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 1em - .01px)}[class*="-small-3"]>.flexitem-double{width:calc(100% * 2 / 3 - 1em - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 1em - .01px)}[class*="-small-2"]>.flexitem-double,[class*="-small-1"]>*,[class*="-small-1"]>.flexitem-double{width:calc(100% - 1em - .01px)}}@media (max-width:480px){[class*="-tiny-2"]>*{width:calc(100% * 1 / 2 - 1em - .01px)}[class*="-tiny-2"]>.flexitem-double,[class*="-tiny-1"]>*,[class*="-tiny-1"]>.flexitem-double{width:calc(100% - 1em - .01px)}}.grid-2-1>:nth-child(odd){width:calc(66.66666666666666% - 1em - .01px)}.grid-2-1>:nth-child(even){width:calc(33.33333333333333% - 1em - .01px)}@media (max-width:480px){.grid-2-1>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-1-2>:nth-child(odd){width:calc(33.33333333333333% - 1em - .01px)}.grid-1-2>:nth-child(even){width:calc(66.66666666666666% - 1em - .01px)}@media (max-width:480px){.grid-1-2>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-3-1>:nth-child(odd){width:calc(75% - 1em - .01px)}.grid-3-1>:nth-child(even){width:calc(25% - 1em - .01px)}@media (max-width:480px){.grid-3-1>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-1-3>:nth-child(odd){width:calc(25% - 1em - .01px)}.grid-1-3>:nth-child(even){width:calc(75% - 1em - .01px)}@media (max-width:480px){.grid-1-3>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-3-2>:nth-child(odd){width:calc(60% - 1em - .01px)}.grid-3-2>:nth-child(even){width:calc(40% - 1em - .01px)}@media (max-width:480px){.grid-3-2>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-2-3>:nth-child(odd){width:calc(40% - 1em - .01px)}.grid-2-3>:nth-child(even){width:calc(60% - 1em - .01px)}@media (max-width:480px){.grid-2-3>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-4-1>:nth-child(odd){width:calc(80% - 1em - .01px)}.grid-4-1>:nth-child(even){width:calc(20% - 1em - .01px)}@media (max-width:480px){.grid-4-1>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-1-4>:nth-child(odd){width:calc(20% - 1em - .01px)}.grid-1-4>:nth-child(even){width:calc(80% - 1em - .01px)}@media (max-width:480px){.grid-1-4>:nth-child(n){width:calc(100% - 1em - .01px)}}.table,table{width:100%;border-collapse:collapse}.table{display:table}.btn,label{display:inline-block}#recaptcha_table,table.table-auto{table-layout:auto}td,th{min-width:20px}fieldset,form{border:none}.btn,button,input,label,select{vertical-align:middle;font-family:inherit;font-size:inherit}label{vertical-align:middle;cursor:pointer}legend{border:0;white-space:normal}textarea{min-height:5em;vertical-align:top;font-family:inherit;font-size:inherit;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{outline:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.3333%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w66{width:66.6666%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w50p{width:50px}.w100p{width:100px}.w150p{width:150px}.w200p{width:200px}.w300p{width:300px}.w400p{width:400px}.w500p{width:500px}.w600p{width:600px}.w700p{width:700px}.w800p{width:800px}.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}.wauto{width:auto}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:10px}.mam{margin:20px}.mal{margin:40px}.pas{padding:10px}.pam{padding:20px}.pal{padding:40px}.mt0,.mtn{margin-top:0}.mts{margin-top:10px}.mtm{margin-top:20px}.mtl{margin-top:40px}.mr0,.mrn{margin-right:0}.mrs{margin-right:10px}.mrm{margin-right:20px}.mrl{margin-right:40px}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:10px}.mbm{margin-bottom:20px}.mbl{margin-bottom:40px}.ml0,.mln{margin-left:0}.mls{margin-left:10px}.mlm{margin-left:20px}.mll{margin-left:40px}.pt0,.ptn{padding-top:0}.pts{padding-top:10px}.ptm{padding-top:20px}.ptl{padding-top:40px}.pr0,.prn{padding-right:0}.prs{padding-right:10px}.prm{padding-right:20px}.prl{padding-right:40px}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:10px}.pbm{padding-bottom:20px}.pbl{padding-bottom:40px}.pl0,.pln{padding-left:0}.pls{padding-left:10px}.plm{padding-left:20px}.pll{padding-left:40px}@media (min-width:1025px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-row{display:table;table-layout:fixed;width:100%!important}.large-col{display:table-cell;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.3333%!important}.large-w50{width:50%!important}.large-w66{width:66.6666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-man{margin:0!important}}@media (min-width:769px) and (max-width:1024px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-row{display:table;table-layout:fixed;width:100%!important}.medium-col{display:table-cell;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.3333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.6666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:481px) and (max-width:768px){.mw960p,.w600p,.w700p,.w800p,.w960p{width:auto;float:none}.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-row{display:table!important;table-layout:fixed!important;width:100%!important}.small-col{display:table-cell!important;vertical-align:top!important}.small-w25{width:25%!important}.small-w33{width:33.3333%!important}.small-w50{width:50%!important}.small-w66{width:66.6666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:480px){.col,.mod,.row,fieldset{display:block!important}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.w300p,.w400p,.w500p{width:auto;float:none}.row,.tiny-row{width:100%!important}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-row{display:table!important;table-layout:fixed!important}.tiny-col{display:table-cell!important;vertical-align:top!important}td,th{display:block;width:auto;text-align:left}thead{display:none}.tiny-w25{width:25%!important}.tiny-w33{width:33.3333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.6666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto!important;margin:auto!important;font-family:serif;font-size:12pt;background-color:#fff!important;color:#333!important}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,ol,p,ul{color:#000!important;margin:auto!important}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000!important;text-decoration:underline!important}a[href]::after{content:" (" attr(href) ")"}a[href^="javascript:"]::after,a[href^="#"]::after{content:""}}.aligncenter,hr{clear:both;display:block}.skip-links a{clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}.skip-links a:focus{position:static;overflow:visible;clip:auto}@media (max-width:768px){code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}}.gm-style img{height:100%}:not(.gm-style) img{height:auto}.gm-style img,.gmnoprint img,.gmnoscreen img{max-width:none!important}.widget select,.wp-caption{max-width:100%}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{padding:2px 4px;background:rgba(0,0,0,.04);color:#b11}pre code{padding:none;background:0 0;color:inherit;border-radius:0}mark{padding:2px 4px}sub,sup{vertical-align:0}blockquote{position:relative;padding-left:3em}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}blockquote>footer::before{content:"\2014 \0020"}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{box-sizing:content-box;height:1px;margin:1em 0 2em;padding:0;border:0;color:#ccc;background-color:#ccc}.table,table{border:1px solid #ccc}caption{padding:10px;color:#555}td,th{padding:.3em .8em;border:1px dotted #aaa;text-align:left}.table-alternate{border:0}.table-alternate tbody{border:1px solid #ccc}.table-alternate thead tr>*+*{border-left:0}.table-alternate tbody tr>*+*{border-left:1px solid #ccc}.table-alternate-v{border:0;border-right:1px solid #ccc}.table-alternate-v tr>:first-child{border-bottom:0}.table-alternate-v tr>*+*{border-top:1px solid #ccc}.table-striped tbody tr:nth-child(odd),.table-striped-v tr>:first-child{background:#eee;background:rgba(0,0,0,.05)}.comment-navigation,.paging-navigation,.post-navigation{margin:0 0 1.5em;overflow:hidden}.comment-navigation .nav-previous,.paging-navigation .nav-previous,.post-navigation .nav-previous{float:left;width:50%}.comment-navigation .nav-next,.paging-navigation .nav-next,.post-navigation .nav-next{float:right;text-align:right;width:50%}.alignnone{margin:.25em 1.5em 1.5em 0}.aligncenter{margin:1.5em auto}.alignleft{float:left;margin:0 1.5em .25em 0}.alignright{float:right;margin:0 0 .25em 1.5em}.comment-content,.entry-content{clear:both}.comment-content::after,.comment-content::before,.entry-content::after,.entry-content::before{content:"";display:table}.widget+.widget{margin:1.5em 0 0}.hentry{margin:0 0 1.5em}.entry-content,.entry-summary,.page-content{margin:1.5em 0 0}.page-links{clear:both;margin:0 0 1.5em}.comment-content a{word-wrap:break-word}img.wp-smiley{margin-bottom:0;margin-top:0;padding:0;border:none}.wp-caption{margin-bottom:1.5em}.wp-caption img{display:block;margin:0 auto}.wp-caption-text{margin:1em 0;text-align:center}.gallery{margin-bottom:1.5em}.gallery-item{display:inline-block;width:100%;text-align:center;vertical-align:top}.gallery-columns-2 .gallery-item{max-width:50%}.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery-columns-4 .gallery-item{max-width:25%}.gallery-columns-5 .gallery-item{max-width:20%}.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery-caption{display:block} \ No newline at end of file +*//*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */a:active,a:focus,a:hover,body,mark{color:#000}.row,.table,table{table-layout:fixed}.table,blockquote,code,img,input,pre,svg,table,td,textarea,video{max-width:100%}.col,.inbl,.row>*,.table,table,td,th{vertical-align:top}.italic,address,caption,cite,dfn,em,i,var{font-style:italic}html{font-family:sans-serif;box-sizing:border-box;font-size:62.5%;font-size:calc(1em * .625);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;color:#333}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}h1{margin:.67em 0}mark{background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em;bottom:1ex}sub{bottom:-.25em;top:.5ex}img{border:0;vertical-align:middle}svg:not(:root){overflow:hidden}figure{margin:1em 40px}pre,textarea{overflow:auto}code,kbd,pre,samp{font-size:1em}button,input,optgroup,select,textarea{font:inherit;margin:0;color:#000}.h1-like,.h2-like,body,h1,h2{font-family:Helvetica,Arial,sans-serif}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled],td,th{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{padding:0}*{box-sizing:inherit}ol,ul{padding-left:2em}ul.unstyled{list-style:none}img:not([src$=".svg"]){height:auto}blockquote,figure{margin-left:0;margin-right:0}body{margin:0;font-size:1.4em;background-color:#fff;line-height:1.5}.center,.left{margin-right:auto}.center,.right{margin-left:auto}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}.h1-like,h1{font-size:3.2rem}.h2-like,h2{font-size:2.8rem}.h3-like,h3{font-size:2.4rem}.h4-like,h4{font-size:2rem}.h5-like,h5{font-size:1.8rem}.h6-like,h6{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:Consolas,"DejaVu Sans Mono",Courier,monospace;line-height:normal}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(1px,1px,1px,1px)!important}.bfc,.mod,.skip-links a{overflow:hidden}.skip-links,.skip-links a{position:absolute}@media (max-width:640px){.no-small-screen{display:none}}@media (min-width:1280px){.no-large-screen{display:none}}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}table{border-spacing:0;margin-bottom:2rem}.clear,.line,.row{clear:both}.clearfix::after,.line::after{content:"";display:table;clear:both;border-collapse:collapse}.txtleft{text-align:left}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:1rem}.fr{float:right}img.fr{margin-left:1rem}img.fl,img.fr{margin-bottom:.5rem}.row{display:table;width:100%}.col,.row>*{display:table-cell}body>script{display:none!important}.inbl{display:inline-block}.flex-container,[class*=flex-container]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flex-item-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-item-medium{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.flex-item-last{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flex-item-center{margin:auto}[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-1em;letter-spacing:-.31em;text-rendering:optimizespeed}[class*=grid-]>*{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% * 1 / 4 - 1em - .01px);margin-left:1em;display:inline-block;vertical-align:top;letter-spacing:normal;text-rendering:auto}[class*=grid-2]>*{width:calc(100% * 1 / 2 - 1em - .01px)}[class*=grid-2]>.flex-item-double{width:calc(100% * 2 / 2 - 1em - .01px)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 1em - .01px)}[class*=grid-3]>.flex-item-double{width:calc(100% * 2 / 3 - 1em - .01px)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 1em - .01px)}[class*=grid-4]>.flex-item-double{width:calc(100% * 2 / 4 - 1em - .01px)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 1em - .01px)}[class*=grid-5]>.flex-item-double{width:calc(100% * 2 / 5 - 1em - .01px)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 1em - .01px)}[class*=grid-6]>.flex-item-double{width:calc(100% * 2 / 6 - 1em - .01px)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 1em - .01px)}[class*=grid-7]>.flex-item-double{width:calc(100% * 2 / 7 - 1em - .01px)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 1em - .01px)}[class*=grid-8]>.flex-item-double{width:calc(100% * 2 / 8 - 1em - .01px)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 1em - .01px)}[class*=grid-10]>.flex-item-double{width:calc(100% * 2 / 10 - 1em - .01px)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 1em - .01px)}[class*=grid-12]>.flex-item-double{width:calc(100% * 2 / 12 - 1em - .01px)}@media (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 1em - .01px)}[class*="-small-4"]>.flexitem-double{width:calc(100% * 1 / 2 - 1em - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 1em - .01px)}[class*="-small-3"]>.flexitem-double{width:calc(100% * 2 / 3 - 1em - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 1em - .01px)}[class*="-small-2"]>.flexitem-double,[class*="-small-1"]>*,[class*="-small-1"]>.flexitem-double{width:calc(100% - 1em - .01px)}}@media (max-width:320px){[class*="-tiny-2"]>*{width:calc(100% * 1 / 2 - 1em - .01px)}[class*="-tiny-2"]>.flexitem-double,[class*="-tiny-1"]>*,[class*="-tiny-1"]>.flexitem-double{width:calc(100% - 1em - .01px)}}.grid-2-1>:nth-child(odd){width:calc(66.66666666666666% - 1em - .01px)}.grid-2-1>:nth-child(even){width:calc(33.33333333333333% - 1em - .01px)}@media (max-width:320px){.grid-2-1>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-1-2>:nth-child(odd){width:calc(33.33333333333333% - 1em - .01px)}.grid-1-2>:nth-child(even){width:calc(66.66666666666666% - 1em - .01px)}@media (max-width:320px){.grid-1-2>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-3-1>:nth-child(odd){width:calc(75% - 1em - .01px)}.grid-3-1>:nth-child(even){width:calc(25% - 1em - .01px)}@media (max-width:320px){.grid-3-1>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-1-3>:nth-child(odd){width:calc(25% - 1em - .01px)}.grid-1-3>:nth-child(even){width:calc(75% - 1em - .01px)}@media (max-width:320px){.grid-1-3>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-3-2>:nth-child(odd){width:calc(60% - 1em - .01px)}.grid-3-2>:nth-child(even){width:calc(40% - 1em - .01px)}@media (max-width:320px){.grid-3-2>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-2-3>:nth-child(odd){width:calc(40% - 1em - .01px)}.grid-2-3>:nth-child(even){width:calc(60% - 1em - .01px)}@media (max-width:320px){.grid-2-3>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-4-1>:nth-child(odd){width:calc(80% - 1em - .01px)}.grid-4-1>:nth-child(even){width:calc(20% - 1em - .01px)}@media (max-width:320px){.grid-4-1>:nth-child(n){width:calc(100% - 1em - .01px)}}.grid-1-4>:nth-child(odd){width:calc(20% - 1em - .01px)}.grid-1-4>:nth-child(even){width:calc(80% - 1em - .01px)}@media (max-width:320px){.grid-1-4>:nth-child(n){width:calc(100% - 1em - .01px)}}.table,table{width:100%;border-collapse:collapse}.table{display:table}.btn,label{display:inline-block}#recaptcha_table,table.table-auto{table-layout:auto}td,th{min-width:2rem}fieldset,form{border:none}.btn,button,input,label,select{vertical-align:middle;font-family:inherit;font-size:inherit}label{vertical-align:middle;cursor:pointer}legend{border:0;white-space:normal}textarea{min-height:5em;vertical-align:top;font-family:inherit;font-size:inherit;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{outline:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.3333%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w66{width:66.6666%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w50p{width:50px}.w100p{width:100px}.w150p{width:150px}.w200p{width:200px}.w300p{width:300px}.w400p{width:400px}.w500p{width:500px}.w600p{width:600px}.w700p{width:700px}.w800p{width:800px}.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}.wauto{width:auto}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:1rem}.mam{margin:2rem}.mal{margin:4rem}.pas{padding:1rem}.pam{padding:2rem}.pal{padding:4rem}.mt0,.mtn{margin-top:0}.mts{margin-top:1rem}.mtm{margin-top:2rem}.mtl{margin-top:4rem}.mr0,.mrn{margin-right:0}.mrs{margin-right:1rem}.mrm{margin-right:2rem}.mrl{margin-right:4rem}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:1rem}.mbm{margin-bottom:2rem}.mbl{margin-bottom:4rem}.ml0,.mln{margin-left:0}.mls{margin-left:1rem}.mlm{margin-left:2rem}.mll{margin-left:4rem}.pt0,.ptn{padding-top:0}.pts{padding-top:1rem}.ptm{padding-top:2rem}.ptl{padding-top:4rem}.pr0,.prn{padding-right:0}.prs{padding-right:1rem}.prm{padding-right:2rem}.prl{padding-right:4rem}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:1rem}.pbm{padding-bottom:2rem}.pbl{padding-bottom:4rem}.pl0,.pln{padding-left:0}.pls{padding-left:1rem}.plm{padding-left:2rem}.pll{padding-left:4rem}@media (min-width:961px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-row{display:table;table-layout:fixed;width:100%!important}.large-col{display:table-cell;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.3333%!important}.large-w50{width:50%!important}.large-w66{width:66.6666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-man{margin:0!important}}@media (min-width:641px) and (max-width:960px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-row{display:table;table-layout:fixed;width:100%!important}.medium-col{display:table-cell;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.3333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.6666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:321px) and (max-width:640px){.mw960p,.w600p,.w700p,.w800p,.w960p{width:auto;float:none}.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-row{display:table!important;table-layout:fixed!important;width:100%!important}.small-col{display:table-cell!important;vertical-align:top!important}.small-w25{width:25%!important}.small-w33{width:33.3333%!important}.small-w50{width:50%!important}.small-w66{width:66.6666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:320px){.col,.mod,.row,fieldset{display:block!important}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.w300p,.w400p,.w500p{width:auto;float:none}.row,.tiny-row{width:100%!important}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-row{display:table!important;table-layout:fixed!important}.tiny-col{display:table-cell!important;vertical-align:top!important}td,th{display:block;width:auto;text-align:left}thead{display:none}.tiny-w25{width:25%!important}.tiny-w33{width:33.3333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.6666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto!important;margin:auto!important;font-family:serif;font-size:12pt;background-color:#fff!important;color:#333!important}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,ol,p,ul{color:#000!important;margin:auto!important}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000!important;text-decoration:underline!important}a[href]::after{content:" (" attr(href) ")"}a[href^="javascript:"]::after,a[href^="#"]::after{content:""}}.aligncenter,hr{clear:both;display:block}.skip-links a{clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}.skip-links a:focus{position:static;overflow:visible;clip:auto}@media (max-width:640px){code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}}.gm-style img{height:100%}:not(.gm-style) img{height:auto}.gm-style img,.gmnoprint img,.gmnoscreen img{max-width:none!important}.widget select,.wp-caption{max-width:100%}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{padding:2px 4px;background:rgba(0,0,0,.04);color:#b11}pre code{padding:none;background:0 0;color:inherit;border-radius:0}mark{padding:2px 4px}sub,sup{vertical-align:0}blockquote{position:relative;padding-left:3em}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}blockquote>footer::before{content:"\2014 \0020"}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{box-sizing:content-box;height:1px;margin:1em 0 2em;padding:0;border:0;color:#ccc;background-color:#ccc}.table,table{border:1px solid #ccc}caption{padding:1rem;color:#555}td,th{padding:.3em .8em;border:1px dotted #aaa;text-align:left}.table-alternate{border:0}.table-alternate tbody{border:1px solid #ccc}.table-alternate thead tr>*+*{border-left:0}.table-alternate tbody tr>*+*{border-left:1px solid #ccc}.table-alternate-v{border:0;border-right:1px solid #ccc}.table-alternate-v tr>:first-child{border-bottom:0}.table-alternate-v tr>*+*{border-top:1px solid #ccc}.table-striped tbody tr:nth-child(odd),.table-striped-v tr>:first-child{background:#eee;background:rgba(0,0,0,.05)}.comment-navigation,.paging-navigation,.post-navigation{margin:0 0 1.5em;overflow:hidden}.comment-navigation .nav-previous,.paging-navigation .nav-previous,.post-navigation .nav-previous{float:left;width:50%}.comment-navigation .nav-next,.paging-navigation .nav-next,.post-navigation .nav-next{float:right;text-align:right;width:50%}.alignnone{margin:.25em 1.5em 1.5em 0}.aligncenter{margin:1.5em auto}.alignleft{float:left;margin:0 1.5em .25em 0}.alignright{float:right;margin:0 0 .25em 1.5em}.comment-content,.entry-content{clear:both}.comment-content::after,.comment-content::before,.entry-content::after,.entry-content::before{content:"";display:table}.widget+.widget{margin:1.5em 0 0}.hentry{margin:0 0 1.5em}.entry-content,.entry-summary,.page-content{margin:1.5em 0 0}.page-links{clear:both;margin:0 0 1.5em}.comment-content a{word-wrap:break-word}img.wp-smiley{margin-bottom:0;margin-top:0;padding:0;border:none}.wp-caption{margin-bottom:1.5em}.wp-caption img{display:block;margin:0 auto}.wp-caption-text{margin:1em 0;text-align:center}.gallery{margin-bottom:1.5em}.gallery-item{display:inline-block;width:100%;text-align:center;vertical-align:top}.gallery-columns-2 .gallery-item{max-width:50%}.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery-columns-4 .gallery-item{max-width:25%}.gallery-columns-5 .gallery-item{max-width:20%}.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery-caption{display:block} \ No newline at end of file diff --git a/doc/07-responsive.md b/doc/07-responsive.md index 170a3c0..8a73728 100644 --- a/doc/07-responsive.md +++ b/doc/07-responsive.md @@ -4,12 +4,20 @@ Par défaut, KNACSS tient compte des valeurs de points de rupture suivants : -- "tiny" : correspond à une fenêtre de 480px ou moins -- "small" : correspond à une fenêtre entre 481px et 768px inclus -- "medium"correspond à une fenêtre entre 769px et 1024px inclus -- "large"correspond à une fenêtre entre 1025px et 1280px inclus -- "extra-large"correspond à une fenêtre entre 1281px et 1600px inclus -- "ultra-large"correspond à une fenêtre à partir de 1601px +``` +// breakpoints (choose unit you prefer) +@tiny-screen : 320px; // tiny screens media query (less-equal than 320px) +@tiny-plus-screen : 480px; // screens between 321px and 480px +@small-screen : 640px; // screens between 481px and 640px +@small-plus-screen : 768px; // screens between 641px and 768px +@medium-screen : 960px; // screens between 769px and 960px +@medium-plus-screen : 1024px; // screens between 961px and 1024px +@large-screen : 1280px; // screens between 1025px and 1280px +@large-plus-screen : 1440px; // screens between 1281px and 1440px +@extra-large-screen : 1600px; // screens between 1441px and 1600px +@ultra-large-screen : 1920px; // ultra large screens +``` + _Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._ diff --git a/less/_00-config.less b/less/_00-config.less index 0563538..7e87c5c 100644 --- a/less/_00-config.less +++ b/less/_00-config.less @@ -35,19 +35,29 @@ @secondary-background : #fff; // secondary elements background color // spacings (choose unit you prefer) -@tiny-value : 5px; // tiny value for margins / paddings -@small-value : 10px; // small value for margins / paddings -@medium-value : 20px; // medium value for margins / paddings -@large-value : 40px; // large value for margins / paddings -@extra-large-value : 80px; // extra large value for margins / paddings -@ultra-large-value : 160px; // ultra large value for margins / paddings +@tiny-value : .5rem; // tiny value for margins / paddings +@tiny-plus-value : .7rem; // tiny+ value for margins / paddings +@small-value : 1rem; // small value for margins / paddings +@small-plus-value : 1.5rem; // small+ value for margins / paddings +@medium-value : 2rem; // medium value for margins / paddings +@medium-plus-value : 3rem; // medium+ value for margins / paddings +@large-value : 4rem; // large value for margins / paddings +@large-plus-value : 6rem; // large value for margins / paddings +@extra-large-value : 8rem; // extra large value for margins / paddings +@extra-large-plus-value : 12rem; // extra large value for margins / paddings +@ultra-large-value : 16rem; // ultra large value for margins / paddings +@ultra-large-plus-value : 20rem; // ultra large value for margins / paddings // breakpoints (choose unit you prefer) -@tiny-screen : 480px; // tiny screens media query (less than 480px) -@small-screen : 768px; // screens between 481px and 768px -@medium-screen : 1024px; // screens between 769px and 1024px +@tiny-screen : 320px; // tiny screens media query (less-equal than 320px) +@tiny-plus-screen : 480px; // screens between 321px and 480px +@small-screen : 640px; // screens between 481px and 640px +@small-plus-screen : 768px; // screens between 641px and 768px +@medium-screen : 960px; // screens between 769px and 960px +@medium-plus-screen : 1024px; // screens between 961px and 1024px @large-screen : 1280px; // screens between 1025px and 1280px -@extra-large-screen : 1600px; // screens between 1281px and 1600px +@large-plus-screen : 1440px; // screens between 1281px and 1440px +@extra-large-screen : 1600px; // screens between 1441px and 1600px @ultra-large-screen : 1920px; // ultra large screens // grids variables (choose unit you prefer) diff --git a/sass/_00-config.scss b/sass/_00-config.scss index 8812c77..e510f74 100644 --- a/sass/_00-config.scss +++ b/sass/_00-config.scss @@ -35,19 +35,29 @@ $primary-background : #fff !default; // primary elements background color $secondary-background : #fff !default; // secondary elements background color // spacings (choose unit you prefer) -$tiny-value : 5px !default; // tiny value for margins / paddings -$small-value : 10px !default; // small value for margins / paddings -$medium-value : 20px !default; // medium value for margins / paddings -$large-value : 40px !default; // large value for margins / paddings -$extra-large-value : 80px !default; // extra large value for margins / paddings -$ultra-large-value : 160px !default; // ultra large value for margins / paddings +$tiny-value : .5rem !default; // tiny value for margins / paddings +$tiny-plus-value : .7rem !default; // tiny+ value for margins / paddings +$small-value : 1rem !default; // small value for margins / paddings +$small-plus-value : 1.5rem !default; // small+ value for margins / paddings +$medium-value : 2rem !default; // medium value for margins / paddings +$medium-plus-value : 3rem !default; // medium+ value for margins / paddings +$large-value : 4rem !default; // large value for margins / paddings +$large-plus-value : 6rem !default; // large value for margins / paddings +$extra-large-value : 8rem !default; // extra large value for margins / paddings +$extra-large-plus-value : 12rem !default; // extra large value for margins / paddings +$ultra-large-value : 16rem !default; // ultra large value for margins / paddings +$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings // breakpoints (choose unit you prefer) -$tiny-screen : 480px !default; // tiny screens media query (less than 480px) -$small-screen : 768px !default; // screens between 481px and 768px -$medium-screen : 1024px !default; // screens between 769px and 1024px +$tiny-screen : 320px !default; // tiny screens media query (less-equal than 320px) +$tiny-plus-screen : 480px !default; // screens between 321px and 480px +$small-screen : 640px !default; // screens between 481px and 640px +$small-plus-screen : 768px !default; // screens between 641px and 768px +$medium-screen : 960px !default; // screens between 769px and 960px +$medium-plus-screen : 1024px !default; // screens between 961px and 1024px $large-screen : 1280px !default; // screens between 1025px and 1280px -$extra-large-screen : 1600px !default; // screens between 1281px and 1600px +$large-plus-screen : 1440px !default; // screens between 1281px and 1440px +$extra-large-screen : 1600px !default; // screens between 1441px and 1600px $ultra-large-screen : 1920px !default; // ultra large screens // grids variables (choose unit you prefer)