slider ressources v0

web/themes/custom/popsu/css/styles.css

@@ -1252,10 +1252,10 @@ iframe {
 
 /*pages*/
 #header-top {
-  height: 3rem;
+  height: 5rem;
   background: white;
-  margin-bottom: 2rem;
-  margin-top: 1rem; }
+  padding-bottom: 1rem;
+  padding-top: 1rem; }
 
 .header_top_left_container {
   height: 100%; }
@@ -1428,7 +1428,7 @@ footer {
   cursor: pointer;
   z-index: 100;
   background-color: white;
-  opacity: 0;
+  opacity: 0.2;
   transition: opacity 250ms;
   width: 10%; }
   .last-news .slick-arrow:hover, .last-ressources .slick-arrow:hover {
@@ -1612,13 +1612,16 @@ footer {
     #home_prog_container .programme-7:hover {
       background: #28429f; }
 
+#home_theme_container .slick-slide {
+  margin: 0 1rem; }
+
 #home_theme_container .slick-arrow {
   position: absolute;
   height: 100%;
   cursor: pointer;
   z-index: 100;
   background-color: white;
-  opacity: 0;
+  opacity: 0.2;
   transition: opacity 250ms;
   width: 10%; }
   #home_theme_container .slick-arrow:hover {
@@ -1658,7 +1661,9 @@ footer {
   left: 0;
   width: 100%;
   height: 100%;
-  position: absolute; }
+  position: absolute;
+  display: grid;
+  align-items: center; }
   #home_theme_container .views-field-field-image img {
     width: 100%;
     height: auto; }
@@ -1684,8 +1689,57 @@ footer {
 
 .path-centre-de-ressources {
   background-color: #eff2f9; }
+  .path-centre-de-ressources main {
+    flex: 0 0 100%;
+    max-width: 100%; }
   .path-centre-de-ressources header {
     margin-bottom: 0; }
+    .path-centre-de-ressources header .slick-slide {
+      margin: 0 1rem; }
+      .path-centre-de-ressources header .slick-slide .views-row {
+        display: grid !important;
+        grid-template-columns: 1fr;
+        position: relative;
+        height: auto; }
+        .path-centre-de-ressources header .slick-slide .views-row .views-field-field-image {
+          grid-column: 1;
+          grid-row: 1 / span 4;
+          z-index: -1;
+          padding-top: 1rem; }
+        .path-centre-de-ressources header .slick-slide .views-row .views-field:not(.views-field-field-image) {
+          background: blue;
+          width: 50%;
+          margin-left: 1rem;
+          padding-left: 1rem; }
+        .path-centre-de-ressources header .slick-slide .views-row .views-field-title {
+          padding-bottom: 1rem;
+          grid-column: 1;
+          grid-row: 3;
+          font-weight: 600; }
+        .path-centre-de-ressources header .slick-slide .views-row .views-field-view-node {
+          padding-top: 1rem;
+          grid-column: 1;
+          grid-row: 1; }
+        .path-centre-de-ressources header .slick-slide .views-row .views-field-field-programme {
+          text-transform: uppercase;
+          grid-column: 1;
+          grid-row: 2; }
+        .path-centre-de-ressources header .slick-slide .views-row a {
+          text-decoration: none; }
+    .path-centre-de-ressources header .slick-arrow {
+      position: absolute;
+      height: 100%;
+      cursor: pointer;
+      z-index: 100;
+      background-color: white;
+      opacity: 0.2;
+      transition: opacity 250ms;
+      width: 10%; }
+      .path-centre-de-ressources header .slick-arrow:hover {
+        opacity: .5; }
+    .path-centre-de-ressources header .slick-next {
+      right: 0;
+      top: 0; }
   .path-centre-de-ressources .content_container > div > h2:first-child {
     text-align: center;
     background-color: #98d0d9;
@@ -1693,7 +1747,8 @@ footer {
   .path-centre-de-ressources form {
     background-color: #98d0d9;
     display: grid;
-    padding: 0 0 5rem 0;
+    padding: 5rem 0 1rem 0;
+    margin-top: -3rem;
     column-gap: 1rem;
     grid-template-columns: calc(10% - 3em) repeat(4, 20%); }
     .path-centre-de-ressources form > div:first-child {
@@ -1868,7 +1923,7 @@ article p, .paragraph p {
   .path-actus .content_container .layout__region--content .views-element-container footer {
     text-align: center;
     margin: 1.8rem 0;
-    grid-column: 2; }
+    grid-column: 1 / span 2; }
     .path-actus .content_container .layout__region--content .views-element-container footer a {
       display: inline-block;
       margin: 0 auto;
@@ -1912,7 +1967,7 @@ article p, .paragraph p {
   cursor: pointer;
   z-index: 100;
   background-color: white;
-  opacity: 0;
+  opacity: 0.2;
   transition: opacity 250ms;
   width: 10%; }
   .path-actus .content_container .slick-arrow:hover {
@@ -1990,7 +2045,7 @@ article p, .paragraph p {
     cursor: pointer;
     z-index: 100;
     background-color: white;
-    opacity: 0;
+    opacity: 0.2;
     transition: opacity 250ms;
     width: 10%; }
     .page-node-type-programme .block-region-bottom .item-list .slick-arrow:hover {