From 6ee08ce823db0123b8dc7935dadfdd08f1e49dd8 Mon Sep 17 00:00:00 2001
From: Raphael Goetter <raphael@goetter.fr>
Date: Sun, 20 Apr 2014 19:56:47 +0200
Subject: [PATCH] updates on CSS files too

---
 css/01-base.css  | 62 +++++++++++++++++++-------------------
 css/02-grids.css | 63 +++++---------------------------------
 css/05-icons.css | 32 ++------------------
 css/06-rwd.css   | 78 ++++--------------------------------------------
 4 files changed, 46 insertions(+), 189 deletions(-)

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
+}