responsive item

user/themes/figureslibres/js/site.js

@@ -145,8 +145,6 @@ function click_img(e, $this, $href, url, page, cat, project_name) {
 
     var $loader = $(this).parents('.card').find('.loader');
 
-
-
     e.preventDefault();
 
       if ($this.parent().hasClass('open')) {
@@ -198,45 +196,15 @@ function animate() {
 function marg_item(project_name) {
 
   var $item = $('.card-image#'+project_name+' #item');
-
-  var $item_offset = $item.offset().left-8;
   var $card = $item.parents('.card');
+  var pos_card = $card.offset().left-8;
 
-  var $item_list = $item.parents('#item_list');
+  $item.css('margin-left', '-'+pos_card +'px');
-  var pos_card = $card.offset().left;
 
-  var margin_right =  $item_list.width() - (pos_card + $card.width());
+  $(window).resize(function() {
-
+    var pos_card = $card.offset().left-8;
-  $item.css('margin-left', '-'+$item_offset +'px');
+    $item.css('margin-left', '-'+pos_card +'px');
-
+  })
-// if new.vignette.left != old.vignette.left
-// alors recalcule margin.left
-
-  // var timer;
-  // $(window).resize(function() {
-  //   if(timer) {
-  // 		window.clearTimeout(timer);
-  // 	}
-  //
-  // 	timer = window.setTimeout(function() {
-  // 		// actual callback
-  //     var $item = $('.card-image#'+project_name+' #item');
-  //     console.log($item, '$item');
-  // 		console.log( "Firing!" );
-  //
-  //     var $item_offset = $item.offset().left-8;
-  //     console.log( "$item_offset", $item_offset );
-  //     var $card = $item.parents('.card');
-  //
-  //     var $item_list = $item.parents('#item_list');
-  //
-  //     var pos_card = $card.offset().left;
-  //
-  //     var margin_right =  $item_list.width() - (pos_card + $card.width());
-  //     $item.css('margin-left', '-'+$item_offset +'px');
-  // 	}, 500);
-  //
-  // });
 }
 
 function mouseHover() {
@@ -334,6 +302,7 @@ function scrollTop() {
   })
 }
 
+
 $(document).ready(function($){
   // redirection();
   click_link();

user/themes/figureslibres/scss/theme/_sidebar.scss

@@ -5,7 +5,7 @@
   right: calc( -20% + 0.5rem);
   top: 0;
   transition: 0.3s right ease;
-  background: white;
+  background: #f9f9f9fe;
   z-index: 999;
   #icone_list{
     z-index: 999;

user/themes/figureslibres/scss/theme/_start.scss

@@ -147,7 +147,7 @@ body{
             vertical-align: baseline!important;
           }
           #item{
-            width: calc( 500% + ( #{$marg} * 4) );
+            width: calc( 80vw + ( #{$marg} * 4) );
             padding: 2rem;
             margin-top: $marg;
             border-radius: 5px;