From 521e568e23b2edd42bcde0de6cb44725e94e20cf Mon Sep 17 00:00:00 2001 From: raphaelgoettter Date: Fri, 18 Jul 2014 11:15:54 +0200 Subject: [PATCH] delete experimental future-proof version --- future-proof/.pleeeaserc | 15 - future-proof/_README.md | 18 - future-proof/css-includes/00-config.css | 46 - future-proof/css-includes/01-base.css | 637 ------- future-proof/css-includes/02-grids.css | 225 --- future-proof/css-includes/03-tables.css | 39 - future-proof/css-includes/04-forms.css | 89 - future-proof/css-includes/05-icons.css | 159 -- future-proof/css-includes/06-rwd.css | 275 --- future-proof/css-includes/07-flexbox.css | 30 - future-proof/css-includes/08-print.css | 87 - future-proof/css-includes/09-booleans.css | 38 - future-proof/css-includes/10-gmaps.css | 18 - future-proof/css-includes/11-ie.css | 76 - future-proof/css-includes/12-styling.css | 119 -- future-proof/css-includes/knacss.css | 18 - future-proof/styles.css | 8 - future-proof/styles.min.css | 1880 --------------------- 18 files changed, 3777 deletions(-) delete mode 100644 future-proof/.pleeeaserc delete mode 100644 future-proof/_README.md delete mode 100644 future-proof/css-includes/00-config.css delete mode 100644 future-proof/css-includes/01-base.css delete mode 100644 future-proof/css-includes/02-grids.css delete mode 100644 future-proof/css-includes/03-tables.css delete mode 100644 future-proof/css-includes/04-forms.css delete mode 100644 future-proof/css-includes/05-icons.css delete mode 100644 future-proof/css-includes/06-rwd.css delete mode 100644 future-proof/css-includes/07-flexbox.css delete mode 100644 future-proof/css-includes/08-print.css delete mode 100644 future-proof/css-includes/09-booleans.css delete mode 100644 future-proof/css-includes/10-gmaps.css delete mode 100644 future-proof/css-includes/11-ie.css delete mode 100644 future-proof/css-includes/12-styling.css delete mode 100644 future-proof/css-includes/knacss.css delete mode 100644 future-proof/styles.css delete mode 100644 future-proof/styles.min.css diff --git a/future-proof/.pleeeaserc b/future-proof/.pleeeaserc deleted file mode 100644 index 6acaf5b..0000000 --- a/future-proof/.pleeeaserc +++ /dev/null @@ -1,15 +0,0 @@ -{ - "input": "styles.css", - "output": "styles.min.css", - "fallbacks": { - "autoprefixer": true, - "variables": true, - "rem": ["62.5%", {"replace": false}], - "pseudoElements": true - }, - "optimizers": { - "import": true, - "minifier": false, - "mqpacker": true - } -} \ No newline at end of file diff --git a/future-proof/_README.md b/future-proof/_README.md deleted file mode 100644 index ddd5b1e..0000000 --- a/future-proof/_README.md +++ /dev/null @@ -1,18 +0,0 @@ -KNACSS-canary is an **experimental version** for KNACSS. - -No preprocessors, nos cheats. Only pure, standard CSS. - -Uses : -- standards CSS variables -- calc() -- rem -- other standards - -Needs : -- a CSS post-processor such as www.pleeease.io in order to polyfill every features used - -Config : -- install nodeJS -- install Pleeease : `npm install pleeease -g` -- adjust `.pleeeaserc` config to your needs -- the `styles.css` file imports KNACSS and will be watched and compiled to `styles.min.css` with a simple `pleeease compile` or `pleeease watch` command diff --git a/future-proof/css-includes/00-config.css b/future-proof/css-includes/00-config.css deleted file mode 100644 index 6191f10..0000000 --- a/future-proof/css-includes/00-config.css +++ /dev/null @@ -1,46 +0,0 @@ -/* Config file : variables, mixins, ... */ - -:root { - - /* font sizes */ - --base-font-size : 14; /* if "14" then 1em = 14px */ - --line-height : 1.5; /* equiv line-height 1.5 */ - --h1-size : 3.2rem; /* equiv "32px" */ - --h2-size : 2.8rem; /* equiv "28px" */ - --h3-size : 2.4rem; /* equiv "24px" */ - --h4-size : 2.0rem; /* equiv "20px" */ - --h5-size : 1.8rem; /* equiv "18px" */ - --h6-size : 1.6rem; /* equiv "16px" */ - - /* font stacks */ - --font-stack-common : Helvetica, Arial, sans-serif; - --font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; - --font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; - - /* font colors */ - --base-color : #000; /* text color on body */ - --base-color-link : #333; /* primary links color */ - --base-color-link-hover : #000; /* primary hovered/focused links color */ - - /* backgrounds */ - --base-background : #fff; /* body background color */ - - /* spacings */ - --tiny-value : 0.5em; /* tiny value for margins / paddings */ - --small-value : 1em; /* small value for margins / paddings */ - --medium-value : 2em; /* medium value for margins / paddings */ - --large-value : 4em; /* large value for margins / paddings */ - --extra-large-value : 6em; /* extra large value for margins / paddings */ - --ultra-large-value : 10em; /* ultra large value for margins / paddings */ - - /* breakpoints */ - --tiny-screen : 320px; /* tiny screens media query */ - --small-screen : 480px; /* small screens media query */ - --medium-screen : 768px; /* small screens media query */ - --large-screen : 1024px; /* large screens media query */ - --extra-large-screen : 1280px; /* extra large screens media query */ - --ultra-large-screen : 1600px; /* ultra large screens media query */ - - /* misc */ - --gutter : 20px; /* gutter value (%, px, em, rem) for grid layouts */ -} \ No newline at end of file diff --git a/future-proof/css-includes/01-base.css b/future-proof/css-includes/01-base.css deleted file mode 100644 index 0a190f3..0000000 --- a/future-proof/css-includes/01-base.css +++ /dev/null @@ -1,637 +0,0 @@ -/*! -* www.KNACSS.com V3.0.3 (2014-05-21) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ -*/ - -/* ----------------------------- */ -/* == soft reset */ -/* ----------------------------- */ - -/* switching box model for all elements */ -* { - box-sizing: border-box; -} - -/* soft reset */ -html, -body { - margin: 0; - padding: 0; -} - -ul, -ol { - padding-left: 2em; -} - -ul.unstyled { - list-style: none; -} - -img { - height: auto; - vertical-align: middle; - border: 0; -} - -audio, -canvas, -video { - display: inline-block; -} - -svg:not(:root) { - overflow: hidden; -} - -/* ----------------------------- */ -/* == typography */ -/* ----------------------------- */ - - -html { - - /* set base font-size to equiv "10px", which is adapted to rem unit */ - font-size: 62.5%; - - /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ - /* thanks to @guardian, @victorbritopro and @eQRoeil */ - font-size: calc(1em * 0.625); - - /* disallow text zooming on orientation change (non standard property) */ - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -body { - - /* set body font-size in em (1.4em equiv "14px") */ - font-size: calc(var(--base-font-size) * 0.1em); - - background-color: var(--base-background); - color: var(--base-color); - font-family: var(--font-stack-common); - line-height: var(--line-height); -} - -/* font-sizing for content */ -p, -.p-like, -ul, -ol, -dl, -blockquote, -pre, -td, -th, -label, -textarea, -caption, -details, -figure { - margin-top: 0.75em; - margin-bottom: 0; - line-height: var(--line-height); -} - -h1, -.h1-like { - font-size: var(--h1-size); -} - -h2, -.h2-like { - font-size: var(--h2-size); -} - -h3, -.h3-like { - font-size: var(--h3-size); -} - -h4, -.h4-like { - font-size: var(--h4-size); -} - -h5, -.h5-like { - font-size: var(--h5-size); -} - -h6, -.h6-like { - font-size: var(--h6-size); -} - -/* alternate font-sizing */ -.smaller { - font-size: 0.7em; -} - -.small { - font-size: 0.9em; -} - -.big { - font-size: 1.1em; -} - -.bigger { - font-size: 1.3em; -} - -.biggest { - font-size: 1.6em; -} - -code, -pre, -samp, -kbd { - /* IE fix */ - white-space: pre-line; - white-space: pre-wrap; - font-family: var(--font-stack-monospace); - line-height: normal; -} -em, -.em, -address, -cite, -dfn, -i, -var { - font-style: italic; -} -.no-em { - font-style: normal; -} -strong, -.strong { - font-weight: bold; -} -.no-strong { - font-weight: normal; -} -small, -sub, -sup { - font-size: smaller; -} - -/* ----------------------------- */ -/* == hiding content */ -/* ----------------------------- */ - -/* hidden but not for assistance tools, Yahoo! method */ -.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; -} - -body > script { - display: none !important; -} - -@media (max-width: 480px) { - .no-small-screen { - display: none; - } -} - -@media (min-width: 1024px) { - .no-large-screen { - display: none; - } -} - -/* ----------------------------- */ -/* == browsers consistency */ -/* ----------------------------- */ - -/* avoid top margins on first content element */ -p:first-child, -.p-like:first-child, -ul:first-child, -ol:first-child, -dl:first-child, -blockquote:first-child, -pre:first-child, -h1:first-child, -h2:first-child, -h3:first-child, -h4:first-child, -h5:first-child, -h6:first-child { - margin-top: 0; -} - -/* avoid margins on nested elements */ -li p, -li .p-like, -li ul, -li ol { - margin-top: 0; - margin-bottom: 0; -} - -/* max values */ -img, -table, -td, -blockquote, -code, -pre, -textarea, -input, -video { - max-width: 100%; -} - -/* margin-bottom on tables */ -table { - margin-bottom: var(--medium-value); -} - -/* ----------------------------- */ -/* ==layout and modules */ -/* ----------------------------- */ - -/* float layout */ -/* module, gains superpower "BFC" Block Formating Context */ -.mod { - overflow: hidden; -} - -/* blocks that needs to be placed under floats */ -.clear, -.line, -.row { - clear: both; -} - -/* blocks that must contain floats */ -.clearfix:after, -.line:after { - content: ""; - display: table; - clear: both; -} - -/* table layout */ -.row { - display: table; - table-layout: fixed; - width: 100%; -} - -.row > *, -.col { - display: table-cell; - vertical-align: top; -} - -/* inline-block */ -.inbl { - display: inline-block; - vertical-align: top; -} - -/* alignments (blocks and inline) */ -/* ------------------------------ */ - -/* left (or starting) elements */ -.left, -.start { - float: left; -} - -img.left, -img.start { - margin-right: var(--small-value); -} - -/* right (or ending) elements */ -.right, -.end { - float: right; -} - -img.right, -img.end { - margin-left: var(--small-value); -} - -img.left, -img.right, -img.start, -img.end { - margin-bottom: var(--tiny-value); -} - -.center { - margin-left: auto; - margin-right: auto; -} - -.txtleft { - text-align: left; -} - -.txtright { - text-align: right; -} - -.txtcenter { - text-align: center; -} - -/* blocks widths (percentage and pixels) */ -.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; -} - -/* spacing helpers -p,m = padding,margin -a,t,r,b,l = all,top,right,bottom,left -s,m,l,n = small, medium, large, none -*/ -.man { - margin: 0; -} - -.pan { - padding: 0; -} - -.mas { - margin: var(--small-value); -} - -.mam { - margin: var(--medium-value); -} - -.mal { - margin: var(--large-value); -} - -.pas { - padding: var(--small-value); -} - -.pam { - padding: var(--medium-value); -} - -.pal { - padding: var(--large-value); -} - -.mtn { - margin-top: 0; -} - -.mts { - margin-top: var(--small-value); -} - -.mtm { - margin-top: var(--medium-value); -} - -.mtl { - margin-top: var(--large-value); -} - -.mrn { - margin-right: 0; -} - -.mrs { - margin-right: var(--small-value); -} - -.mrm { - margin-right: var(--medium-value); -} - -.mrl { - margin-right: var(--large-value); -} - -.mbn { - margin-bottom: 0; -} - -.mbs { - margin-bottom: var(--small-value); -} - -.mbm { - margin-bottom: var(--medium-value); -} - -.mbl { - margin-bottom: var(--large-value); -} - -.mln { - margin-left: 0; -} - -.mls { - margin-left: var(--small-value); -} - -.mlm { - margin-left: var(--medium-value); -} - -.mll { - margin-left: var(--large-value); -} - -.ptn { - padding-top: 0; -} - -.pts { - padding-top: var(--small-value); -} - -.ptm { - padding-top: var(--medium-value); -} - -.ptl { - padding-top: var(--large-value); -} - -.prn { - padding-right: 0; -} - -.prs { - padding-right: var(--small-value); -} - -.prm { - padding-right: var(--medium-value); -} - -.prl { - padding-right: var(--large-value); -} - -.pbn { - padding-bottom: 0; -} - -.pbs { - padding-bottom: var(--small-value); -} - -.pbm { - padding-bottom: var(--medium-value); -} - -.pbl { - padding-bottom: var(--large-value); -} - -.pln { - padding-left: 0; -} - -.pls { - padding-left: var(--small-value); -} - -.plm { - padding-left: var(--medium-value); -} - -.pll { - padding-left: var(--large-value); -} - diff --git a/future-proof/css-includes/02-grids.css b/future-proof/css-includes/02-grids.css deleted file mode 100644 index d21dc25..0000000 --- a/future-proof/css-includes/02-grids.css +++ /dev/null @@ -1,225 +0,0 @@ - -/* ---------------------------------- */ -/* ==classic grids */ -/* .. use it when gutter size matters */ -/* ---------------------------------- */ - -/* grids inspired from SUIT https://github.com/suitcss/suit */ - -/* overall container of grids */ -.grid { - overflow: hidden; -} - -/* global styles for direct child ex. .grid3 */ -.grid > * { - display: block; - padding: 0; - /* gutter value */ - margin-left: -var(--gutter); - text-align: left; -} - -/* global styles for each "cell" */ -.grid > * > * { - display: inline-block; - /* gutter value */ - padding-left: var(--gutter); - margin-left: 0; - vertical-align: top; -} - -/* whitespace fixing for modern browsers including IE9+ */ -:root .grid { - font-size: 0; - /* fallback for IE9+ */ - text-justify: distribute-all-lines; -} - -:root .grid > * > * { - font-size: calc(var(--base-font-size) / 10rem); -} - -/* Opera hack */ -.opera:-o-prefocus, -.grid > * { - word-spacing: -0.43em; -} - -.grid2 > * { - width: 50%; -} - -.grid3 > * { - width: 33.333%; -} - -.grid4 > * { - width: 25%; -} - -.grid5 > * { - width: 20%; -} - -.grid6 > * { - width: 16.667%; -} - -.grid8 > * { - width: 12.5%; -} - -.grid10 > * { - width: 10%; -} - -.grid12 > * { - width: 8.333%; -} - -/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */ -.grid2-1 > *:first-child, -.grid1-2 > * + * { - width: 66.666%; -} - -.grid1-2 > *:first-child, -.grid2-1 > * + * { - width: 33.333%; -} - -.grid1-3 > *:first-child, -.grid3-1 > * + * { - width: 25%; -} - -.grid3-1 > *:first-child, -.grid1-3 > * + * { - width: 75%; -} - -/* Responsiv-o-matic */ -@media (max-width: 1024px) { - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * { - width: 33.333%; - } -} -@media (max-width: 480px) { - .grid3 > *, - .grid4 > *, - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * { - width: 50%; - } -} -@media (max-width: 320px) { - .grid > * > * { - width: 100% !important; - } -} - -/* ---------------------------------- */ -/* ==autogrids */ -/* .. to automatically justify blocs */ -/* ---------------------------------- */ - -/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ - -/* container of autogrids */ -[class*="autogrid"] { - text-align: justify; -} - -[class*="autogrid"]:after { - content: ""; - display: inline-block; - width: 100%; -} - -[class*="autogrid"] > * { - display: inline-block; - vertical-align: top; - text-align: left; -} - -/* whitespace fixing for modern browsers including IE9+ */ -:root [class*="autogrid"] { - font-size: 0; - /* fallback for IE9+ */ - text-justify: distribute-all-lines; -} - -:root [class*="autogrid"] > * { - font-size: calc(var(--base-font-size) / 10rem); -} - -/* Opera hack */ -[class*="autogrid"]:-o-prefocus { - word-spacing: -0.43em; -} - -.autogrid2 > * { - width: 49%; -} - -.autogrid3 > * { - width: 32%; -} - -.autogrid4 > * { - width: 23.6%; -} - -.autogrid5 > * { - width: 19%; -} - -.autogrid6 > * { - width: 15%; -} - -.autogrid8 > * { - width: 10.8%; -} - -.autogrid10 > * { - width: 9%; -} - -.autogrid12 > * { - width: 6.4%; -} - -@media (max-width: 1024px) { - .autogrid5 > *, - .autogrid6 > *, - .autogrid8 > *, - .autogrid10 > *, - .autogrid12 > * { - width: 32%; - } -} - -@media (max-width: 480px) { - .autogrid5 > *, - .autogrid6 > *, - .autogrid8 > *, - .autogrid10 > *, - .autogrid12 > * { - width: 49%; - } -} - -@media (max-width: 320px) { - [class*="autogrid"] > * { - width: 100%; - } -} diff --git a/future-proof/css-includes/03-tables.css b/future-proof/css-includes/03-tables.css deleted file mode 100644 index 2ba3e2e..0000000 --- a/future-proof/css-includes/03-tables.css +++ /dev/null @@ -1,39 +0,0 @@ - -/* ----------------------------- */ -/* ==tables */ -/* ----------------------------- */ - -table, -.table { - width: 100%; - max-width : 100%; - table-layout: fixed; - border-collapse: collapse; - vertical-align: top; - border: 1px solid #ccc; -} - -.table { - display: table; -} - -table#recaptcha_table, -table.table-auto { - table-layout:auto; -} - -caption { - padding: var(--small-value); - color: #555; - font-style: italic; -} - -td, -th { - padding: 0.3em 0.8em; - border: 1px #aaa dotted; - vertical-align: top; - min-width: var(--medium-value); - cursor: default; - text-align: left; -} diff --git a/future-proof/css-includes/04-forms.css b/future-proof/css-includes/04-forms.css deleted file mode 100644 index cd4a570..0000000 --- a/future-proof/css-includes/04-forms.css +++ /dev/null @@ -1,89 +0,0 @@ -/* ----------------------------- */ -/* ==forms */ -/* ----------------------------- */ - -/* thanks to HTML5boilerplate, -* github.com/nathansmith/formalize and www.sitepen.com -*/ - -/* buttons */ -.btn { - display: inline-block; -} - -/* forms items */ -form, -fieldset { - border: none; -} - -input, -button, -select, -label, -.btn { - vertical-align: middle; - font-family: inherit; - font-size: inherit; -} - -label { - display: inline-block; - 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; -} - -/* clickable input types in iOS */ -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; -} - -input[type="search"] { - -webkit-appearance: textfield; -} - -/* if select styling bugs on WebKit */ -/* select { -webkit-appearance: none; } */ - -/* 'x' appears on right of search input when text is entered. This removes it */ -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -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; -} - -/* Removes inner padding and border in FF3+ */ -button::-moz-focus-inner, -input[type='button']::-moz-focus-inner, -input[type='reset']::-moz-focus-inner, -input[type='submit']::-moz-focus-inner { - border: 0; - padding: 0; -} diff --git a/future-proof/css-includes/05-icons.css b/future-proof/css-includes/05-icons.css deleted file mode 100644 index b75d7bb..0000000 --- a/future-proof/css-includes/05-icons.css +++ /dev/null @@ -1,159 +0,0 @@ -/* ----------------------------- */ -/* ==icons and bullets */ -/* ----------------------------- */ - -.icon {display: inline-block;} - -.icon:before, -.icon.after:after { - content: ""; - display: inline-block; - vertical-align: middle; - position: relative; top: -0.1em; - margin: 0 0.3em 0 0; - font: 1.4em/1 sans-serif; - color: #000; - text-shadow: 1px 1px 0 rgba(0,0,0,0.1); - speak: none; -} - -@media (min-device-width: 480px) { - .icon:before, - .icon.after:after { - font: 1em/0.6 sans-serif; - } -} - -.icon.after:after { - margin: 0 0 0 8px; -} - -.icon.after:before { - content: "" !important -} - -.icon-rate:before, -.icon-rate.after:after { - content: "\2605"; -} - -.icon-unrate:before, -.icon-unrate.after:after{ - content: "\2606"; -} - -.icon-check:before, -.icon-check.after:after{ - content: "\2713"; -} - -.icon-uncheck:before, -.icon-uncheck.after:after{ - content: "\2717"; -} - -.icon-cloud:before, -.icon-cloud.after:after { - content: "\2601"; -} - -.icon-dl:before, -.icon-dl.after:after { - content: "\21E3"; - font-weight: bold; -} - -.icon-cross:before, -.icon-cross.after:after { - content: "\2716"; - font-weight: bold; -} - -.icon-arrow1:before, -.icon-arrow1.after:after { - content: "\2192"; - position: relative; - top: -0.15em; -} - -.icon-arrow2:before, -.icon-arrow2.after:after { - content: "\279E"; -} - -.icon-arrow3:before, -.icon-arrow3.after:after { - content: "\279A"; -} - -.icon-bracket1:before, -.icon-bracket1.after:after { - content: "\2039"; - font-weight: bold; - font-size: 1.6em; - position: relative; - top: -0.15em; -} - -.icon-bracket2:before, -.icon-bracket2.after:after { - content: "\203A"; - font-weight: bold; - font-size: 1.6em; - position: relative; - top: -0.15em; -} - -.icon-up:before, -.icon-up.after:after { - content: "\25B2"; -} - -.icon-down:before, -.icon-down.after:after { - content: "\25BC"; -} - -.icon-bull:before, -.icon-bull.after:after { - content: "\2022"; - font-size: 1.2em; - top: -0.05em; -} - -.icon-bull2:before, -.icon-bull2.after:after { - content: "\25E6"; - top: -0.05em; -} - -.icon-bull3:before, -.icon-bull3.after:after{ - content: "\2023"; - font-size: 1.6em; - top: -0.05em; -} - -.icon-nav:before, -.icon-nav.after:after { - content: "\2261"; - font-weight: bold; -} - -.icon-losange:before, -.icon-losange.after:after { - content: "\25C6"; -} - -.icon-asteri:before, -.icon-asteri.after:after { - content: "\2731"; - font-weight: bold; -} - -.icon-mail:before, -.icon-mail.after:after { - content: "\2709"; - font-size: 1.6em; - top: -.05em; -} diff --git a/future-proof/css-includes/06-rwd.css b/future-proof/css-includes/06-rwd.css deleted file mode 100644 index 671b1b3..0000000 --- a/future-proof/css-includes/06-rwd.css +++ /dev/null @@ -1,275 +0,0 @@ -/* ----------------------------- */ -/* ==desktop and HD devices */ -/* ----------------------------- */ - -@media (min-width: 480px) { -/* 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) { -/* style adjustments for high density devices */ -} - -/* ---------------------------------- */ -/* ==Responsive large / small / tiny */ -/* ---------------------------------- */ - -@media (min-width: 1024px) { - - /* layouts for large screens */ - .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; - } - - /* widths for large screens */ - .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; - } - - /* margins for large screens */ - .large-man { - margin: 0 !important; - } -} - -@media (max-width: 480px) { - - /* quick reset in small resolution and less */ - .w600p, - .w700p, - .w800p, - .w960p, - .mw960p { - width: auto; - float: none; - } - - /* layouts for small screens */ - .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; - } - - /* widths for small screens */ - .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; - } - - /* margins for small screens */ - .small-man { - margin: 0 !important; - } - - .small-pan { - padding: 0 !important; - } -} - -@media (max-width: 320px) { - - /* quick tiny resolution reset */ - .mod, - .col, - fieldset { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - - .w300p, - .w400p, - .w500p { - width: auto; - float: none; - } - - .row { - display: block !important; - width: 100% !important; - } - - /* layouts for tiny screens */ - .tiny-hidden { - display: none !important; - } - - .tiny-visible { - display: block !important; - } - - .tiny-no-float { - float: none; - } - - .tiny-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - - .tiny-row { - display: table !important; - table-layout: fixed !important; - width: 100% !important; - } - - .tiny-col { - display: table-cell !important; - vertical-align: top !important; - } - - th, - td { - display: block !important; - width: auto !important; - text-align: left !important; - } - - thead { - display: none; - } - - /* widths for tiny screens */ - .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; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - - /* margins for tiny screens */ - .tiny-man { - margin: 0 !important; - } - - .tiny-pan { - padding: 0 !important; - } -} diff --git a/future-proof/css-includes/07-flexbox.css b/future-proof/css-includes/07-flexbox.css deleted file mode 100644 index 189a809..0000000 --- a/future-proof/css-includes/07-flexbox.css +++ /dev/null @@ -1,30 +0,0 @@ - -/* flexbox layout -Tutorial: http://knacss.com/demos/tutoriel.html#flex */ -.flex { - display : flex; -} - -.flex-h { - flex-direction: row; -} - -.flex-v { - flex-direction: column; -} - -.flex-fluid { - flex: 1; -} - -.flex-start { - order : -1; -} - -.flex-mid { - order : 1; -} - -.flex-end { - order : 42; -} diff --git a/future-proof/css-includes/08-print.css b/future-proof/css-includes/08-print.css deleted file mode 100644 index 952cc72..0000000 --- a/future-proof/css-includes/08-print.css +++ /dev/null @@ -1,87 +0,0 @@ - -/* quick print reset */ -@media print { - - * { - background: transparent !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; - } - - p, - h1, - h2, - h3, - h4, - h5, - h6, - blockquote, - ul, - ol { - color: #000 !important; - margin: auto !important; - } - - .print { - display: block; - } - - .no-print { - display: none; - } - - img { - filter: grayscale(100%); - } - - /* no orphans, no widows */ - p, - blockquote { - orphans: 3; - widows: 3; - } - - /* no breaks inside these elements */ - blockquote, - ul, - ol { - page-break-inside: avoid; - } - - /* page break before main headers */ - h1 { - page-break-before: always; - } - - /* no breaks after these elements */ - h1, - h2, - h3, - caption { - page-break-after: avoid; - } - - a { - color: #000 !important; - text-decoration: underline !important; - } - - /* displaying URLs */ - a[href]:after { - content: " (" attr(href) ")"; - } - - a[href^="javascript:"]:after, - a[href^="#"]:after { - content: ""; - } -} diff --git a/future-proof/css-includes/09-booleans.css b/future-proof/css-includes/09-booleans.css deleted file mode 100644 index 584a885..0000000 --- a/future-proof/css-includes/09-booleans.css +++ /dev/null @@ -1,38 +0,0 @@ - -/* styling skip links */ - -.skip-links { - position: absolute; -} - -.skip-links a { - position: absolute; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - padding: 0.5em; - background: black; - color: white; - text-decoration: none; -} - -.skip-links a:focus { - position: static; - overflow: visible; - clip: auto; -} - -@media (max-width: 480px) { - /* hyphenations on small screens */ - /* you shall not pass */ - div, - textarea, - table, - td, - th, - code, - pre, - samp { - word-wrap: break-word; - hyphens: auto; - } -} diff --git a/future-proof/css-includes/10-gmaps.css b/future-proof/css-includes/10-gmaps.css deleted file mode 100644 index 486a3dc..0000000 --- a/future-proof/css-includes/10-gmaps.css +++ /dev/null @@ -1,18 +0,0 @@ - -/* ----------------------------- */ -/* ==gmaps support */ -/* ----------------------------- */ -/* Google Gmap3 bug fix on images */ -.gm-style img { - height: 100%; -} - -:not(.gm-style) img { - height: auto; -} - -.gm-style img, -.gmnoscreen img, -.gmnoprint img { - max-width: none !important; -} diff --git a/future-proof/css-includes/11-ie.css b/future-proof/css-includes/11-ie.css deleted file mode 100644 index c5a4edd..0000000 --- a/future-proof/css-includes/11-ie.css +++ /dev/null @@ -1,76 +0,0 @@ -/* ----------------------------- */ -/* ==IE6, IE7, IE8 support */ -/* ----------------------------- */ - -/* Active box-sizing for IE6/IE7 */ -/* @source https://github.com/Schepp/box-sizing-polyfill - -.ie67 * { - behavior: url(/js/boxsizing.htc); -} -*/ - -/* @bugfix for IE8 */ -.ie678 img { - width: auto; -} - -.ie678 .gm-style img { - height: 100%; -} - -/* hasLayout for IE6/IE7 */ -.clearfix, -.line, -.mod, -.row, -.col { - *zoom: 1; -} - -/*! inline-block and table-cell for IE6/IE7 */ -/*! warning: .col needs width on IE6/IE7 */ -.btn, -.col, -.inbl { - *display: inline; - *zoom: 1; -} - -.visually-hidden { - *clip: rect(1px 1px 1px 1px); -} - -/* IE8 grid hack */ -.ie8 .grid > *, -.ie8 [class*="autogrid"] > * { - letter-spacing: -0.31em; - text-rendering: optimizespeed; -} - -.ie8 .grid > * > *, -.ie8 [class*="autogrid"] > * > *{ - letter-spacing: normal; - word-spacing: normal; - text-rendering: auto; -} - -/* IE7 grid hack */ -.grid > * > *, -[class*="autogrid"] > * > *{ - *display: inline; - *zoom: 1; -} - -/* forms */ -/* Corrects excess space around these inputs in IE8/9 */ -.ie678 input[type="checkbox"], -.ie678 input[type="radio"] { - padding: 0; -} - -/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ -.ie678 textarea { - overflow: auto; -} - diff --git a/future-proof/css-includes/12-styling.css b/future-proof/css-includes/12-styling.css deleted file mode 100644 index 8b6cfc0..0000000 --- a/future-proof/css-includes/12-styling.css +++ /dev/null @@ -1,119 +0,0 @@ -/* ----------------------------- */ -/* ==minor stylings */ -/* ----------------------------- */ - -/* styling elements */ -code, -kbd, -mark { - border-radius: 2px; -} - -kbd { - padding: 0 2px; - border: 1px solid #999; -} - -code { - padding: 2px 4px; - background: rgba(0,0,0,0.04); - color: #b11; -} - -pre code { - padding: none; - background: none; - color: inherit; - border-radius: 0; -} - -mark { - padding:2px 4px; - background: #ff0; -} - -sup, -sub { - vertical-align: 0; - position: relative; -} - -sup { - bottom: 1ex; -} - -sub { - top: 0.5ex; -} - -blockquote { - margin-left: 0; - padding-left: 1em; - border-left: 4px solid rgba(0,0,0,0.15); - font-style: italic; -} - -q { - font-style: normal; -} - -q, -.q { - quotes: "“\00a0" "\00a0”"; -} - -q:lang(fr), -.q:lang(fr) { - quotes: "«\00a0" "\00a0»"; -} - -hr { - display: block; - clear: both; - height: 1px; - margin: 1em 0 2em; - padding: 0; - border: 0; - color: #ccc; - background-color: #ccc; -} - -/* alternate tables */ -.alternate { border: 0; } -.alternate tbody { - border: 1px solid #ccc; -} - -.alternate thead tr > * + * { - border-left: 0; -} - -.alternate tbody tr > * + * { - border-left: 1px solid #ccc; -} - -/* alternate-vert tables */ -.alternate-vert { - border: 0; - border-right: 1px solid #ccc; -} - -.alternate-vert tr > :first-child { - border-bottom: 0; -} - -.alternate-vert tr > * + * { - border-top: 1px solid #ccc; -} - -/* striped tables */ -.striped tbody tr:nth-child(odd) { - background: #eee; - background: rgba(0, 0, 0, .05); -} - -/* striped-vert tables */ -.striped-vert tr > :first-child { - background: #eee; - background: rgba(0, 0, 0, .05); -} diff --git a/future-proof/css-includes/knacss.css b/future-proof/css-includes/knacss.css deleted file mode 100644 index 1e5a5e5..0000000 --- a/future-proof/css-includes/knacss.css +++ /dev/null @@ -1,18 +0,0 @@ -/* Config file */ -@import "00-config.css"; - -/* Base styles */ -@import "01-base.css"; - -/* Optional files : chose the ones you need */ -@import "02-grids.css"; -@import "03-tables.css"; -@import "04-forms.css"; -@import "05-icons.css"; -@import "06-rwd.css"; -@import "07-flexbox.css"; -@import "08-print.css"; -@import "09-booleans.css"; -@import "10-gmaps.css"; -@import "11-ie.css"; -@import "12-styling.css"; diff --git a/future-proof/styles.css b/future-proof/styles.css deleted file mode 100644 index 361d496..0000000 --- a/future-proof/styles.css +++ /dev/null @@ -1,8 +0,0 @@ -@import url("css-includes/knacss.css"); - -/* ----------------------------- */ -/* ==own stylesheet */ -/* ----------------------------- */ - -/* Here should go your own CSS styles */ - diff --git a/future-proof/styles.min.css b/future-proof/styles.min.css deleted file mode 100644 index 4256ce7..0000000 --- a/future-proof/styles.min.css +++ /dev/null @@ -1,1880 +0,0 @@ -/* Config file *//* Config file : variables, mixins, ... */ - -:root { - - /* font sizes */ - --base-font-size : 14; /* if "14" then 1em = 14px */ - --line-height : 1.5; /* equiv line-height 1.5 */ - --h1-size : 32px; - --h1-size : 3.2rem; /* equiv "32px" */ - --h2-size : 28px; - --h2-size : 2.8rem; /* equiv "28px" */ - --h3-size : 24px; - --h3-size : 2.4rem; /* equiv "24px" */ - --h4-size : 20px; - --h4-size : 2.0rem; /* equiv "20px" */ - --h5-size : 18px; - --h5-size : 1.8rem; /* equiv "18px" */ - --h6-size : 16px; - --h6-size : 1.6rem; /* equiv "16px" */ - - /* font stacks */ - --font-stack-common : Helvetica, Arial, sans-serif; - --font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; - --font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; - - /* font colors */ - --base-color : #000; /* text color on body */ - --base-color-link : #333; /* primary links color */ - --base-color-link-hover : #000; /* primary hovered/focused links color */ - - /* backgrounds */ - --base-background : #fff; /* body background color */ - - /* spacings */ - --tiny-value : 0.5em; /* tiny value for margins / paddings */ - --small-value : 1em; /* small value for margins / paddings */ - --medium-value : 2em; /* medium value for margins / paddings */ - --large-value : 4em; /* large value for margins / paddings */ - --extra-large-value : 6em; /* extra large value for margins / paddings */ - --ultra-large-value : 10em; /* ultra large value for margins / paddings */ - - /* breakpoints */ - --tiny-screen : 320px; /* tiny screens media query */ - --small-screen : 480px; /* small screens media query */ - --medium-screen : 768px; /* small screens media query */ - --large-screen : 1024px; /* large screens media query */ - --extra-large-screen : 1280px; /* extra large screens media query */ - --ultra-large-screen : 1600px; /* ultra large screens media query */ - - /* misc */ - --gutter : 20px; /* gutter value (%, px, em, rem) for grid layouts */ -} - -/* Base styles *//*! -* www.KNACSS.com V3.0.3 (2014-05-21) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ -*/ - -/* ----------------------------- */ -/* == soft reset */ -/* ----------------------------- */ - -/* switching box model for all elements */ -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -/* soft reset */ -html, -body { - margin: 0; - padding: 0; -} - -ul, -ol { - padding-left: 2em; -} - -ul.unstyled { - list-style: none; -} - -img { - height: auto; - vertical-align: middle; - border: 0; -} - -audio, -canvas, -video { - display: inline-block; -} - -svg:not(:root) { - overflow: hidden; -} - -/* ----------------------------- */ -/* == typography */ -/* ----------------------------- */ - - -html { - - /* set base font-size to equiv "10px", which is adapted to rem unit */ - font-size: 62.5%; - - /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ - /* thanks to @guardian, @victorbritopro and @eQRoeil */ - font-size: -webkit-calc(1em * 0.625); - font-size: calc(1em * 0.625); - - /* disallow text zooming on orientation change (non standard property) */ - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -body { - - /* set body font-size in em (1.4em equiv "14px") */ - font-size: -webkit-calc(14 * 0.1em); - font-size: calc(14 * 0.1em); - - background-color: #fff; - color: #000; - font-family: Helvetica, Arial, sans-serif; - line-height: 1.5; -} - -/* font-sizing for content */ -p, -.p-like, -ul, -ol, -dl, -blockquote, -pre, -td, -th, -label, -textarea, -caption, -details, -figure { - margin-top: 0.75em; - margin-bottom: 0; - line-height: 1.5; -} - -h1, -.h1-like { - font-size: 32px; - font-size: 3.2rem; -} - -h2, -.h2-like { - font-size: 28px; - font-size: 2.8rem; -} - -h3, -.h3-like { - font-size: 24px; - font-size: 2.4rem; -} - -h4, -.h4-like { - font-size: 20px; - font-size: 2.0rem; -} - -h5, -.h5-like { - font-size: 18px; - font-size: 1.8rem; -} - -h6, -.h6-like { - font-size: 16px; - font-size: 1.6rem; -} - -/* alternate font-sizing */ -.smaller { - font-size: 0.7em; -} - -.small { - font-size: 0.9em; -} - -.big { - font-size: 1.1em; -} - -.bigger { - font-size: 1.3em; -} - -.biggest { - font-size: 1.6em; -} - -code, -pre, -samp, -kbd { - /* IE fix */ - white-space: pre-line; - white-space: pre-wrap; - font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace; - line-height: normal; -} -em, -.em, -address, -cite, -dfn, -i, -var { - font-style: italic; -} -.no-em { - font-style: normal; -} -strong, -.strong { - font-weight: bold; -} -.no-strong { - font-weight: normal; -} -small, -sub, -sup { - font-size: smaller; -} - -/* ----------------------------- */ -/* == hiding content */ -/* ----------------------------- */ - -/* hidden but not for assistance tools, Yahoo! method */ -.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; -} - -body > script { - display: none !important; -} - -/* ----------------------------- */ -/* == browsers consistency */ -/* ----------------------------- */ - -/* avoid top margins on first content element */ -p:first-child, -.p-like:first-child, -ul:first-child, -ol:first-child, -dl:first-child, -blockquote:first-child, -pre:first-child, -h1:first-child, -h2:first-child, -h3:first-child, -h4:first-child, -h5:first-child, -h6:first-child { - margin-top: 0; -} - -/* avoid margins on nested elements */ -li p, -li .p-like, -li ul, -li ol { - margin-top: 0; - margin-bottom: 0; -} - -/* max values */ -img, -table, -td, -blockquote, -code, -pre, -textarea, -input, -video { - max-width: 100%; -} - -/* margin-bottom on tables */ -table { - margin-bottom: 2em; -} - -/* ----------------------------- */ -/* ==layout and modules */ -/* ----------------------------- */ - -/* float layout */ -/* module, gains superpower "BFC" Block Formating Context */ -.mod { - overflow: hidden; -} - -/* blocks that needs to be placed under floats */ -.clear, -.line, -.row { - clear: both; -} - -/* blocks that must contain floats */ -.clearfix:after, -.line:after { - content: ""; - display: table; - clear: both; -} - -/* table layout */ -.row { - display: table; - table-layout: fixed; - width: 100%; -} - -.row > *, -.col { - display: table-cell; - vertical-align: top; -} - -/* inline-block */ -.inbl { - display: inline-block; - vertical-align: top; -} - -/* alignments (blocks and inline) */ -/* ------------------------------ */ - -/* left (or starting) elements */ -.left, -.start { - float: left; -} - -img.left, -img.start { - margin-right: 1em; -} - -/* right (or ending) elements */ -.right, -.end { - float: right; -} - -img.right, -img.end { - margin-left: 1em; -} - -img.left, -img.right, -img.start, -img.end { - margin-bottom: 0.5em; -} - -.center { - margin-left: auto; - margin-right: auto; -} - -.txtleft { - text-align: left; -} - -.txtright { - text-align: right; -} - -.txtcenter { - text-align: center; -} - -/* blocks widths (percentage and pixels) */ -.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; -} - -/* spacing helpers -p,m = padding,margin -a,t,r,b,l = all,top,right,bottom,left -s,m,l,n = small, medium, large, none -*/ -.man { - margin: 0; -} - -.pan { - padding: 0; -} - -.mas { - margin: 1em; -} - -.mam { - margin: 2em; -} - -.mal { - margin: 4em; -} - -.pas { - padding: 1em; -} - -.pam { - padding: 2em; -} - -.pal { - padding: 4em; -} - -.mtn { - margin-top: 0; -} - -.mts { - margin-top: 1em; -} - -.mtm { - margin-top: 2em; -} - -.mtl { - margin-top: 4em; -} - -.mrn { - margin-right: 0; -} - -.mrs { - margin-right: 1em; -} - -.mrm { - margin-right: 2em; -} - -.mrl { - margin-right: 4em; -} - -.mbn { - margin-bottom: 0; -} - -.mbs { - margin-bottom: 1em; -} - -.mbm { - margin-bottom: 2em; -} - -.mbl { - margin-bottom: 4em; -} - -.mln { - margin-left: 0; -} - -.mls { - margin-left: 1em; -} - -.mlm { - margin-left: 2em; -} - -.mll { - margin-left: 4em; -} - -.ptn { - padding-top: 0; -} - -.pts { - padding-top: 1em; -} - -.ptm { - padding-top: 2em; -} - -.ptl { - padding-top: 4em; -} - -.prn { - padding-right: 0; -} - -.prs { - padding-right: 1em; -} - -.prm { - padding-right: 2em; -} - -.prl { - padding-right: 4em; -} - -.pbn { - padding-bottom: 0; -} - -.pbs { - padding-bottom: 1em; -} - -.pbm { - padding-bottom: 2em; -} - -.pbl { - padding-bottom: 4em; -} - -.pln { - padding-left: 0; -} - -.pls { - padding-left: 1em; -} - -.plm { - padding-left: 2em; -} - -.pll { - padding-left: 4em; -} - -/* Optional files : chose the ones you need */ -/* ---------------------------------- */ -/* ==classic grids */ -/* .. use it when gutter size matters */ -/* ---------------------------------- */ - -/* grids inspired from SUIT https://github.com/suitcss/suit */ - -/* overall container of grids */ -.grid { - overflow: hidden; -} - -/* global styles for direct child ex. .grid3 */ -.grid > * { - display: block; - padding: 0; - /* gutter value */ - margin-left: -20px; - text-align: left; -} - -/* global styles for each "cell" */ -.grid > * > * { - display: inline-block; - /* gutter value */ - padding-left: 20px; - margin-left: 0; - vertical-align: top; -} - -/* whitespace fixing for modern browsers including IE9+ */ -:root .grid { - font-size: 0; - /* fallback for IE9+ */ - text-justify: distribute-all-lines; -} - -:root .grid > * > * { - font-size: -webkit-calc(14 / 100px); - font-size: calc(14 / 100px); - font-size: -webkit-calc(14 / 10rem); - font-size: calc(14 / 10rem); -} - -/* Opera hack */ -.opera:-o-prefocus, -.grid > * { - word-spacing: -0.43em; -} - -.grid2 > * { - width: 50%; -} - -.grid3 > * { - width: 33.333%; -} - -.grid4 > * { - width: 25%; -} - -.grid5 > * { - width: 20%; -} - -.grid6 > * { - width: 16.667%; -} - -.grid8 > * { - width: 12.5%; -} - -.grid10 > * { - width: 10%; -} - -.grid12 > * { - width: 8.333%; -} - -/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */ -.grid2-1 > *:first-child, -.grid1-2 > * + * { - width: 66.666%; -} - -.grid1-2 > *:first-child, -.grid2-1 > * + * { - width: 33.333%; -} - -.grid1-3 > *:first-child, -.grid3-1 > * + * { - width: 25%; -} - -.grid3-1 > *:first-child, -.grid1-3 > * + * { - width: 75%; -} - -/* Responsiv-o-matic */ - -/* ---------------------------------- */ -/* ==autogrids */ -/* .. to automatically justify blocs */ -/* ---------------------------------- */ - -/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ - -/* container of autogrids */ -[class*="autogrid"] { - text-align: justify; -} - -[class*="autogrid"]:after { - content: ""; - display: inline-block; - width: 100%; -} - -[class*="autogrid"] > * { - display: inline-block; - vertical-align: top; - text-align: left; -} - -/* whitespace fixing for modern browsers including IE9+ */ -:root [class*="autogrid"] { - font-size: 0; - /* fallback for IE9+ */ - text-justify: distribute-all-lines; -} - -:root [class*="autogrid"] > * { - font-size: -webkit-calc(14 / 100px); - font-size: calc(14 / 100px); - font-size: -webkit-calc(14 / 10rem); - font-size: calc(14 / 10rem); -} - -/* Opera hack */ -[class*="autogrid"]:-o-prefocus { - word-spacing: -0.43em; -} - -.autogrid2 > * { - width: 49%; -} - -.autogrid3 > * { - width: 32%; -} - -.autogrid4 > * { - width: 23.6%; -} - -.autogrid5 > * { - width: 19%; -} - -.autogrid6 > * { - width: 15%; -} - -.autogrid8 > * { - width: 10.8%; -} - -.autogrid10 > * { - width: 9%; -} - -.autogrid12 > * { - width: 6.4%; -} - -@media (max-width: 1024px) { - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * { - width: 33.333%; - } - - - .autogrid5 > *, - .autogrid6 > *, - .autogrid8 > *, - .autogrid10 > *, - .autogrid12 > * { - width: 32%; - } -} -/* ----------------------------- */ -/* ==tables */ -/* ----------------------------- */ - -table, -.table { - width: 100%; - max-width : 100%; - table-layout: fixed; - border-collapse: collapse; - vertical-align: top; - border: 1px solid #ccc; -} - -.table { - display: table; -} - -table#recaptcha_table, -table.table-auto { - table-layout:auto; -} - -caption { - padding: 1em; - color: #555; - font-style: italic; -} - -td, -th { - padding: 0.3em 0.8em; - border: 1px #aaa dotted; - vertical-align: top; - min-width: 2em; - cursor: default; - text-align: left; -}/* ----------------------------- */ -/* ==forms */ -/* ----------------------------- */ - -/* thanks to HTML5boilerplate, -* github.com/nathansmith/formalize and www.sitepen.com -*/ - -/* buttons */ -.btn { - display: inline-block; -} - -/* forms items */ -form, -fieldset { - border: none; -} - -input, -button, -select, -label, -.btn { - vertical-align: middle; - font-family: inherit; - font-size: inherit; -} - -label { - display: inline-block; - 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; -} - -/* clickable input types in iOS */ -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; -} - -input[type="search"] { - -webkit-appearance: textfield; -} - -/* if select styling bugs on WebKit */ -/* select { -webkit-appearance: none; } */ - -/* 'x' appears on right of search input when text is entered. This removes it */ -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -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; -} - -/* Removes inner padding and border in FF3+ */ -button::-moz-focus-inner, -input[type='button']::-moz-focus-inner, -input[type='reset']::-moz-focus-inner, -input[type='submit']::-moz-focus-inner { - border: 0; - padding: 0; -}/* ----------------------------- */ -/* ==icons and bullets */ -/* ----------------------------- */ - -.icon {display: inline-block;} - -.icon:before, -.icon.after:after { - content: ""; - display: inline-block; - vertical-align: middle; - position: relative; top: -0.1em; - margin: 0 0.3em 0 0; - font: 1.4em/1 sans-serif; - color: #000; - text-shadow: 1px 1px 0 rgba(0,0,0,0.1); - speak: none; -} - -@media (min-device-width: 480px) { - .icon:before, - .icon.after:after { - font: 1em/0.6 sans-serif; - } -} - -.icon.after:after { - margin: 0 0 0 8px; -} - -.icon.after:before { - content: "" !important -} - -.icon-rate:before, -.icon-rate.after:after { - content: "\2605"; -} - -.icon-unrate:before, -.icon-unrate.after:after{ - content: "\2606"; -} - -.icon-check:before, -.icon-check.after:after{ - content: "\2713"; -} - -.icon-uncheck:before, -.icon-uncheck.after:after{ - content: "\2717"; -} - -.icon-cloud:before, -.icon-cloud.after:after { - content: "\2601"; -} - -.icon-dl:before, -.icon-dl.after:after { - content: "\21E3"; - font-weight: bold; -} - -.icon-cross:before, -.icon-cross.after:after { - content: "\2716"; - font-weight: bold; -} - -.icon-arrow1:before, -.icon-arrow1.after:after { - content: "\2192"; - position: relative; - top: -0.15em; -} - -.icon-arrow2:before, -.icon-arrow2.after:after { - content: "\279E"; -} - -.icon-arrow3:before, -.icon-arrow3.after:after { - content: "\279A"; -} - -.icon-bracket1:before, -.icon-bracket1.after:after { - content: "\2039"; - font-weight: bold; - font-size: 1.6em; - position: relative; - top: -0.15em; -} - -.icon-bracket2:before, -.icon-bracket2.after:after { - content: "\203A"; - font-weight: bold; - font-size: 1.6em; - position: relative; - top: -0.15em; -} - -.icon-up:before, -.icon-up.after:after { - content: "\25B2"; -} - -.icon-down:before, -.icon-down.after:after { - content: "\25BC"; -} - -.icon-bull:before, -.icon-bull.after:after { - content: "\2022"; - font-size: 1.2em; - top: -0.05em; -} - -.icon-bull2:before, -.icon-bull2.after:after { - content: "\25E6"; - top: -0.05em; -} - -.icon-bull3:before, -.icon-bull3.after:after{ - content: "\2023"; - font-size: 1.6em; - top: -0.05em; -} - -.icon-nav:before, -.icon-nav.after:after { - content: "\2261"; - font-weight: bold; -} - -.icon-losange:before, -.icon-losange.after:after { - content: "\25C6"; -} - -.icon-asteri:before, -.icon-asteri.after:after { - content: "\2731"; - font-weight: bold; -} - -.icon-mail:before, -.icon-mail.after:after { - content: "\2709"; - font-size: 1.6em; - top: -.05em; -}/* ----------------------------- */ -/* ==desktop and HD devices */ -/* ----------------------------- */ - -@media (min-width: 480px) { -/* 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) { -/* style adjustments for high density devices */ -} - -/* ---------------------------------- */ -/* ==Responsive large / small / tiny */ -/* ---------------------------------- */ - -@media (min-width: 1024px) { - .no-large-screen { - display: none; - } - - - - /* layouts for large screens */ - .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; - } - - /* widths for large screens */ - .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; - } - - /* margins for large screens */ - .large-man { - margin: 0 !important; - } -} - -@media (max-width: 320px) { - .grid > * > * { - width: 100% !important; - } - - - [class*="autogrid"] > * { - width: 100%; - } - - - - /* quick tiny resolution reset */ - .mod, - .col, - fieldset { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - - .w300p, - .w400p, - .w500p { - width: auto; - float: none; - } - - .row { - display: block !important; - width: 100% !important; - } - - /* layouts for tiny screens */ - .tiny-hidden { - display: none !important; - } - - .tiny-visible { - display: block !important; - } - - .tiny-no-float { - float: none; - } - - .tiny-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - - .tiny-row { - display: table !important; - table-layout: fixed !important; - width: 100% !important; - } - - .tiny-col { - display: table-cell !important; - vertical-align: top !important; - } - - th, - td { - display: block !important; - width: auto !important; - text-align: left !important; - } - - thead { - display: none; - } - - /* widths for tiny screens */ - .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; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - - /* margins for tiny screens */ - .tiny-man { - margin: 0 !important; - } - - .tiny-pan { - padding: 0 !important; - } -} -/* flexbox layout -Tutorial: http://knacss.com/demos/tutoriel.html#flex */ -.flex { - display : -webkit-box; - display : -webkit-flex; - display : -ms-flexbox; - display : flex; -} - -.flex-h { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -.flex-v { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.flex-fluid { - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} - -.flex-start { - -webkit-box-ordinal-group : 0; - -webkit-order : -1; - -ms-flex-order : -1; - order : -1; -} - -.flex-mid { - -webkit-box-ordinal-group : 2; - -webkit-order : 1; - -ms-flex-order : 1; - order : 1; -} - -.flex-end { - -webkit-box-ordinal-group : 43; - -webkit-order : 42; - -ms-flex-order : 42; - order : 42; -} -/* quick print reset */ -@media print { - - * { - background: transparent !important; - -webkit-box-shadow: none !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; - } - - p, - h1, - h2, - h3, - h4, - h5, - h6, - blockquote, - ul, - ol { - color: #000 !important; - margin: auto !important; - } - - .print { - display: block; - } - - .no-print { - display: none; - } - - img { - -webkit-filter: grayscale(100%); - filter: grayscale(100%); - } - - /* no orphans, no widows */ - p, - blockquote { - orphans: 3; - widows: 3; - } - - /* no breaks inside these elements */ - blockquote, - ul, - ol { - page-break-inside: avoid; - } - - /* page break before main headers */ - h1 { - page-break-before: always; - } - - /* no breaks after these elements */ - h1, - h2, - h3, - caption { - page-break-after: avoid; - } - - a { - color: #000 !important; - text-decoration: underline !important; - } - - /* displaying URLs */ - a[href]:after { - content: " (" attr(href) ")"; - } - - a[href^="javascript:"]:after, - a[href^="#"]:after { - content: ""; - } -} -/* styling skip links */ - -.skip-links { - position: absolute; -} - -.skip-links a { - position: absolute; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - padding: 0.5em; - background: black; - color: white; - text-decoration: none; -} - -.skip-links a:focus { - position: static; - overflow: visible; - clip: auto; -} - -@media (max-width: 480px) { - .no-small-screen { - display: none; - } - - - .grid3 > *, - .grid4 > *, - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * { - width: 50%; - } - - - .autogrid5 > *, - .autogrid6 > *, - .autogrid8 > *, - .autogrid10 > *, - .autogrid12 > * { - width: 49%; - } - - - - /* quick reset in small resolution and less */ - .w600p, - .w700p, - .w800p, - .w960p, - .mw960p { - width: auto; - float: none; - } - - /* layouts for small screens */ - .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; - } - - /* widths for small screens */ - .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; - } - - /* margins for small screens */ - .small-man { - margin: 0 !important; - } - - .small-pan { - padding: 0 !important; - } - - - /* hyphenations on small screens */ - /* you shall not pass */ - div, - textarea, - table, - td, - th, - code, - pre, - samp { - word-wrap: break-word; - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; - } -} -/* ----------------------------- */ -/* ==gmaps support */ -/* ----------------------------- */ -/* Google Gmap3 bug fix on images */ -.gm-style img { - height: 100%; -} - -:not(.gm-style) img { - height: auto; -} - -.gm-style img, -.gmnoscreen img, -.gmnoprint img { - max-width: none !important; -}/* ----------------------------- */ -/* ==IE6, IE7, IE8 support */ -/* ----------------------------- */ - -/* Active box-sizing for IE6/IE7 */ -/* @source https://github.com/Schepp/box-sizing-polyfill - -.ie67 * { - behavior: url(/js/boxsizing.htc); -} -*/ - -/* @bugfix for IE8 */ -.ie678 img { - width: auto; -} - -.ie678 .gm-style img { - height: 100%; -} - -/* hasLayout for IE6/IE7 */ -.clearfix, -.line, -.mod, -.row, -.col { - *zoom: 1; -} - -/*! inline-block and table-cell for IE6/IE7 */ -/*! warning: .col needs width on IE6/IE7 */ -.btn, -.col, -.inbl { - *display: inline; - *zoom: 1; -} - -.visually-hidden { - *clip: rect(1px 1px 1px 1px); -} - -/* IE8 grid hack */ -.ie8 .grid > *, -.ie8 [class*="autogrid"] > * { - letter-spacing: -0.31em; - text-rendering: optimizespeed; -} - -.ie8 .grid > * > *, -.ie8 [class*="autogrid"] > * > *{ - letter-spacing: normal; - word-spacing: normal; - text-rendering: auto; -} - -/* IE7 grid hack */ -.grid > * > *, -[class*="autogrid"] > * > *{ - *display: inline; - *zoom: 1; -} - -/* forms */ -/* Corrects excess space around these inputs in IE8/9 */ -.ie678 input[type="checkbox"], -.ie678 input[type="radio"] { - padding: 0; -} - -/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ -.ie678 textarea { - overflow: auto; -}/* ----------------------------- */ -/* ==minor stylings */ -/* ----------------------------- */ - -/* styling elements */ -code, -kbd, -mark { - border-radius: 2px; -} - -kbd { - padding: 0 2px; - border: 1px solid #999; -} - -code { - padding: 2px 4px; - background: rgba(0,0,0,0.04); - color: #b11; -} - -pre code { - padding: none; - background: none; - color: inherit; - border-radius: 0; -} - -mark { - padding:2px 4px; - background: #ff0; -} - -sup, -sub { - vertical-align: 0; - position: relative; -} - -sup { - bottom: 1ex; -} - -sub { - top: 0.5ex; -} - -blockquote { - margin-left: 0; - padding-left: 1em; - border-left: 4px solid rgba(0,0,0,0.15); - font-style: italic; -} - -q { - font-style: normal; -} - -q, -.q { - quotes: "“\00a0" "\00a0”"; -} - -q:lang(fr), -.q:lang(fr) { - quotes: "«\00a0" "\00a0»"; -} - -hr { - display: block; - clear: both; - height: 1px; - margin: 1em 0 2em; - padding: 0; - border: 0; - color: #ccc; - background-color: #ccc; -} - -/* alternate tables */ -.alternate { border: 0; } -.alternate tbody { - border: 1px solid #ccc; -} - -.alternate thead tr > * + * { - border-left: 0; -} - -.alternate tbody tr > * + * { - border-left: 1px solid #ccc; -} - -/* alternate-vert tables */ -.alternate-vert { - border: 0; - border-right: 1px solid #ccc; -} - -.alternate-vert tr > :first-child { - border-bottom: 0; -} - -.alternate-vert tr > * + * { - border-top: 1px solid #ccc; -} - -/* striped tables */ -.striped tbody tr:nth-child(odd) { - background: #eee; - background: rgba(0, 0, 0, .05); -} - -/* striped-vert tables */ -.striped-vert tr > :first-child { - background: #eee; - background: rgba(0, 0, 0, .05); -} - -/* ----------------------------- */ -/* ==own stylesheet */ -/* ----------------------------- */ - -/* Here should go your own CSS styles */ -