slide site

web/themes/custom/reha/dist/css/bundle.css

@@ -1011,7 +1011,7 @@ input {
 
 .slick-dots {
   position: absolute;
-  bottom: -25px;
+  bottom: -60px;
   list-style: none;
   display: block;
   text-align: center;
@@ -1022,8 +1022,8 @@ input {
 .slick-dots li {
   position: relative;
   display: inline-block;
-  height: 20px;
-  width: 20px;
+  height: 50px;
+  width: 50px;
   margin: 0 5px;
   padding: 0;
   cursor: pointer;
@@ -1032,8 +1032,8 @@ input {
   border: 0;
   background: transparent;
   display: block;
-  height: 20px;
-  width: 20px;
+  height: 50px;
+  width: 50px;
   outline: none;
   line-height: 0px;
   font-size: 0px;
@@ -1052,10 +1052,10 @@ input {
   top: 0;
   left: 0;
   content: "•";
-  width: 20px;
-  height: 20px;
+  width: 50px;
+  height: 50px;
   font-family: "slick";
-  font-size: 6px;
+  font-size: 40px;
   line-height: 20px;
   text-align: center;
   color: black;
@@ -1161,10 +1161,6 @@ input {
   display: none;
 }
 
-.home-page-layout-content .slick-dots {
-  bottom: -40px !important;
-}
-
 .view-actus.slick-slider.slick-next:before {
   content: ">";
   font-weight: 100;
@@ -2177,13 +2173,13 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .page-node-site .region-content .node-type-site .image-site .field--name-field-image .field__item img {
   width: 100%;
   object-fit: cover;
-  height: fit-content;
+  height: auto;
 }
 .page-node-site .region-content .node-type-site .image-site .field--name-field-image .field__item blockquote {
   align-self: flex-end;
   font-style: italic;
   margin: 0;
-  width: 10%;
+  width: 20%;
 }
 .page-node-site .region-content .node-type-site .image-site .field--name-field-image .field__item blockquote p {
   margin: 0;

web/themes/custom/reha/js/reha.js

@@ -129,66 +129,30 @@ jQuery(document).ready(function($){
     });
     console.log('slick actu');
   });
-
-    // $(document).ready(function(){
-    //   $('.field--name-field-image > div:nth-child(2)').slick({
-    //     slidesToShow: 1,
-    //     slidesToScroll: 1,
-    //     dots: true,
-    //     arrows: false,
-    //     centerMode: true,
-    //     // centerPadding: '100px',
-    //     responsive: [
-    //       {
-    //         breakpoint: 810,
-    //         settings: {
-    //           slidesToShow: 1,
-    //           adaptiveHeight: true,
-    //           arrows: false,
-    //           draggable: true,
-    //           centerMode: true,
-    //         }
-    //       }]
-    //   });
-    //   console.log('slick site');  
-
-// });
-
+  $(document).ready(function(){
+    $('.page-node-site .field--name-field-image > div:nth-child(2)').slick({
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      dots: true,
+      arrows: false,
+      adaptiveHeight: true,
+      // centerMode: true,
+      // centerPadding: '100px',
+      responsive: [
+        {
+          breakpoint: 810,
+          settings: {
+            slidesToShow: 1,
+            adaptiveHeight: true,
+            arrows: false,
+            draggable: true,
+            centerMode: true,
+          }
+        }]
+    });
+    console.log('slick actu');
+  });
 
 
 })(jQuery, window);
 
-
-// document.addEventListener('DOMContentLoaded', function() {
-//   var nav = document.querySelectorAll('main-nav');
-//   var links = nav.querySelectorAll('li > a');
-//   console.log(links);
-
-
-//   links.forEach(function(link) {
-//     if (link.classList.contains('is-active')) {
-//       nav.classList.add('has-active');
-//     }
-//   });
-// });
-
-
-
-// /////////////////
-//// ancre dans texte au click parragraphe correspondant arrive en dessous du header 
-
-
-// (function($, window) {
-//   var adjustAnchor = function() {
-//       var $anchor = $('.block-views-blockhome-block-1'),
-//               fixedElementHeight = 350;
-//       if ($anchor.length > 0) {
-//           $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);
-//       }
-//   };
-
-//   $(window).on('hashchange', function() {
-//       adjustAnchor();
-//   });
-
-// })(jQuery, window);

web/themes/custom/reha/scss/pages/node-site.scss

@@ -44,13 +44,13 @@
                         img{
                             width: 100%;
                             object-fit: cover;
-                            height: fit-content;
+                            height: auto;
                         }
                         blockquote{
                             align-self: flex-end;
                             font-style: italic;
                             margin: 0;
-                            width: 10%;
+                            width: 20%;
     
                             p{
                                 margin: 0;

web/themes/custom/reha/scss/partials/_slick-theme.scss

@@ -16,7 +16,7 @@ $slick-dot-color-active: $slick-dot-color !default;
 $slick-prev-character: "\003C" !default;
 $slick-next-character: "\003E" !default;
 $slick-dot-character: "\2022" !default;
-$slick-dot-size: 6px !default;
+$slick-dot-size: 40px !default;
 $slick-opacity-default: 0.75 !default;
 $slick-opacity-on-hover: 1 !default;
 $slick-opacity-not-active: 0.25 !default;
@@ -146,7 +146,7 @@ $slick-opacity-not-active: 0.25 !default;
 
 .slick-dots {
     position: absolute;
-    bottom: -25px;
+    bottom: -60px;
     list-style: none;
     display: block;
     text-align: center;
@@ -156,8 +156,8 @@ $slick-opacity-not-active: 0.25 !default;
     li {
         position: relative;
         display: inline-block;
-        height: 20px;
-        width: 20px;
+        height: 50px;
+        width: 50px;
         margin: 0 5px;
         padding: 0;
         cursor: pointer;
@@ -165,8 +165,8 @@ $slick-opacity-not-active: 0.25 !default;
             border: 0;
             background: transparent;
             display: block;
-            height: 20px;
-            width: 20px;
+            height: 50px;
+            width: 50px;
             outline: none;
             line-height: 0px;
             font-size: 0px;
@@ -184,8 +184,8 @@ $slick-opacity-not-active: 0.25 !default;
                 top: 0;
                 left: 0;
                 content: $slick-dot-character;
-                width: 20px;
-                height: 20px;
+                width: 50px;
+                height: 50px;
                 font-family: $slick-font-family;
                 font-size: $slick-dot-size;
                 line-height: 20px;

web/themes/custom/reha/scss/partials/_slick_custom.scss

@@ -7,7 +7,7 @@ $slick-arrow-color: $yellow-puca !default;
 
 .home-page-layout-content{
     .slick-dots {
-        bottom: -40px !important;
+        // bottom: -40px !important;
     }
 }
 
@@ -18,3 +18,4 @@ $slick-arrow-color: $yellow-puca !default;
         background: rgba(255, 255, 255, 0.1);
     }
 }
+