add svg + responsive

web/themes/custom/popsu_colloque/css/components/layout.scss

@@ -22,3 +22,22 @@ img{
     }
   }
 }
+
+
+#block-views-block-slide-programme-block-1,
+#block-views-block-dernieres-publications-block-1{
+  .views{
+    section.wrap_head{
+      @include croix_or;
+    }
+  }
+}
+
+article{
+  .__title{
+    @include croix_or;
+  }
+}
+h4{
+  @include croix_or;
+}

web/themes/custom/popsu_colloque/css/components/sidebar/rs.scss

@@ -0,0 +1,16 @@
+.__rs{
+  & > div{
+    width: 20px;
+    height: 20px;
+    margin: 0 0.25rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .__rs{
+    margin: auto;
+    & > div{
+      margin: 0 auto 0.5rem auto;
+    }
+  }
+}

web/themes/custom/popsu_colloque/css/components/slides/slides.scss

@@ -2,7 +2,7 @@
 #block-views-block-dernieres-publications-block-1{
   .views{
     section{
-      &:first-child{
+      .head{
         display: flex;
         width: 100%;
         justify-content: space-between;

web/themes/custom/popsu_colloque/css/components/thumbnails.scss

@@ -15,16 +15,10 @@
    width: calc(100% / 4 );
    background: white;
    transform: scale(1);
-   box-shadow: none;
-   transition: 0.3s transform ease, 0.3s box-shadow ease;
+   @include shadow;
    a{
      display: block;
      height: 100%;
-   }
-   &:hover{
-     transform: scale(1.05);
-     transition: 0.3s all ease;
-     box-shadow: 0px 0px 13px 0px $color2;
    }
     & > .__wrap{
        padding: 1rem;
@@ -56,7 +50,6 @@
    }
  }
 
-
 .programme{
   .row{
     margin: 0;
@@ -69,8 +62,7 @@
     }
   }
 }
-
-@media screen and (min-width: 960px) {
+@media screen and (min-width: 992px) {
   .programme{
     .row{
       margin: $gutter1 calc(-#{$gutter1});
@@ -84,3 +76,48 @@
     }
   }
 }
+
+
+article{
+  .__publications{
+    & > div{
+      article{
+        width: 100%;
+        @include shadow;
+        figure{
+          padding: 1rem;
+          .__media{
+            margin-right: 1rem;
+          }
+          figcaption {
+            width: 80%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 992px) {
+  article{
+    .__publications{
+      & > div{
+        margin: 0 calc(-#{$gutter1});
+        article{
+          width: calc( 50% - #{$gutter1} * 2);
+          margin: 0 $gutter1;
+          @include shadow;
+          figure{
+            padding: 1rem;
+            .__media{
+              margin-right: 1rem;
+            }
+            figcaption {
+              width: 80%;
+            }
+          }
+        }
+      }
+    }
+  }
+}

web/themes/custom/popsu_colloque/css/index.scss

@@ -8,8 +8,8 @@
  */
 
 @import "variables/var.scss";
+@import "mixins/mixin.scss";
 @import "typography.scss";
-
 @import "components/admin/edit.scss";
 @import "components/admin/toolbar.scss";
 
@@ -34,6 +34,7 @@ h1,h2,h3,h4{
 @import "components/header.scss";
 @import "components/hero.scss";
 @import "components/layout.scss";
+@import "components/sidebar/rs.scss";
 @import "components/slides/flickity.scss";
 @import "components/slides/slides.scss";
 

web/themes/custom/popsu_colloque/css/mixins/mixin.scss

@@ -0,0 +1,23 @@
+@mixin croix_or {
+  &:after{
+    // width: 100%;
+    height: 2rem;
+    margin-top: 0.5rem;
+    content: " ";
+    display: block;
+    background: url($croix_or);
+    background-repeat: repeat-x;
+    background-size: auto auto;
+  }
+}
+
+
+@mixin shadow{
+  box-shadow: none;
+  transition: 0.3s transform ease, 0.3s box-shadow ease;
+  &:hover{    
+    transform: scale(1.05);
+    transition: 0.3s all ease;
+    box-shadow: 0px 0px 13px 0px $color2;
+  }
+}

web/themes/custom/popsu_colloque/css/typography.scss

@@ -13,3 +13,9 @@ main{
     }
   }
 }
+
+.more_link{
+  span{
+    padding-left: 0.5rem;
+  }
+}

web/themes/custom/popsu_colloque/css/variables/var.scss

@@ -2,5 +2,6 @@ $color1: red;
 $color2: #1d378eff;
 $col_black: black;
 
-
 $gutter1 : 1rem;
+
+$croix_or: '../images/croix_filetsable.svg';