page programme

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

@@ -6,17 +6,13 @@ header{
   background: white;
 }
 
-
-
-@media screen and (min-width: 768px) {
-  main:not(.home){
+main:not(.home){
+  margin-top: 0rem;
+  @media screen and (min-width: 768px) {
     margin-top: 5rem!important;
   }
 }
 
-main:not(.home){
-  margin-top: 0rem;
-}
 img{
   width:100%;
   height: 100%;
@@ -94,28 +90,25 @@ blockquote{
   }
 }
 
-
+// page programme
 .container{
   &.programme{
-    margin-top: 3rem;
+    padding-top: 3rem;
     h3{
-      margin: 0;
+      margin: 0.5rem 0;
     }
     .views{
       section{
-        & > div{
-          margin-bottom: 3rem;
+        margin: 1rem 0;
+        .row{
+          padding: 2rem 0;
         }
         &:not(:last-child){
           @include croix_or;
-          margin: 0 0 2rem 0;
           & > .d-flex{
             padding: 0 0 2rem 0;
           }
         }
-        &:last-child{
-          margin-bottom: 5rem ;
-        }
       }
     }
   }

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

@@ -1,278 +1,377 @@
- .thumbnails{
-   margin: 1rem 0rem;
-   // max-width: 300px;
-   min-width: 250px;
-   height: auto;
-   width: calc(100% / 4 );
-   background: white;
-   transform: scale(1);
-   @include shadow;
-   a{
-     display: block;
-     height: 100%;
-   }
-   .__content{
-     margin-top: 1rem;
-   }
-  .d-flex{
-     // padding: 1rem;
-   }
-   &.programme{
-     .__wrap{
-       padding: 1rem;
-     }
-   }
-   &.publications{
-     width: 100%;
-     .__media{
-       padding: 1rem;
-       figure{
-         height: 100%;
-         img{
-           width: 100%;
-           height: 100%;
-           object-fit: cover;
-         }
-       }
-     }
-     .__content{
-       margin: 1rem 1rem 1rem 0;
-     }
-   }
- }
-
- .thumbnails{
-   figure{
-     height: 120px;
-     margin: 0;
-     img{
-       width: 100%;
-       height: 100%;
-       object-fit: cover;
-     }
-   }
- }
-
-.programme{
-  .row{
+header{
+  display: none;
+}
+// thumbnails global
+.thumbnails{
+  width: 100%;
+  height: auto;
+  background: white;
+  margin: 0.5rem 0;
+  @include shadow;
+  figure{
+    height: 150px;
     margin: 0;
   }
-  .thumbnails{
-    width: 100%;
-    margin: 0;
-    figure{
-      height: 250px;
+  .__wrap{
+    padding: 1rem;
+    & > .d-flex{
+      margin-bottom: 0.5rem;
     }
   }
-}
-
-
-@media screen and (min-width: 768px) {
-  .thumbnails{
-    &.publications{
-      width: calc(100% / 2 - #{$gutter1} * 2);
+  // thumbnails publications
+  &.publications{
+    .__media{
+      padding: 1rem 0 1rem 1rem;
     }
-  }
-}
-@media screen and (min-width: 992px) {
-  .programme{
-    .row{
-      margin: $gutter1 calc(-#{$gutter1});
+    @media screen and (min-width: 768px) {
+      width: calc(100% / 2 - #{$gutter1} * 2);
     }
-    .thumbnails{
-      width: calc( 50% - #{$gutter1} * 2);
-      margin: 0 $gutter1;
-      figure{
-        height: 250px;
-      }
+    @media screen and (min-width: 992px) {
+      width: calc(100% / 3 - #{$gutter1} * 2);
     }
-  }
-  .thumbnails{
-    &.publications{
-      width: calc(100% / 4 - #{$gutter1} * 4);
+    @media screen and (min-width: 1200px) {
+      width: calc(100% / 4 - #{$gutter1} * 2);
     }
   }
 }
 
-.thumbnails_participants{
-  figure{
-    & > div{
-      width: 100px;
-      height: 100px;
-      margin-left: 0.5rem;
-
-      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;
-          }
-          .__qualite{
-
-          }
-      }
-    }
+// thumbnails slides
+.__slide{
+  .thumbnails{
+    max-width: 380px;
   }
 }
 
-article{
-  .__publications{
-    & > div{
-      article{
-        width: 100%;
-        @include shadow;
-        figure{
-          padding: 1rem;
-          .__media{
-            margin-right: 1rem;
-          }
-          figcaption {
-            width: 80%;
-          }
-        }
+// Page programme
+.container{
+  &.programme{
+    .thumbnails{
+      @media screen and (min-width: 768px) {
+        width: calc(100% / 2 - #{$gutter1} * 2);
+        margin: 0.5rem;
       }
-    }
-  }
-  .__bibliographie{
-    & > div{
-      article{
-        width: 100%;
-        a{
-          & > div {
-            p, span, div{
-              display: inline;
-              background: white;
-            }
-          }
-        }
+      @media screen and (min-width: 992px) {
+        width: calc(100% / 3 - #{$gutter1} * 2);
       }
+      // @media screen and (min-width: 1200px) {
+      //   width: calc(100% / 4 - #{$gutter1} * 2);
+      // }
     }
   }
 }
+// @media screen and (min-width: 992px) {
+//   .programme{
+//     .row{
+//       margin: $gutter1 calc(-#{$gutter1});
+//     }
+//     .thumbnails{
+//       width: calc( 50% - #{$gutter1} * 2);
+//       margin: 0 $gutter1;
+//     }
+//   }
+//   .thumbnails{
+//     &.publications{
+//       width: calc(100% / 4 - #{$gutter1} * 4);
+//     }
+//   }
+// }
 
-.container {
-  &.publications{
-    section{
-      article{
-        width: 100%;
-        @include shadow;
-        figure{
-          padding: 1rem;
-          .__media{
-            margin-right: 1rem;
-          }
-          figcaption {
-            width: 80%;
-          }
-        }
-      }
-    }
-  }
-  &.bilbiographie{
-    article{
-      width: 100%;
-      a{
-        & > div {
-          p, span, div{
-            display: inline;
-            background: white;
-          }
-        }
-      }
-    }
-  }
-}
+//  .thumbnails{
+//    margin: 1rem 0rem;
+//    // max-width: 300px;
+//    min-width: 250px;
+//    height: auto;
+//    width: calc(100% / 4 );
+//    background: white;
+//    transform: scale(1);
+//    @include shadow;
+//    a{
+//      display: block;
+//      height: 100%;
+//    }
+//    .__content{
+//      margin-top: 1rem;
+//    }
+//    &.programme{
+//      .__wrap{
+//        padding: 1rem;
+//      }
+//    }
+//    &.publications{
+//      width: 100%;
+//      .__media{
+//        padding: 1rem;
+//        figure{
+//          height: 100%;
+//          img{
+//            width: 100%;
+//            height: 100%;
+//            object-fit: cover;
+//          }
+//        }
+//      }
+//      .__content{
+//        margin: 1rem 1rem 1rem 0;
+//      }
+//    }
+//  }
+//
+//  .thumbnails{
+//    figure{
+//      height: 120px;
+//      margin: 0;
+//      img{
+//        width: 100%;
+//        height: 100%;
+//        object-fit: cover;
+//      }
+//    }
+//  }
+//
+// .programme{
+//   .row{
+//     margin: 0;
+//   }
+//   .thumbnails{
+//     width: 100%;
+//     margin: 0;
+//     figure{
+//       height: 150px;
+//     }
+//   }
+// }
+//
+//
 
-@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%;
-            }
-          }
-        }
-      }
-    }
-    .__bibliographie{
-      & > div{
-        margin: 0 calc(-#{$gutter1});
-        article{
-          width: calc( 100% / 3 - #{$gutter1} * 3);
-          margin: 0 $gutter1;
-          figure{
-            padding: 1rem;
-            .__media{
-              margin-right: 1rem;
-            }
-            figcaption {
-              width: 80%;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .container {
-    &.publications{
-      section{
-        article{
-          width: calc( 50% - #{$gutter1} * 2);
-          margin: 0 $gutter1;
-          @include shadow;
-          figure{
-            padding: 1rem;
-            .__media{
-              margin-right: 1rem;
-            }
-            figcaption {
-              width: 80%;
-            }
-          }
-        }
-      }
-      .views{
-        &.__publications{
-          article{
-            width: calc( 25% - #{$gutter1} * 4);
-          }
-        }
-      }
-    }
-    &.bibliographie{
-      article{
-        width: calc( 100% / 3 - #{$gutter1} * 3);
-        margin: 0 $gutter1;
-        figure{
-          padding: 1rem;
-          .__media{
-            margin-right: 1rem;
-          }
-          figcaption {
-            width: 80%;
-          }
-        }
-      }
-    }
-  }
-}
+//
+//
+// .container {
+//   &.programme{
+//     .views{
+//       section{
+//         .row{
+//           margin: 1rem 0;
+//         }
+//       }
+//     }
+//     .thumbnails{
+//       width: 100%;
+//       margin: 1rem 0;
+//     }
+//   }
+//   @media screen and (min-width: 768px) {
+//     &.programme{
+//       .row{
+//         .thumbnails{
+//           width: calc( 50% - #{$gutter1} * 2);
+//           // min-width: calc( 50% - #{$gutter1} * 2);
+//           margin: 0 $gutter1;
+//         }
+//       }
+//     }
+//   }
+//   @media screen and (min-width: 992px) {
+//     &.programme{
+//       .row{
+//         .thumbnails{
+//           width: calc( (100% / 3) - #{$gutter1} * 3);
+//           // min-width: calc( 50% - #{$gutter1} * 2);
+//           margin: 0 $gutter1;
+//         }
+//       }
+//     }
+//   }
+//   @media screen and (min-width: 1200px) {
+//     &.programme{
+//       .row{
+//         .thumbnails{
+//           width: calc( (100% / 4) - #{$gutter1} * 4);
+//           // min-width: calc( 50% - #{$gutter1} * 2);
+//           margin: 0 $gutter1;
+//         }
+//       }
+//     }
+//   }
+//
+// .thumbnails_participants{
+//   figure{
+//     & > div{
+//       width: 100px;
+//       height: 100px;
+//       margin-left: 0.5rem;
+//
+//       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;
+//           }
+//           .__qualite{
+//
+//           }
+//       }
+//     }
+//   }
+// }
+//
+// article{
+//   .__publications{
+//     & > div{
+//       article{
+//         width: 100%;
+//         @include shadow;
+//         figure{
+//           padding: 1rem;
+//           .__media{
+//             margin-right: 1rem;
+//           }
+//           figcaption {
+//             width: 80%;
+//           }
+//         }
+//       }
+//     }
+//   }
+//   .__bibliographie{
+//     & > div{
+//       article{
+//         width: 100%;
+//         a{
+//           & > div {
+//             p, span, div{
+//               display: inline;
+//               background: white;
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+//
+//
+//   &.publications{
+//     section{
+//       article{
+//         width: 100%;
+//         @include shadow;
+//         figure{
+//           padding: 1rem;
+//           .__media{
+//             margin-right: 1rem;
+//           }
+//           figcaption {
+//             width: 80%;
+//           }
+//         }
+//       }
+//     }
+//   }
+//   &.bilbiographie{
+//     article{
+//       width: 100%;
+//       a{
+//         & > div {
+//           p, span, div{
+//             display: inline;
+//             background: white;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+//
+// @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%;
+//             }
+//           }
+//         }
+//       }
+//     }
+//     .__bibliographie{
+//       & > div{
+//         margin: 0 calc(-#{$gutter1});
+//         article{
+//           width: calc( 100% / 3 - #{$gutter1} * 3);
+//           margin: 0 $gutter1;
+//           figure{
+//             padding: 1rem;
+//             .__media{
+//               margin-right: 1rem;
+//             }
+//             figcaption {
+//               width: 80%;
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+//
+//   .container {
+//     &.publications{
+//       section{
+//         article{
+//           width: calc( 50% - #{$gutter1} * 2);
+//           margin: 0 $gutter1;
+//           @include shadow;
+//           figure{
+//             padding: 1rem;
+//             .__media{
+//               margin-right: 1rem;
+//             }
+//             figcaption {
+//               width: 80%;
+//             }
+//           }
+//         }
+//       }
+//       .views{
+//         &.__publications{
+//           article{
+//             width: calc( 25% - #{$gutter1} * 4);
+//           }
+//         }
+//       }
+//     }
+//     &.bibliographie{
+//       article{
+//         width: calc( 100% / 3 - #{$gutter1} * 3);
+//         margin: 0 $gutter1;
+//         figure{
+//           padding: 1rem;
+//           .__media{
+//             margin-right: 1rem;
+//           }
+//           figcaption {
+//             width: 80%;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }

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

@@ -127,11 +127,7 @@ blockquote{
     font-size: 2.5rem;
     line-height: 3rem;
     font-weight: lighter;
-  }
-}
-@media screen and (min-width: 768px) {
-  blockquote{
-    p{
+    @media screen and (min-width: 768px) {
       font-size: 3rem;
       line-height: 3.5rem;
     }
@@ -174,12 +170,15 @@ a{
   }
 }
 
+// Page programme
 
-
-.programme{
-  h3{
-    font-size: 1.5rem;
-    font-family: 'truenoregular';
+.container{
+  &.programme{
+    h3{
+      font-size: 1.5rem;
+      font-family: 'truenoregular';
+      color: $col_black;
+    }
   }
 }
 

web/themes/custom/popsu_colloque/template/components/thumbnails.html.twig

@@ -2,7 +2,7 @@
   {{fields.field_image.content}}
 </figure>
 <div class="__wrap">
-  <div class="d-flex m-0">
+  <div class="d-flex">
     <time datetime="{{fields.field_heure_du_moment.content}}" class="__date mr-1">
       {{fields.field_heure_du_moment.content}}
     </time>

web/themes/custom/popsu_colloque/template/views/lists/views-view-unformatted--programme.html.twig

@@ -25,12 +25,12 @@
   {% endif %}
   <div class="row justify-content-end">
   {% if rows[0] %}
-    <div class="__wrap_side col-sm-12 col-md-1 p-0 mt-0 mb-3">
+    <div class="__wrap_side col-sm-12 col-md-1 my-3 my-sm-2">
     {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
     </div>
   {% endif %}
 
-  <div class="col-sm-12 col-md-11 d-flex ">
+  <div class="col-sm-12 col-md-11 d-flex flex-wrap ">
     {% for row in rows %}
       {%
         set row_classes = [