add interviews post_type

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

@@ -1,21 +1,21 @@
 // thumbnails global
-section{
-  article.thumbnails.programme{
-    .__content{
-      span{
+section {
+  article.thumbnails.programme {
+    .__content {
+      span {
         color: $color2;
         font-size: 0.8rem;
-        font-family: 'truenoregular_italic';
-        text-transform: none!important;
-        strong{
-        font-family: 'truenobold_italic';
+        font-family: "truenoregular_italic";
+        text-transform: none !important;
+        strong {
+          font-family: "truenobold_italic";
         }
       }
     }
   }
-  & > div:not(.__slide){
-    article.thumbnails.programme{
-      a{
+  & > div:not(.__slide) {
+    article.thumbnails.programme {
+      a {
         display: block;
         width: 100%;
         height: 100%;
@@ -26,7 +26,7 @@ section{
   }
 }
 
-.thumbnails{
+.thumbnails {
   width: 100%;
   height: auto;
   background: white;
@@ -34,27 +34,28 @@ section{
   @media screen and (min-width: 768px) {
     margin: calc(#{$gutter});
   }
-  &:not(.bibliographie):not(.programme){
+  &:not(.bibliographie):not(.programme) {
     @include shadow;
   }
-  figure{
+  figure {
     height: 150px;
     margin: 0;
   }
-  .__wrap{
+  .__wrap {
     padding: 1rem;
-    time, .type_moment{
-      font-family: 'truenoregular';
+    time,
+    .type_moment {
+      font-family: "truenoregular";
       font-size: 0.8rem;
       text-transform: uppercase;
     }
-    & > .d-flex{
+    & > .d-flex {
       margin-bottom: 0.5rem;
     }
   }
 
   // thumbnails publications
-  &.publications{
+  &.publications {
     @media screen and (min-width: 768px) {
       width: calc(100% / 2 - #{$gutter} * 2);
     }
@@ -64,31 +65,31 @@ section{
     @media screen and (min-width: 1200px) {
       width: calc(100% / 4 - #{$gutter} * 2);
     }
-    .__media{
+    .__media {
       padding: 0.5rem 0 0.5rem 0.5rem;
-      .__img{
+      .__img {
         width: 100px;
       }
     }
-    .__wrap{
+    .__wrap {
       padding: 0.5rem;
     }
-    & > div{
+    & > div {
       height: 100%;
     }
-     div > *{
-      color:$color2;
+    div > * {
+      color: $color2;
     }
-    a{
+    a {
       display: block;
       height: 100%;
     }
   }
 
-  &.bibliographie{
-    background: white!important;
+  &.bibliographie {
+    background: white !important;
     padding: 0.5rem;
-    &.link_ext{
+    &.link_ext {
       @include shadow;
     }
     @media screen and (min-width: 768px) {
@@ -100,26 +101,57 @@ section{
     @media screen and (min-width: 1200px) {
       width: calc(100% / 4 - #{$gutter} * 2);
     }
-    & > div  * {
+    & > div * {
       color: $color2;
-      &.__auteur *{
+      &.__auteur * {
         font-size: 1.4rem;
       }
-      &.__body{
-        margin:1rem 0;
+      &.__body {
+        margin: 1rem 0;
       }
     }
-    a{
+    a {
       text-decoration: underline;
       color: $color1;
     }
   }
+  &.interviews {
+    @media screen and (min-width: 768px) {
+      width: calc(100% / 2 - #{$gutter} * 2);
+    }
+    @media screen and (min-width: 992px) {
+      width: calc(100% / 3 - #{$gutter} * 2);
+    }
+    @media screen and (min-width: 1200px) {
+      width: calc(100% / 4 - #{$gutter} * 2);
+    }
+    .__media {
+      padding: 0.5rem 0 0.5rem 0.5rem;
+      max-width: 50%;
+      .__img {
+        width: 100px;
+      }
+    }
+    .__wrap {
+      padding: 0.5rem;
+    }
+    & > div {
+      height: 100%;
+    }
+    div > * {
+      color: $color2;
+    }
+    a {
+      display: block;
+      height: 100%;
+    }
+  }
 }
 
 // Page programme
-.container{
-  &.programme{
-    .thumbnails{
+.container {
+  &.programme {
+    .thumbnails {
       @media screen and (min-width: 768px) {
         width: calc(100% / 2 - #{$gutter} * 2);
         margin: 0.5rem;
@@ -127,15 +159,15 @@ section{
       @media screen and (min-width: 992px) {
         width: calc(100% / 3 - #{$gutter} * 2);
       }
-      .inter{
+      .inter {
         margin-top: 0.5rem;
-        span{
+        span {
           color: $color2;
           font-size: 0.8rem;
-          font-family: 'truenoregular_italic';
-          text-transform: none!important;
-          strong{
-          font-family: 'truenobold_italic';
+          font-family: "truenoregular_italic";
+          text-transform: none !important;
+          strong {
+            font-family: "truenobold_italic";
           }
         }
       }
@@ -143,14 +175,14 @@ section{
   }
 }
 // page moment
-.__ressources{
-  .__publications{
-    .publications{
+.__ressources {
+  .__publications {
+    .publications {
       // margin: $gutter;
-      .__media{
+      .__media {
         padding: 0.5rem 0 0.5rem 0.5rem;
       }
-      .__wrap{
+      .__wrap {
         padding: 0.5rem;
       }
       @media screen and (min-width: 768px) {
@@ -164,12 +196,14 @@ section{
       }
     }
   }
-  .__bibliographie{
-    .thumbnails{
+  .__bibliographie {
+    .thumbnails {
       background: transparent;
-      a{
-        & > div{
-          div, span, p{
+      a {
+        & > div {
+          div,
+          span,
+          p {
             display: inline;
             background: white;
           }
@@ -184,32 +218,51 @@ section{
       @media screen and (min-width: 1200px) {
         width: calc(100% / 2 - #{$gutter} * 2);
       }
-
+    }
+  }
+  .__interviews {
+    .interviews {
+      // margin: $gutter;
+      .__media {
+        padding: 0.5rem 0 0.5rem 0.5rem;
+      }
+      .__wrap {
+        padding: 0.5rem;
+      }
+      @media screen and (min-width: 768px) {
+        width: calc(100% / 2 - #{$gutter} * 2);
+      }
+      @media screen and (min-width: 992px) {
+        width: calc(100% / 2 - #{$gutter} * 2);
+      }
+      @media screen and (min-width: 1200px) {
+        width: calc(100% / 2 - #{$gutter} * 2);
+      }
     }
   }
 }
 // thumbnails participant
-.thumbnails_participants{
-  figure{
-    & > div{
+.thumbnails_participants {
+  figure {
+    & > div {
       width: 100px;
       height: 100px;
       margin-left: 0.5rem;
-      img{
+      img {
         border-radius: 50%;
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
     }
-    figcaption{
-      &.__info{
-          padding: 4rem 0.5rem 0.5rem 0.5rem;
-          margin-top: -3rem;
-          background: white;
-          .__name{
-            text-transform: uppercase;
-          }
+    figcaption {
+      &.__info {
+        padding: 4rem 0.5rem 0.5rem 0.5rem;
+        margin-top: -3rem;
+        background: white;
+        .__name {
+          text-transform: uppercase;
+        }
       }
     }
   }