From: Johan GIRAUD <johangiraud1@gmail.com>
Date: Wed, 21 Jan 2015 08:44:17 +0000 (+0100)
Subject: [CSS] responsive+SASS
X-Git-Tag: 0.1.0~136
X-Git-Url: http://git.cyclocoop.org/?a=commitdiff_plain;h=8a6fb72aa0504e7fb177147c60bed90d37515825;hp=b7ebb8d2a465dcac3fd6c55ec4ae5c75c8757791;p=lhc%2Fweb%2Fclavettes.git

[CSS] responsive+SASS
---

diff --git a/css/habillage.css b/css/habillage.css
index 605652c..5d2124c 100644
--- a/css/habillage.css
+++ b/css/habillage.css
@@ -1,174 +1,231 @@
-body{
-	margin-top:0;
-	height: 1500px;
-	font-family: 'Open Sans', Arial, sans-serif;
-}
+* {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
 
-header{
-	margin:0 auto;
-	width:1200px;
-}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif; }
+
+header {
+  margin: 0 auto;
+  width: 100%; }
+
+header img {
+  margin-left: 120px; }
 
 #wrap {
-	background-color: #2b1b1b;
-	padding-top:100px;
-	width: 1200px;
-	margin: 0 auto;
-}
-
-a{
-	text-decoration:none;
-}
-
-h1{
-	margin: 15px -15px 5px 15px;
-	padding:0;
-	font-size:2.2em;
-	color:#1d0b78;
-	display:inline-block;
-	width:100%;
-	word-wrap: break-word;
-}
-
-h2{
-	margin: 15px 15px;
-	font-size:1.5em;
-	color:#1d0b78;
-	display:inline-block;
-	width:100%;
-	
-}
-
-h3{
-	margin:15px;
-	display:inline-block;
-	color:#1d0b78;
-}
-
-p{
-	margin:0 15px;
-	color:#1d0b78;
-	text-decoration:none;
-}
+  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; }
 
-#ateliers{
-	/*background-color: #76d55c;*/
-	width:300px;
-	height:600px;
-	float:left;
-}
-
-.atelier1{
-	width:300px;
-	height:300px;
-	margin-bottom:15px;
-	background-color: #2bc7cd;
-}
-
-.atelier2{
-	width:300px;
-	height:300px;
-	margin-bottom:15px;
-	background-color: #2bc7cd;
-}
-
-.atelier3{
-	width:300px;
-	height:300px;
-	margin-bottom:15px;
-	background-color: #2bc7cd;
-}
-
-.atelier4{
-	width:300px;
-	height:300px;
-	margin-bottom:15px;
-	background-color: #2bc7cd;
-}
-
-.atelier5{
-	width:300px;
-	height:300px;
-	margin-bottom:15px;
-	background-color: #2bc7cd;
-}
-
-.atelier6{
-	width:300px;
-	height:300px;
-	margin-bottom:15px;
-	background-color: #2bc7cd;
-}
-
-.atelier7{
-	width:300px;
-	height:300px;
-	margin-bottom:15px;
-	background-color: #2bc7cd;
-}
+#news img {
+  height: 350px; }
 
+.article1,
+.article2,
+.article3,
+.article4 {
+  background-color: #ffaa7f; }
 
-/*2EME COLONNE*/
+.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; }
 
-#news{
-	/*background-color:#a51616;*/
-	width:500px;
-	height:1000px;
-	margin-left:20px;
-	float:left;
-	clear:right;
-}
-
-.article1{
-	background-color:#ffaa7f;
-	width:500px;
-	height:700px;
-	margin-bottom:15px;	
-}
-
-.article2{
-	background-color:#ffaa7f;
-	width:500px;
-	height:440px;
-	margin-bottom:15px;	
-}
-
-.article3{
-	background-color:#ffaa7f;
-	width:500px;
-	height:440px;
-	margin-bottom:15px;	
-}
-
-.article4{
-	background-color:#ffaa7f;
-	width:500px;
-	height:440px;
-	margin-bottom:15px;	
-}
+/*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; }
 
-/*3EME COLONNE*/
+.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%; }
 
-.map{
-	background-color:#6059d2;
-	width:400px;
-	margin-left:840px;
-	height:400px;
-	margin-bottom:20px;
-}
+  .col-l-11 {
+    width: 91.66667%; }
 
-.agenda{
-	background-color: #ca52ae;
-	width:400px;
-	height:400px;
-	margin-left:840px;
-}
+  .col-l-12 {
+    width: 100%; } }
 
+/*# sourceMappingURL=habillage.css.map */
diff --git a/css/habillage.scss b/css/habillage.scss
new file mode 100644
index 0000000..74cf4f3
--- /dev/null
+++ b/css/habillage.scss
@@ -0,0 +1,325 @@
+*{
+	-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%;
+}
+}
+
diff --git a/front-page.html b/front-page.html
index 2e51e2b..877b25a 100644
--- a/front-page.html
+++ b/front-page.html
@@ -12,7 +12,7 @@
 	
 		<header>
 			
-				<a href="#"><img src="../Images/logo_heureux-cyclage.jpg" alt="logo_heureux-cyclage" width="300" /></a>
+				<a href="#"><img src="../clavettes/images/logo_heureux-cyclage.jpg" alt="logo_heureux-cyclage" width="300" /></a>
 			
 		</header>
 	
@@ -22,115 +22,123 @@
 <!--1ERE COLONNE-->
 			
 	
-			<!--<div class="row">
 			
-				<div class="column large-3">-->
+			
+				<div class="col-12 col-m-6 col-l-3">
 				
 				
 					<div id="ateliers">
 					
-						<div class="atelier1">
-						
+					
+					
+						<ul>
+							<li>
 							
+								
+								
+								<a href="#"><h1>Atelier vélo d'Échirolles</h1></a>
+								<a href="#"><h2>Halle du vieux village<br>Échirolles</h2></a>
+								<a href="#"><h2>horaires</h2></a>
 							
-							<a href="#"><h1>Atelier vélo d'Échirolles</h1></a>
-							<a href="#"><h2>Halle du vieux village<br>Échirolles</h2></a>
-							<a href="#"><h2>horaires</h2></a>
-						
-						</div>
-						
-						<div class="atelier2">
-						
-							<a href="#"><h1>uN p'Tit véLo dAnS La Tête</h1></a>
-							<a href="#"><h2>5 rue de Londres <br>38000 GRENOBLE</h2></a>
-							<a href="#"><h2>horaires</h2></a>
-						
-						</div>
-						
-						<div class="atelier3">
-						
-							<a href="#"><h1>Les Cycl'hauts du Rabot</h1></a>
-							<a href="#"><h2>11, rue Maurice Gignoux<br>38031 GRENOBLE</h2></a>
-							<a href="#"><h2>horaires</h2></a>
-						
-						</div>
-						
-						<div class="atelier4">
-						
-							<a href="#"><h1>La Citrouille</h1></a>
-							<a href="#"><h2>38000 Grenoble</h2></a>
-							<a href="#"><h2>horaires</h2></a>
-						
-						</div>
-						
-						<div class="atelier5">
-						
-							<a href="#"><h1>Un Vélo de Plus</h1></a>
-							<a href="#"><h2>adresse</h2></a>
-							<a href="#"><h2>horaires</h2></a>
-						
-						</div>
-						
-						<div class="atelier6">
-						
-							<a href="#"><h1>Les déraillés</h1></a>
-							<a href="#"><h2>adresse</h2></a>
-							<a href="#"><h2>horaires</h2></a>
-						
-						</div>
-						
-						<div class="atelier7">
-						
-							<a href="#"><h1>Atelier Garave</h1></a>
-							<a href="#"><h2>adresse</h2></a>
-							<a href="#"><h2>horaires</h2></a>		
-						
-						</div>
-						
+							</li>
+							
+							<li>
+							
+								<a href="#"><h1>uN p'Tit véLo dAnS La Tête</h1></a>
+								<a href="#"><h2>5 rue de Londres <br>38000 GRENOBLE</h2></a>
+								<a href="#"><h2>horaires</h2></a>
+							
+							</li>
+							
+							<li>
+							
+								<a href="#"><h1>Les Cycl'hauts du Rabot</h1></a>
+								<a href="#"><h2>11, rue Maurice Gignoux<br>38031 GRENOBLE</h2></a>
+								<a href="#"><h2>horaires</h2></a>
+							
+							</li>
+							
+							<li>
+							
+								<a href="#"><h1>La Citrouille</h1></a>
+								<a href="#"><h2>38000 Grenoble</h2></a>
+								<a href="#"><h2>horaires</h2></a>
+							
+							</li>
+							
+							<li>
+							
+								<a href="#"><h1>Un Vélo de Plus</h1></a>
+								<a href="#"><h2>adresse</h2></a>
+								<a href="#"><h2>horaires</h2></a>
+							
+							</li>
+							
+							<li>
+							
+								<a href="#"><h1>Les déraillés</h1></a>
+								<a href="#"><h2>adresse</h2></a>
+								<a href="#"><h2>horaires</h2></a>
+							
+							</li>
+							
+							<li>
+							
+								<a href="#"><h1>Atelier Garave</h1></a>
+								<a href="#"><h2>adresse</h2></a>
+								<a href="#"><h2>horaires</h2></a>		
+							
+							</li>
+						</ul>
 					</div>
 				
-				<!--</div>
+				</div>
 				
-			</div>-->
+			
 			
 			
 			
 <!--2EME COLONNE-->	
 			
 			
-				<!--<div class="column large 5">-->
 				
-					<div id="news">
+				
+					<div class="col-12 col-m-6 col-l-5">
 					
-						<div class="article1">
-						
-							<a href="#"><img src="../Images/velo-nb.png" alt="logo_heureux-cyclage" width="500px" /></a>
+						<div id="news">
 						
-							<a href="#"><h1>Titre de l'article</h1></a>
+							<div class="article1">
 							
-							<a href="#"><h3>Date — Auteur</h3></a>
+								<a href="#"><img src="../clavettes/images/velo-nb.png" alt="logo_heureux-cyclage"/></a>
 							
-							<a href="#"><p>extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article</p></a>
+								<a href="#"><h1>Titre de l'article</h1></a>
+								
+								<a href="#"><h3>Date — Auteur</h3></a>
+								
+								<a href="#"><p>extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article...</p></a>
+								<a href="#"><p class="suite">Lire la suite...</p></a>
+								
 							
+							</div>
+							
+							<div class="article2">
+							
+							</div>
+							
+							<div class="article3">
+							
+							</div>
+							
+							<div class="article4">
+							
+							</div>
 						
-						</div>
-						
-						<div class="article2">
-						
-						</div>
-						
-						<div class="article3">
-						
-						</div>
-						
-						<div class="article4">
 						
 						</div>
-					
-					
+			
 					</div>
+					
 				
-				<!--</div>-->
 			
 			
 			
@@ -138,29 +146,34 @@
 <!--3EME COLONNE-->			
 			
 			
-				<!--<div class="column large 4">-->
+				<div class="col-12 col-m-12 col-l-4">
 				
 				
 					<div class="map">
 					
+						
+					
 					</div>
 				
-				<!--</div>
+				</div>
 				
 				
 				
-				<div class="row">
 				
-					<div class="column large 4">-->
+				
+					<div class="col-12 col-m-12 col-l-4">
 					
 						<div class="agenda">
 						
+							
+
+						
 						</div>				
 					
 					
-					<!--</div>
+					</div>
 						
-				</div>-->
+				
 		
 		
 	
diff --git a/images/logo_heureux-cyclage.jpg b/images/logo_heureux-cyclage.jpg
new file mode 100644
index 0000000..bad102b
Binary files /dev/null and b/images/logo_heureux-cyclage.jpg differ
diff --git a/images/velo-nb.png b/images/velo-nb.png
new file mode 100644
index 0000000..8828a5b
Binary files /dev/null and b/images/velo-nb.png differ