final touch

app/assets/javascripts/main.js

@@ -3,14 +3,7 @@
 
   $(document).ready(function(){
 
-    // Etendre/réduire le menu en mode mobile
     
-    $("#toggle-menu").click(function(){
-
-      $(".menu").slideToggle( "slow", function() {
-        // Animation complete.
-      });
-    })
 
     // Pour que le menu soit active en fonction du scroll
     $(document).on("scroll", onScroll);
@@ -39,7 +32,9 @@
     
     var options = {offset:"100%"};
 
-    $('#agence_bloc, #home_top, #services-bloc, #nous-bloc, #contact-bloc').waypoint(function(direction) {
+    
+
+    $('#agence_bloc, .inner_top, #services-bloc, #nous-bloc, #contact-bloc').waypoint(function(direction) {
 
       contentAnimation(this.element);
     },options);

app/assets/javascripts/public.js.coffee

@@ -8,7 +8,9 @@ $ ->
 
 
 
+  $("#toggle-menu").click -> 
     
+    $("#top_bar .menu").slideToggle()
 
 
 

app/assets/stylesheets/public.scss

@@ -151,6 +151,9 @@ $blue :#2dadb1;
   background: radial-gradient(ellipse at center, rgba(112,112,112,1) 0%, rgba(56,56,56,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#707070', endColorstr='#383838', GradientType=1 );
 
+  img{
+    margin-top:20px;
+  }
   
   .center{
     max-width:1200px;
@@ -260,6 +263,8 @@ h3{
     bottom:23px;
     
     
+
+
     text-transform:uppercase;
     font-size:20px;
     padding-right:15px;
@@ -312,6 +317,12 @@ h3{
       display:none;
     }
     
+    #logo-min{
+      display:block;
+      float:left;
+      padding:10px 0;
+    }
+
 
 
     .menu{
@@ -331,17 +342,25 @@ h3{
 
 #home_top{
 
-  background:url('/Image-home.jpg') no-repeat center center;
+  #home_top_image{
-  background-size:100%;
+    background:url('/Image-home.jpg') no-repeat center center;
-  background-size:cover;
+      background-size:100%;
+      background-size:cover;
+    height:850px;
+    
+    
+  }
   padding-top:1px;
-  height:850px;
+  
   position:relative;
   color:white;
-  .inner{
+  .inner_t{
     margin-top:150px;
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
   
-    max-width: 650px;
     h1{
       text-transform:none;
       font-weight:600;
@@ -701,8 +720,27 @@ padding:5px 8px;
   #toggle-menu{
     display:none;
   }
+  .top{
+    .menu{
+      display:block !important;
+    }
+  }
 }
+
+
+
+
 @media screen and (max-width:880px) {
+  
+  
+  #services-bloc{
+    img{
+      margin-top:40px;
+    
+    }
+  }
+  
+  
   body{
     padding-top:0px;
   }
@@ -710,6 +748,37 @@ padding:5px 8px;
     text-align:center;
   }
   
+  #home_top{
+    
+    #home_top_image{
+      height:400px;
+    }
+    
+    
+    
+    
+    .inner_t{
+      
+      h1{
+
+        font-size:20px;
+      
+        span{
+        
+          font-size:24px;
+        
+
+        }
+      }
+      
+      position:static;
+      padding:30px 0;
+      margin:0;
+      background:#F6F6F6;
+    
+    }
+  }
+
   #embarquez{
 
       margin:0px !important;
@@ -739,9 +808,10 @@ padding:5px 8px;
     }
     overflow:visible;
     .menu{
-      display:block;
+      display:none;
-
+      position:static;
       text-align:center;
+      padding-top: 50px;
 
       a{
         display:block;
@@ -825,4 +895,39 @@ padding:5px 8px;
 }
 
 
+
+
+
+.popup_container{
+  #popup_content{
+
+    margin:30px;
+    
+
+    .inner{
+      padding:0px;
+      overflow:auto;
+      position:absolute;
+      top:0;
+      left:0;
+      right:0;
+      bottom:0;
+      z-index:5;
+    }
+    
+    
+    .center{
+      
+      padding:30px;
+    }
+
+
+
+
+  }
+}
+
+
+
+
 }

app/views/layouts/public.html.haml

@@ -71,21 +71,22 @@
 
 
     .top#top_bar
-      =link_to image_tag("/logo-min.png", :id => "logo-min"), "/"+@lang.slug+"/index.html"
+      .center
-      =link_to i(:navicon),"#", id:"toggle-menu"
+        =link_to image_tag("/logo-min.png", :id => "logo-min"), "/"+@lang.slug+"/index.html"
-      =link_to image_tag("/logo.png", :id => "logo"), "/"+@lang.slug+"/index.html"
+        =link_to i(:navicon),"#", id:"toggle-menu"
+        =link_to image_tag("/logo.png", :id => "logo"), "/"+@lang.slug+"/index.html"
 
   
-      .menu
+        .menu
-        %ul
+          %ul
-          -links = [["Home","main"],["L'agence","agence_bloc"],["Nos services","services-bloc"],["Un peu de nous","nous-bloc"], ["Contact","contact-bloc"]]
+            -links = [["Home","main"],["L'agence","agence_bloc"],["Nos services","services-bloc"],["Un peu de nous","nous-bloc"], ["Contact","contact-bloc"]]
-          -links.each do |link|
+            -links.each do |link|
-            %li
+              %li
-              %a{:href => "#", :'data-link' => link[1].to_s, :onclick => "$('html,body').animate({scrollTop: ($('#"+link[1].to_s+"').offset().top - 50)},'slow');return false;"}
+                %a{:href => "#", :'data-link' => link[1].to_s, :onclick => "$('html,body').animate({scrollTop: ($('#"+link[1].to_s+"').offset().top - 50)},'slow');return false;"}
-                =link[0]
+                  =link[0]
 
 
-        .clean
+          .clean
 
 
 
@@ -98,23 +99,29 @@
 
 
         #home_top
+          #home_top_image
+          .inner_t
+            .center
+              .inner_top.animated-block{:style => "max-width: 650px;"}
+                
+                %h1
+                  l’agence de communication globale,
+                  %span créateur d’ondes positives !
+                %p
+                  Nous travaillons de la conception à la réalisation de votre identité
+                  %br
+                  visuelle
+
+                  adaptée à votre positionnement, afin de communiquer
+                  %br
+                  de manière
+
+                  cohérente sur vos différents supports Print & Digitaux
+
           
           
-          .center
-            .inner
-              %h1
-                l’agence de communication globale,
-                %span créateur d’ondes positives !
-              %p
-                Nous travaillons de la conception à la réalisation de votre identité
-                %br
-                visuelle
           
-                adaptée à votre positionnement, afin de communiquer
-                %br
-                de manière
           
-                cohérente sur vos différents supports Print & Digitaux
           
           
       =yield