responsive

app/assets/stylesheets/public.scss

@@ -75,9 +75,23 @@ a{
   
 }
 .coms{
-  
+  font-family:"jaf-bernino-sans", sans-serif;
+  font-size:14px;
   a{
     color:inherit;
     
   }
 }
+time{
+  font-family:"jaf-bernino-sans", sans-serif;
+  font-size:14px;
+  
+}
+
+.sidebar_title{
+  font-weight:normal;
+  border-bottom:1px solid #858585;
+  color:#858585;
+  font-size:1em;
+  
+}

app/assets/stylesheets/public/layout.css.scss

@@ -25,12 +25,13 @@ header#top{
 		width:120px;
 		float:left;
 		margin:20px 0px;
+    margin-left:20px;
 	}
 	
 }
 
 navigation#first_nav{
-	
+	font-family:"jaf-bernino-sans", sans-serif;
 	margin-top:50px;
 	margin-right:20px;
 	float:right;
@@ -71,12 +72,24 @@ navigation#first_nav{
   
 }
 #sidebar{	
-	padding:20px;
+	
+  padding-left:40px;
   width:35%;
-  float:right;
+  float:left;
   box-sizing: border-box;
  
-	
+	h3{
+    
+    
+	}
+  
+  .article_small{
+    h3{
+      
+      border:0;
+    }
+    
+  }
 
 
 	
@@ -131,7 +144,7 @@ footer{
 
 
 
-//@media only screen and (min-width: 0px)  {
+
 	
 
 	
@@ -139,12 +152,14 @@ footer{
 
 footer{
 	display:block;
-	padding:1em;
+	padding:20px;
 	font-size:0.95em;
 	line-height:1.4em;
-	border-top: #202020 2px solid;
+	border-top: #858585 1px solid;
-	border-bottom: #97BC4A 12px solid;
+	max-width:1200px;
 	text-align:center;
+  margin:auto;
+  margin-top:50px;
 	
 	
 
@@ -293,3 +308,90 @@ article, .corps_content{
   
   background-image:url('/design.jpg');
 }
+
+
+
+#articles_pagination{
+  font-family:"jaf-bernino-sans", sans-serif;
+	clear:both;
+	margin-top:40px;
+  a{
+    
+    
+  }
+	a, .current{
+		
+		display : inline-block;
+
+		color:#858585;
+		text-decoration:none;
+		
+		width:28px;
+    border:1px solid #858585;
+		padding:10px 4px;
+	
+
+		text-align:center;
+		
+	}
+	div.pages{
+		display:inline;
+		padding-left:10px;
+	}
+	
+	div.arrows{
+		float:right;
+	}
+	
+	
+	.current, a:hover{
+    color:white;
+		background:#858585;
+	}
+}
+
+
+
+
+
+@media only screen and (min-width: 960px) and (max-width: 1240px)  {
+  #main{
+    
+    margin:0 20px;
+    
+  }
+  #sidebar{
+    padding-left:20px;
+    
+  }
+  
+  
+}
+
+@media only screen and (min-width: 0px) and (max-width: 960px)  {
+  header#top img{
+    float:none;
+    display:block;
+    margin:auto;
+  }
+  
+  navigation#first_nav{
+    float:none;
+    display:block;
+    margin:auto;
+    text-align:center;
+    
+    
+  }
+  #corps, #sidebar{
+    width:auto;
+    float:none;
+    
+    
+  }
+  
+  #sidebar{
+    
+    padding:20px;
+  }
+}

app/views/layouts/public.html.haml

@@ -42,11 +42,17 @@
     
     
     #main
+      
+          
+      
+    
+      #corps{:class => ("article_corps" if @article)}=yield
+      
       %section#sidebar
         =render :partial => "public/articles/sidebar_recents"
       
       
-        %h3 Mes activités
+        %h3.sidebar_title Mes activités
 
           
         %a.design.activites{:target => "_blank", :href => "http://www.quartz-agence.com", :title => "Site photo de Nicolas Bally, Photographe"}
@@ -57,10 +63,6 @@
         
         %a.photographe.activites{:target => "_blank", :href => "http://art.nicolasbally.com", :title => "Site photo de Nicolas Bally, Photographe"}
           %span Photographie
-          
-      
-    
-      #corps{:class => ("article_corps" if @article)}=yield
     
       
       

app/views/public/articles/_sidebar_recents.html.haml

@@ -1,6 +1,6 @@
 
 .recents.widget
-	%h3 Articles récents
+	%h3.sidebar_title Articles récents
 	=render Article.recents.limit(10)