modifs 1

app/assets/javascripts/application.coffee

@@ -6,6 +6,7 @@
 #= require jquery.animate-enhanced.min
 #= require jquery.tagcanvas
 
+
 #= require jquery.bxslider.min
 
 
@@ -21,7 +22,20 @@ bottom = 0
 prev_link = ""
 $("document").ready ->
   position_img_now = ->
-    $("#large .large-img").css("margin-top", (( $(window).height() - $("#large .large-img").height() - 100) / 2 )+"px")
+    
+    
+    
+    
+    
+    imgheight = $("#large .large-img").height()
+    imgwidth = $("#large .large-img").height()
+    
+    
+    
+    $("#large .large-img").css
+      "margin-top" :((( $(window).height() - $("#large .large-img").outerHeight()) / 2 )+"px")
+      #"width" : "100px"
+
     
     
   position_img = ->
@@ -32,13 +46,32 @@ $("document").ready ->
   
   
   $("#rea-gal a").click ->
+    maxwidth = 1000
+    maxheight = 900
+    
+    
+    
+    
     prev_link = $(this)
     $("body").append "<div id='large'></div>"
     $("#large").fadeIn(500)
     $("#large").append "<img src='/arrow-next.png' class='next' />"
     $("#large").append "<img src='/arrow-prev.png' class='prev' />"
+    $("#large").append "<div class='img_container first'></div>"
+    $(".img_container.first").append "<img src="+$(this).attr("href")+" class='large-img' />"
+    if $(window).height() > (maxheight+100)
+      $("#large .large-img").css
+        "max-height" : maxheight
+    else
+      $("#large .large-img").css
+        "max-height" : "90%"
         
-    $("#large").append "<img src="+$(this).attr("href")+" class='large-img' />"
+    if $(window).width() > (maxwidth+100)
+      $("#large .large-img").css
+        "max-width" : maxwidth
+    else
+      $("#large .large-img").css
+        "max-width" : "90%"
     
     position_img();
     
@@ -64,9 +97,10 @@ $("document").ready ->
     
    
     #titre = photo.find("h3")
-    $('#large .large-img').fadeOut 300, ->
+    $(".img_container.first").fadeOut 300, ->
       $('#large .large-img').attr("src", link.attr("href"))
-      $('#large .large-img').fadeIn()
+      $("#large .large-img").one "load", ->
+        $(".img_container.first").fadeIn()
       position_img();
     prev_link = link
     
@@ -85,11 +119,13 @@ $("document").ready ->
     
    
     #titre = photo.find("h3")
-    $('#large .large-img').fadeOut 300, ->
-      $('#large .large-img').attr("src", link.attr("href"))
-      $('#large .large-img').fadeIn()
-      position_img();
     prev_link = link
+    $(".img_container.first").fadeOut 300, ->
+      $('#large .large-img').attr("src", link.attr("href"))
+      $("#large .large-img").one "load", ->
+        $(".img_container.first").fadeIn()
+      position_img();
+    
     
     false
   

app/assets/stylesheets/application.scss

@@ -13,6 +13,7 @@
  *= require superslides
  *= require lightSlider
  *= require jquery.bxslider
+
  *= require_self
  */
  
@@ -34,10 +35,10 @@
  left:0;
  width:100%;
  height:100%;
- background:rgba(156,200,102,1);//rgba(132,187,64,0.8);
+ 
+ background:rgba(0,0,0,0.8);//rgba(132,187,64,0.8);
  z-index:10;
-padding:50px;
+
-box-sizing: border-box;
   .next, .prev{
   width:20px;
   position:absolute;
@@ -53,15 +54,23 @@ left:15px;
   .next{
   right:15px;
   }
+ 
+ .img_container{
+ height:100%;
+ width:100%;
+
+
+ box-sizing: border-box;
+ 
    .large-img{
    cursor:pointer;
- max-height:100%;
+   padding:10px;
- max-width:100%;
+   background:white;
    
    display:block;
    margin:auto;
    }
- 
+ }
  }
  body{
  font-family:Lato;
@@ -86,28 +95,19 @@ right:15px;
  }
  }
  }
- .infos{
+ hr{
- h3{
+ border:0px;
- margin-top:5px;
+ border-bottom:1px solid rgba(250,250,250,0.6);
 
  }
- .samples{
- min-width:400px;
- width:50%;
- float:right;
- 
- }
- 
- }
- 
  
  .gal{
  li{
- height:390px;
+ height:540px;
  text-align:center;
  }
  img{
- height:350px;
+ height:500px;
  margin:auto;
  }
  
@@ -277,23 +277,21 @@ width:560px;
  #cristal-protect, #my-strat{
  padding-bottom:0px;
  
- .infos{
 
- padding:1em;
- 
- 
- }
  .more{
  padding:0.5em 0;
  display:inline-block;
 
  text-align:left;
- ul{
+ .span{
- margin-left:120px;
+ float:left;
+ padding:0 10px;
+ 
  }
  img{
- width:100px;
+ width:140px;
- margin:40px 10px;
+ margin:32px 0px;
+ margin-right:20px;
  
  float:left;
  }
@@ -309,19 +307,6 @@ width:560px;
 background:rgba(132,187,64,1);
 
  
- padding:0px;
- padding:55px 0px;
- position:relative;
- 
- h2{
- background:rgba(132,187,64,0.9);
- position:absolute;
- top:70px;
- padding:10px 20px;
- z-index:2;
- font-size:1.5em;
- 
- }
 
  
  
@@ -329,10 +314,22 @@ background:rgba(132,187,64,1);
  #about{
  padding-top:70px;
   text-align:left;
+  color:white;
+  background:rgba(40,40,40,1);
  h2{
  text-align:center;
  font-size:2em;
+ margin-bottom:0;
+ font-weight:500;
+  
+ }
+ h3{
+  margin-top:0px;
+   padding-top:0px;
   padding-bottom:30px;
+  text-align:center;
+   font-weight:500;
+   font-size:1.6em;
  }
  
  }
@@ -365,9 +362,9 @@ background:rgba(132,187,64,1);
  right:0px;
  #logo-min{
  position:absolute;
- top:4px;
+ top:5px;
  left:10px;
- height:35px;
+ height:40px;
  display:none;
  
 z-index:100;

app/assets/stylesheets/jquery.bxslider.css

@@ -86,7 +86,7 @@
 	display: block;
 	width: 8px;
 	height: 8px;
-  border:1px solid rgba(10,10,10, 0.6);
+  border:1px solid rgba(250,250,250, 0.9);
 	margin: 0 5px;
 	outline: 0;
   
@@ -97,8 +97,8 @@
 
 .bx-wrapper .bx-pager.bx-default-pager a:hover,
 .bx-wrapper .bx-pager.bx-default-pager a.active {
-	background: rgba(10,10,10, 0.6);
+	background: rgba(250,250,250, 0.9);
-  border:1px solid rgba(10,10,10, 0);
+  border:1px solid transparent;
   
 }
 

app/views/welcome/index.html.haml

@@ -61,17 +61,14 @@
             %li
               %img{alt: "Cinelli", src: "images/04.jpg"}/
 
-          %nav.slides-navigation
-            %a.next{href: "#"} Next
-            %a.prev{href: "#"} Previous
     
     #menu-container
       #menu
         =link_to image_tag("/logo-min.png", :id => "logo-min"), "#home", :onclick => "scrollToAnchor('home');return false;"
-        =link_to "Société", "#about", :onclick => "scrollToAnchor('about');return false;"
+        =link_to "Présentation", "#about", :onclick => "scrollToAnchor('about');return false;"
         =link_to raw("Cristal Protect<sup>®</sup>"), "#cristal-protect", :onclick => "scrollToAnchor('cristal-protect');return false;"
         =link_to raw("MyStrat<sup>®</sup>"), "#my-strat", :onclick => "scrollToAnchor('my-strat');return false;"
-        =link_to "Idées", "#brainstorming", :onclick => "scrollToAnchor('brainstorming');return false;"
+        =link_to "Accompagnement", "#brainstorming", :onclick => "scrollToAnchor('brainstorming');return false;"
         =link_to "Réalisations", "#realisations", :onclick => "scrollToAnchor('realisations');return false;"
         =link_to "Contact", "#contact", :onclick => "scrollToAnchor('contact');return false;"
     
@@ -80,22 +77,20 @@
       #about
         .center
           %h2
-            Art des Sens, solutions décoratives personnalisées
+            Solutions décoratives personnalisées
-            %br
+          %h3  
             pour l’agencement, la décoration et la signalétique
           %p
     
-            Fort d’une expérience de plus de onze années dans les différentes technologies d’impression numérique, la société 
+            Fort d’une expérience de plus de onze années dans l’impression numérique, la société 
             Art des Sens
             est spécialisée dans la commercialisation de supports imprimés, résistants aux agressions extérieures (UV, rayures, graffitis…)
           %p
-            Mais au-delà de la fourniture de panneaux imprimés, selon vos besoins, 
+            En complément de la fourniture de panneaux imprimés et selon vos besoins, Art des Sens vous 
       
-            Art des Sens
+            accompagnera dans l’étude, la conception, la fabrication et la pose de vos projets.
-      
-            vous accompagnera dans l’étude, la conception, la fabrication et la pose de vos projets.
           %p Ensemble, concrétisons vos idées...
-          =image_tag "/sign.jpg", :style => "width:230px;float:right;padding-bottom:2em;"
+          =image_tag "/sign.png", :style => "width:230px;float:right;padding-bottom:2em;"
           %p{:style => "clear:both;"}
 
       #cristal-protect
@@ -106,12 +101,13 @@
           
           =image_tag "/cristal-protect.png", :class => "icons"
           
-          %p Associé à la société Cris-Graphic, nous avons développé l’impression numérique haute définition pérenne.
+          %p Associé à la société Cris-graphic, nous avons mis au point un procédé permettant de réaliser des impression numérique  en haute définition et pérenne.
           %p
-            Notre technologie consiste à encapsuler n’importe quelle image numérique au cœur d’un vernis UV extrêmement résistant. Ce traitement apporte à l’ensemble une résistance et une durabilité d’exposition en extérieur exceptionnelles.
+            La technologie consiste à encapsuler n’importe quelle image numérique au cœur d’un vernis UV extrêmement résistant. Ce traitement apporte à l’ensemble une résistance et une durabilité d’exposition en extérieur exceptionnelles.
+          %p Il est ainsi possible d'imprimer directement sur une grande variété de supports comme l'aluminium, des matériaux composites  (Dibond<sup>®</sup>, Reynobond<sup>®</sup>, Alucore<sup>®</sup>, Forex<sup>®</sup>...), du verre et du bois.
+ 
+      
 
-        .infos
-          .center
         .samples
           %ul.gal
             %li{:class => ".preserve"}
@@ -132,38 +128,26 @@
             
               
             
-            %h3 Caractéristiques techniques
-            %p 
-              Supports disponibles :
-            %ul
-              %li Aluminium
-              %li Composite (Dibond<sup>®</sup>, Reynobond<sup>®</sup>, Alucore<sup>®</sup>, Forex<sup>®</sup>...)
-              %li Verre
-              %li Bois
-            %p Autre supports, nous consulter.
-        
-            %p
-              Format maximum disponnible :
-            %ul
-              %li 4000 x 1600 mm
-          
-            %p Epaisseur maximum : 60 mm
-        
-            %p 
-              Finitions disponibles :
-            %ul
-              %li Mat
-              %li Brillant
-            
         .center 
+          %hr 
           .more
+            .span
               =image_tag "/more.png"
+            .span
               %ul
                 %li Bords tombés décorés.
                 %li Découpe, façonnabge, gravure possible.
                 %li Intégration de braille sur demande.
                 %li Extrême résistance aux agressions extérieurs.
                 %li Pas de minimum de commande.
+            .span
+              %ul
+                %li Epaisseur maximum : 60 mm
+                %li Finition : mat ou brillant
+                %li Format maximum disponnible : 4000 x 1600 mm
+            .clear
+            
+            
             
            
         
@@ -185,8 +169,6 @@
           
 
 
-        .infos
-          .center
         
         .samples
           %ul.gal
@@ -210,45 +192,25 @@
         
            
         
-
-              
-            
-        
-              
-            
-            %h3 Caractéristiques techniques
-            %p 
-              Formats maximum disponibles :
-            %ul
-              %li 2440 x 1220 mm
-              %li 3050 x 1300 mm
-              %li 3660 x 1525 mm
-          
-            %p
-              Epaisseurs disponnibles :
-            %p
-              0,7mm, 3mm, 6mm, 8mm, 10mm et 20mm.
-              %br/
-              Autre épaisseurs, nous consulter.
-          
-            %p 
-              Finitions disponibles :
-            %ul
-              %li Matte
-              %li Brillant
-            %p
-              Impression recto/verso possible, nous consulter.
-        
         .center
+          %hr 
           .more
-          
+            .span
               =image_tag "/more.png"
+            .span
               %ul
                 %li Garantie 10 ans en extérieur.
-              %li Découpe, façonnabge, gravure possible.
+                %li Découpe, façonnabge, gravure possible
                 %li Intégration de braille sur demande
                 %li Extrême résistance aux agressions extérieurs
                 %li Pas de minimum de commande
+            .span
+              %ul
+                %li Formats maximum disponibles : 3660 x 1525 mm
+                %li Epaisseurs disponnibles : de 0,7mm à 20mm
+                %li Impression recto/verso possible, nous consulter.
+                %li Finitions disponibles : Matte et Brillant
+            .clear
         .clear
       #brainstorming
         .center
@@ -306,7 +268,7 @@
         
         #rea-gal
           -(1..10).each do |i|
-            =link_to image_tag("/realisation/#{i}-p.jpg"), "/realisation/#{i}.jpg"
+            =link_to image_tag("/realisation/#{i}-p.jpg"), "/realisation/#{i}.jpg", :data => {:title => "test",:lightbox => "image-1"}
           .clear
       #contact
         .center
@@ -314,9 +276,7 @@
           %p 
             N'hésitez pas à nous contacter pour nous parler de votre projet !
           %p
-            =image_tag "/logo-couleurs.png", :style => "width:300px;"
+            =image_tag "/logo-couleurs.png", :style => "width:400px;"
-            %br
-            %strong Thomas Blanc-Brude
             %br
             296 rue de la Béalière
             %br