diff --git a/css/01-base.css b/css/01-base.css index 8d0e417..65f281e 100644 --- a/css/01-base.css +++ b/css/01-base.css @@ -259,7 +259,7 @@ table { } /* Google Gmap3 bug fix on images */ :not(.gm-style) img { - height: auto !important; + height: auto; } .ie678 .gm-style img { height: 100%; @@ -456,27 +456,27 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css } .ma1, .mas { - margin: 10px; + margin: 1em; } .ma2, .mam { - margin: 20px; + margin: 2em; } .ma3, .mal { - margin: 30px; + margin: 4em; } .pa1, .pas { - padding: 10px; + padding: 1em; } .pa2, .pam { - padding: 20px; + padding: 2em; } .pa3, .pal { - padding: 30px; + padding: 4em; } .mt0, .mtn { @@ -484,15 +484,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css } .mt1, .mts { - margin-top: 10px; + margin-top: 1em; } .mt2, .mtm { - margin-top: 20px; + margin-top: 2em; } .mt3, .mtl { - margin-top: 30px; + margin-top: 4em; } .mr0, .mrn { @@ -500,15 +500,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css } .mr1, .mrs { - margin-right: 10px; + margin-right: 1em; } .mr2, .mrm { - margin-right: 20px; + margin-right: 2em; } .mr3, .mrl { - margin-right: 30px; + margin-right: 4em; } .mb0, .mbn { @@ -516,15 +516,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css } .mb1, .mbs { - margin-bottom: 10px; + margin-bottom: 1em; } .mb2, .mbm { - margin-bottom: 20px; + margin-bottom: 2em; } .mb3, .mbl { - margin-bottom: 30px; + margin-bottom: 4em; } .ml0, .mln { @@ -532,15 +532,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css } .ml1, .mls { - margin-left: 10px; + margin-left: 1em; } .ml2, .mlm { - margin-left: 20px; + margin-left: 2em; } .ml3, .mll { - margin-left: 30px; + margin-left: 4em; } .pt0, .ptn { @@ -548,15 +548,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css } .pt1, .pts { - padding-top: 10px; + padding-top: 1em; } .pt2, .ptm { - padding-top: 20px; + padding-top: 2em; } .pt3, .ptl { - padding-top: 30px; + padding-top: 4em; } .pr0, .prn { @@ -564,15 +564,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css } .pr1, .prs { - padding-right: 10px; + padding-right: 1em; } .pr2, .prm { - padding-right: 20px; + padding-right: 2em; } .pr3, .prl { - padding-right: 30px; + padding-right: 4em; } .pb0, .pbn { @@ -580,15 +580,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css } .pb1, .pbs { - padding-bottom: 10px; + padding-bottom: 1em; } .pb2, .pbm { - padding-bottom: 20px; + padding-bottom: 2em; } .pb3, .pbl { - padding-bottom: 30px; + padding-bottom: 4em; } .pl0, .pln { @@ -596,15 +596,15 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css } .pl1, .pls { - padding-left: 10px; + padding-left: 1em; } .pl2, .plm { - padding-left: 20px; + padding-left: 2em; } .pl3, .pll { - padding-left: 30px; + padding-left: 4em; } /* ----------------------------- */ /* == iefix */ diff --git a/css/02-grids.css b/css/02-grids.css index 67ca38b..51a29c4 100644 --- a/css/02-grids.css +++ b/css/02-grids.css @@ -1,20 +1,13 @@ /* ---------------------------------- */ - /* ==classic grids */ - /* .. use it when gutter size matters */ - /* ---------------------------------- */ - /* grids inspired from SUIT https://github.com/suitcss/suit */ - /* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */ - .grid { overflow: hidden; font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; } - .grid > * { display: block; padding: 0; @@ -24,14 +17,11 @@ letter-spacing: -0.31em; text-rendering: optimizespeed; } - /* Opera hack */ - .opera:-o-prefocus, .grid > * { word-spacing: -0.43em; } - .grid > * > * { display: inline-block; *display: inline; @@ -48,64 +38,49 @@ text-rendering: auto; font-family: Helvetica, Arial, sans-serif; } - .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: 1280px) { +@media (max-width: 1024px) { .grid5 > *, .grid6 > *, .grid8 > *, @@ -114,8 +89,7 @@ width: 33.333%; } } - -@media (max-width: 768px) { +@media (max-width: 480px) { .grid3 > *, .grid4 > *, .grid5 > *, @@ -126,42 +100,31 @@ width: 50%; } } - -@media (max-width: 480px) { +@media (max-width: 320px) { .grid > * > * { width: 100% !important; } } - /* ---------------------------------- */ - /* ==autogrids */ - /* .. to automatically justify blocs */ - /* ---------------------------------- */ - /* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ - [class*="autogrid"] { text-align: justify; font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; letter-spacing: -0.31em; text-rendering: optimizespeed; } - /* Opera hack */ - [class*="autogrid"]:-o-prefocus { word-spacing: -0.43em; } - [class*="autogrid"]:after { content: ""; display: inline-block; width: 100%; } - [class*="autogrid"] > * { display: inline-block; *display: inline; @@ -171,42 +134,34 @@ letter-spacing: normal; word-spacing: normal; vertical-align: top; + text-align: left; text-rendering: auto; } - .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: 1280px) { +@media (max-width: 1024px) { .autogrid5 > *, .autogrid6 > *, .autogrid8 > *, @@ -215,8 +170,7 @@ width: 32%; } } - -@media (max-width: 768px) { +@media (max-width: 480px) { .autogrid5 > *, .autogrid6 > *, .autogrid8 > *, @@ -225,9 +179,8 @@ width: 49%; } } - -@media (max-width: 480px) { +@media (max-width: 320px) { [class*="autogrid"] > * { width: 100%; } -} \ No newline at end of file +} diff --git a/css/05-icons.css b/css/05-icons.css index c206df6..5fe7311 100644 --- a/css/05-icons.css +++ b/css/05-icons.css @@ -1,13 +1,9 @@ /* ----------------------------- */ - /* ==icons and bullets */ - /* ----------------------------- */ - .icon { display: inline-block; } - .icon:before, .icon.after:after { content: ""; @@ -21,77 +17,63 @@ text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); speak: none; } - -@media (min-device-width: 768px) { +@media (min-device-width: 480px) { .icon:before, .icon.after:after { font: 1em/0.6 sans-serif; -webkit-transform: rotateZ(0.05deg); } } - .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"; @@ -100,7 +82,6 @@ position: relative; top: -0.15em; } - .icon-bracket2:before, .icon-bracket2.after:after { content: "\203A"; @@ -109,57 +90,48 @@ 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: -0.05em; -} \ No newline at end of file +} diff --git a/css/06-rwd.css b/css/06-rwd.css index ea9994c..ccaf3c1 100644 --- a/css/06-rwd.css +++ b/css/06-rwd.css @@ -1,77 +1,56 @@ /* ----------------------------- */ - /* ==desktop and retina medias */ - /* ----------------------------- */ - -@media (min-width: 768px) { +@media (min-width: 480px) { /* here go 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 retina devices */ } - /* ---------------------------------- */ - /* ==Responsive large / medium / tiny */ - /* ---------------------------------- */ - -@media (min-width: 1280px) { +@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; @@ -82,17 +61,13 @@ margin-right: 0 !important; border: 0; } - /* margins for large screens */ - .large-ma0 { margin: 0 !important; } } - -@media (max-width: 768px) { +@media (max-width: 480px) { /* quick reset in small resolution and less */ - .w600p, .w700p, .w800p, @@ -101,40 +76,31 @@ 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; } - /* you shall not pass */ - div, textarea, table, @@ -144,34 +110,24 @@ pre, samp { word-wrap: break-word; - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; hyphens: auto; } - /* 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; @@ -182,17 +138,13 @@ margin-right: 0 !important; border: 0; } - /* margins for small screens */ - .small-ma0 { margin: 0 !important; } } - -@media (max-width: 480px) { +@media (max-width: 320px) { /* quick tiny resolution reset */ - .mod, .col, fieldset { @@ -204,83 +156,65 @@ 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; @@ -291,10 +225,8 @@ margin-right: 0 !important; border: 0; } - /* margins for tiny screens */ - .tiny-ma0 { margin: 0 !important; } -} \ No newline at end of file +}