[CSS] responsive+SASS

[lhc/web/clavettes.git] / css / habillage.css

diff --git a/css/habillage.css b/css/habillage.css
index e69de29..5d2124c 100644 (file)
--- a/css/habillage.css
+++ b/css/habillage.css
@@ -0,0 +1,231 @@
+* {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif; }
+
+header {
+  margin: 0 auto;
+  width: 100%; }
+
+header img {
+  margin-left: 120px; }
+
+#wrap {
+  padding-top: 20px;
+  width: 1100px;
+  margin: 0 auto; }
+
+a {
+  text-decoration: none; }
+
+h1 {
+  margin: 15px -15px 5px 15px;
+  padding: 0;
+  font-size: 2.0em;
+  color: #1d0b78;
+  display: inline-block; }
+
+h2 {
+  margin: 15px 15px;
+  font-size: 1.3em;
+  color: #1d0b78;
+  display: inline-block; }
+
+h3 {
+  margin: 15px;
+  display: inline-block;
+  color: #1d0b78; }
+
+p {
+  margin: 0 15px;
+  color: #1d0b78;
+  text-decoration: none; }
+
+/*1ERE COLONNE*/
+#ateliers {
+  margin: 0 10px;
+  overflow: hidden; }
+
+#ateliers:after {
+  content: "";
+  /* Important, sinon l'élément n'est pas généré. */
+  display: table;
+  clear: both; }
+
+#ateliers ul {
+  padding: 0;
+  margin: 0;
+  list-style-type: none; }
+
+#ateliers ul li {
+  height: 300px;
+  margin-bottom: 15px;
+  background-color: #2bc7cd; }
+
+/*2EME COLONNE*/
+#news {
+  background-color: #a51616;
+  margin: 0 10px 10px 10px;
+  overflow: hidden; }
+
+#news img {
+  height: 350px; }
+
+.article1,
+.article2,
+.article3,
+.article4 {
+  background-color: #ffaa7f; }
+
+.suite {
+  text-align: right; }
+
+/*3EME COLONNE*/
+.map {
+  background-color: #6059d2;
+  height: 300px;
+  margin: 0 0 15px 10px; }
+
+.agenda {
+  background-color: #ca52ae;
+  height: 300px;
+  margin: 0 0 0px 10px; }
+
+/*RESPONSIVE*/
+.col-2,
+.col-4,
+.col-6,
+.col-8,
+.col-10,
+.col-12 {
+  float: left;
+  position: relative; }
+
+.row:before, .row:after {
+  content: "";
+  display: table; }
+
+.row:after {
+  clear: both; }
+
+.row {
+  margin: 0 -10px;
+  zoom: 1; }
+
+.col-1 {
+  width: 8.33333%; }
+
+.col-2 {
+  width: 16.66667%; }
+
+.col-3 {
+  width: 25%; }
+
+.col-4 {
+  width: 33.33333%; }
+
+.col-5 {
+  width: 41.66667%; }
+
+.col-6 {
+  width: 50%; }
+
+.col-7 {
+  width: 58.33333%; }
+
+.col-8 {
+  width: 66.66666%; }
+
+.col-9 {
+  width: 75%; }
+
+.col-10 {
+  width: 83.33333%; }
+
+.col-11 {
+  width: 91.66667%; }
+
+.col-12 {
+  width: 100%; }
+
+@media only screen and (min-width: 640px) {
+  .col-m-1 {
+    width: 8.33333%; }
+
+  .col-m-2 {
+    width: 16.66667%; }
+
+  .col-m-3 {
+    width: 25%; }
+
+  .col-m-4 {
+    width: 33.33333%; }
+
+  .col-m-5 {
+    width: 41.66667%; }
+
+  .col-m-6 {
+    width: 50%; }
+
+  .col-m-7 {
+    width: 58.33333%; }
+
+  .col-m-8 {
+    width: 66.66666%; }
+
+  .col-m-9 {
+    width: 75%; }
+
+  .col-m-10 {
+    width: 83.33333%; }
+
+  .col-m-11 {
+    width: 91.66667%; }
+
+  .col-m-12 {
+    width: 100%; } }
+    
+    
+@media only screen and (min-width: 1024px) {
+  .col-l-1 {
+    width: 8.33333%; }
+
+  .col-l-2 {
+    width: 16.66667%; }
+
+  .col-l-3 {
+    width: 25%; }
+
+  .col-l-4 {
+    width: 33.33333%; }
+
+  .col-l-5 {
+    width: 41.66667%; }
+
+  .col-l-6 {
+    width: 50%; }
+
+  .col-l-7 {
+    width: 58.33333%; }
+
+  .col-l-8 {
+    width: 66.66666%; }
+
+  .col-l-9 {
+    width: 75%; }
+
+  .col-l-10 {
+    width: 83.33333%; }
+
+  .col-l-11 {
+    width: 91.66667%; }
+
+  .col-l-12 {
+    width: 100%; } }
+
+/*# sourceMappingURL=habillage.css.map */