start responsive boot

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

@@ -1,5 +1,5 @@
 .__img-hero{
-  // height: 400px;
+  height: 400px;
   // width: 100vw;
   // position: relative;
   // left: 50%;

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

@@ -7,38 +7,41 @@
  * @see https://www.drupal.org/project/drupal/issues/2349711
  */
 
- .__slide{
-   .thumbnails{
-     margin: 1rem 0.5rem;
-     max-width: 300px;
-     height: auto;
-     width: calc(100% / 5 );
-     background: white;
-     transform: scale(1);
-     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;
-     }
-      & > .__wrap{
-         padding: 1rem;
-     }
-     .__media{
-       margin-right: 1rem;
-       figcaption{
+ .thumbnails{
+   margin: 1rem 0rem;
+   // max-width: 300px;
+   min-width: 250px;
+   height: auto;
+   width: calc(100% / 4 );
+   background: white;
+   transform: scale(1);
+   box-shadow: none;
+   transition: 0.3s transform ease, 0.3s box-shadow ease;
+   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;
+   }
+   .__media{
+     margin-right: 1rem;
+     figcaption{
+       height: 100%;
+       img{
+         width: 100%;
          height: 100%;
-         img{
-           width: 100%;
-           height: 100%;
-           object-fit: cover;
-         }
+         object-fit: cover;
        }
      }
-     .d-flex{
-       padding: 1rem;
-     }
+   }
+   .d-flex{
+     padding: 1rem;
    }
  }
 

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

@@ -12,6 +12,11 @@
 
 @import "components/admin/edit.scss";
 @import "components/admin/toolbar.scss";
+
+*{
+ box-sizing: border-box;
+}
+
 body,html{
   font-size: 16px;
   line-height: 1.2;

web/themes/custom/popsu_colloque/js/script.js

@@ -56,6 +56,7 @@ function slide() {
   $slide.each(function() {
     $(this).flickity({
       cellAlign: 'left',
+      pageDots: false
     })
   });
 }

web/themes/custom/popsu_colloque/template/fields/field--field-image-hero.html.twig

@@ -38,13 +38,6 @@
  * @ingroup themeable
  */
 #}
-{%
-  set title_classes = [
-    label_display == 'visually_hidden' ? 'visually-hidden',
-  ]
-%}
-
-
-    {% for item in items %}
-      {{ item.content }}
-    {% endfor %}
+{% for item in items %}
+  {{ item.content }}
+{% endfor %}

web/themes/custom/popsu_colloque/template/fields/field--field-image.html.twig

@@ -0,0 +1,43 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ *
+ * @ingroup themeable
+ */
+#}
+{% for item in items %}
+  {{ item.content }}
+{% endfor %}

web/themes/custom/popsu_colloque/template/node/node--moments.html.twig

@@ -74,20 +74,21 @@
 #}
 <article{{ attributes }}>
 
-  <div class="__hero">
+  <div class="__img-hero">
     {{content.field_image}}
   </div>
 
-  <div class="__wrapper d-flex">
-    <div class="__wrap_side">
+  <div class="__wrapper row">
+    <div class="__title col-12">
+      <h2>{{label}}</h2>
+    </div>
+
+    <div class="__wrap_side col-sm-12 col-md-2">
       {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
     </div>
 
-    <div class="__wrap_content">
+    <div class="__wrap_content col-sm-12 col-md-8">
       <div class="__head">
-        <div class="__title">
-          <h2>{{label}}</h2>
-        </div>
         <div class="d-flex">
           {{ content.field_date_du_programme }}
           {{ content.field_heure_du_moment }}

web/themes/custom/popsu_colloque/template/node/node--page-d-accueil.html.twig

@@ -79,7 +79,7 @@
 
 
 <article{{ attributes }} id="txt_present">
-  <div class="col-8">
+  <div class="col-12 px-0 col-sm-10 col-md-8">
 
     <div class="__title-present">
       {{ content.field_titre_txt_present }}

web/themes/custom/popsu_colloque/template/node/node--presentation.html.twig

@@ -72,15 +72,18 @@
  * @ingroup themeable
  */
 #}
+<div class="__img-hero">
+{{content.field_image}}
+</div>
 <article{{ attributes }} id="presentation">
-  <div class="__hero">
-    {{content.field_image}}
-  </div>
-  <div class="__wrapper d-flex">
-    <div class="__wrap_side">
+  <div class="__wrapper row">
+    <div class="__title col-12">
+      <h2>{{label}}</h2>
+    </div>
+    <div class="__wrap_side col-sm-12 col-md-2">
       {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
     </div>
-    <div class="__wrap_content">
+    <div class="__wrap_content col-sm-12 col-md-8">
       {{content.body}}
       {{content.field_les_notes}}
     </div>

web/themes/custom/popsu_colloque/template/page--node.html.twig

@@ -62,7 +62,7 @@
   <main role="main" class="d-flex container">
     <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
-    <div class="layout-content col-12">
+    <div class="layout-content">
       {{ page.content }}
     </div>{# /.layout-content #}
 

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

@@ -20,14 +20,14 @@
 {% if title %}
   <h3>{{ title }}</h3>
 {% endif %}
-<div class="__slide">
+<div class="row flex-wrap">
   {% for row in rows %}
     {%
       set row_classes = [
         default_row_class ? 'views-row',
       ]
     %}
-    <article class="thumbnails">
+    <article class="thumbnails col-lg-3 col-sm-6 col-12 m-2">
       {{- row.content -}}
     </article>
   {% endfor %}