detail css

web/sites/development.services.yml

@@ -5,7 +5,7 @@
 parameters:
   http.response.debug_cacheability_headers: true
   twig.config:
-    debug: false
+    debug: true
     auto_reload: true
 services:
   cache.backend.null:

web/themes/custom/popsu_colloque/css/components/header/sub_menu.scss

@@ -1,8 +1,8 @@
 #block-popsu-colloque-submenu{
-  margin: 3rem auto;
   ul{
     display: flex;
     padding: 0;
+    margin: 0;
     li{
       margin-right: 1rem;
       a{

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

@@ -7,9 +7,9 @@ header{
 }
 
 main:not(.home){
-  margin-top: 0rem;
+  padding-top: 0rem;
   @media screen and (min-width: 768px) {
-    margin-top: 5rem!important;
+    padding-top: 5rem!important;
   }
 }
 
@@ -59,12 +59,8 @@ article{
   .__head{
     div{
       & > div{
-        margin-right: 0.5rem;
+        // padding: 0 0.5rem;
       }
-      & > div:not(:first-child){
-        margin-left: 0.5rem;
-      }
-
     }
   }
 }
@@ -113,3 +109,14 @@ blockquote{
     }
   }
 }
+
+// page moment
+.container{
+  .__ressources{
+    section{
+      .row{
+        padding: 0rem 0rem 2rem 0rem;
+      }
+    }
+  }
+}

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

@@ -8,9 +8,22 @@
 
 @media screen and (min-width: 768px) {
   .__rs{
+    &:not(.moment){
+      margin: auto;
+      & > div{
+        margin: 0 auto 0.5rem auto;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .__rs{
+  &.moment{
     margin: auto;
     & > div{
       margin: 0 auto 0.5rem auto;
     }
   }
 }
+}

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

@@ -32,9 +32,6 @@
       .head{
         display: block;
       }
-      .thumbnails{
-        margin: 1rem;
-      }
       .flickity-slider{
         margin-left: 1rem;
       }

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

@@ -1,13 +1,16 @@
 header{
   display: none;
 }
+
 // thumbnails global
 .thumbnails{
   width: 100%;
   height: auto;
   background: white;
-  margin: 0.5rem 0;
-  @include shadow;
+  margin: $gutter1;
+  &:not(.bibliographie){
+    @include shadow;
+  }
   figure{
     height: 150px;
     margin: 0;
@@ -21,7 +24,18 @@ header{
   // thumbnails publications
   &.publications{
     .__media{
-      padding: 1rem 0 1rem 1rem;
+      padding: 0.5rem 0 0.5rem 0.5rem;
+      // .__img{
+      //   height: 150px;
+      //   width: 100%;
+      //   img{
+      //     width: auto;
+      //     height: 100%;
+      //   }
+      // }
+    }
+    .__wrap{
+      padding: 0.5rem;
     }
     @media screen and (min-width: 768px) {
       width: calc(100% / 2 - #{$gutter1} * 2);
@@ -39,6 +53,15 @@ header{
 .__slide{
   .thumbnails{
     max-width: 380px;
+    @media screen and (min-width: 768px) {
+      width: calc(100% / 2 - #{$gutter1} * 2);
+    }
+    @media screen and (min-width: 992px) {
+      width: calc(100% / 3 - #{$gutter1} * 2);
+    }
+    @media screen and (min-width: 1200px) {
+      width: calc(100% / 4 - #{$gutter1} * 2);
+    }
   }
 }
 
@@ -59,6 +82,69 @@ header{
     }
   }
 }
+// page moment
+.__ressources{
+  .__publications{
+    .publications{
+      .__media{
+        padding: 0.5rem 0 0.5rem 0.5rem;
+      }
+      .__wrap{
+        padding: 0.5rem;
+      }
+      @media screen and (min-width: 768px) {
+        width: calc(100% / 2 - #{$gutter1});
+      }
+      @media screen and (min-width: 992px) {
+        width: calc(100% / 2 - #{$gutter1});
+      }
+      @media screen and (min-width: 1200px) {
+        width: calc(100% / 2 - #{$gutter1});
+      }
+    }
+  }
+  .__bibliographie{
+    .thumbnails{
+      background: transparent;
+      a{
+        & > div{
+          div, span, p{
+            display: inline;
+            background: white;
+          }
+        }
+      }
+    }
+  }
+}
+// thumbnails participant
+.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;
+          }
+      }
+    }
+  }
+}
+
+
 // @media screen and (min-width: 992px) {
 //   .programme{
 //     .row{
@@ -193,36 +279,7 @@ header{
 //     }
 //   }
 //
-// .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{

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

@@ -33,3 +33,20 @@
     box-shadow: 0px 0px 13px 0px $color2;
   }
 }
+
+@mixin shadow_participants{
+  figure img{
+    box-shadow: none;
+    transition: 0.3s transform ease, 0.3s box-shadow ease;
+  }
+  figure{
+    &:hover{
+      & > div img{
+        transform: scale(1.05);
+        transition: 0.3s all ease;
+        box-shadow: 0px 0px 13px 0px $color2;
+      }
+
+    }
+  }
+}

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

@@ -155,23 +155,9 @@ a{
   }
 }
 
-.thumbnails_participants{
-  *{
-    color: $color2;
-  }
-  .__name{
-    font-family: 'truenoregular';
-    font-size: 1rem;
-  }
-  .__qualite{
-    font-family: 'truenoregular';
-    font-size: 1rem;
-    font-style: italic;
-  }
-}
 
-// Page programme
 
+// Page programme
 .container{
   &.programme{
     h3{
@@ -182,6 +168,37 @@ a{
   }
 }
 
+// page publication
+article{
+  &.publications{
+    .__wrap_content{
+      .__head{
+        & *{
+          color: $color2;
+        }
+        .__auteur{
+          div{
+            font-family: 'cormorantBold';
+            font-size: 1.5rem;
+          }
+        }
+        .__titre{
+          span{
+            font-family: 'cormorantBoldItalic';
+            font-size: 1.5rem;
+          }
+        }
+        .__info{
+          margin: 1rem 0;
+          div{
+            font-family: 'cormorantBold';
+            font-size: 1rem;
+          }
+        }
+      }
+    }
+  }
+}
 .thumbnails{
   time, .type_moment{
     font-family: 'truenoregular';
@@ -208,6 +225,59 @@ a{
       }
     }
   }
+  &.bibliographie{
+    background: transparent;
+    div,p{
+      font-family: 'cormorantBold';
+      font-size: 1.2rem;
+    }
+    span{
+      font-family: 'cormorantBoldItalic';
+      font-size: 1.2rem;
+    }
+  }
+}
+
+// page shadow_participants
+article{
+  &.participant_full{
+    .__auteur{
+      h2{
+        font-family: 'truenoregular';
+        font-size: 2rem;
+        letter-spacing: normal;
+      }
+    }
+    .status{
+      div{
+        font-family: 'truenoregular';
+        font-style: italic;
+        font-size: 0.8rem;
+        text-align: center;
+        @media screen and (min-width: 768px) {
+          text-align: left;
+        }
+      }
+    }
+  }
+}
+
+
+// thumbnails_participants
+.thumbnails_participants{
+  @include shadow_participants;
+  *{
+    color: $color2;
+  }
+  .__name{
+    font-family: 'truenoregular';
+    font-size: 1rem;
+  }
+  .__qualite{
+    font-family: 'truenoregular';
+    font-size: 0.8rem;
+    font-style: italic;
+  }
 }
 
 .paragraph--type--role-de-l-intervenant{
@@ -226,7 +296,7 @@ a{
      div{
        font-family: 'truenoregular';
        font-size: 1rem;
-       text-transform: uppercase;
+       // text-transform: uppercase;
      }
     }
   }

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

@@ -5,7 +5,7 @@ $lightgrey: #6f6d7dff;
 $fond: #1d378e0d;
 $underline:#d2d2ebff;
 
-$gutter1 : 1rem;
+$gutter1 : 0.5rem;
 
 $croix_or: '../images/croix_filetsable.svg';
 

web/themes/custom/popsu_colloque/template/block/block--mainpagecontent--publications.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{% set id = [elements][0].content['#view_id'] %}
+
+<div class="container {{id}}">
+{% if id == 'programme' %}
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}>{{ label }}</h2>
+  {% endif %}
+{% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>

web/themes/custom/popsu_colloque/template/block/block--mainpagecontent.html.twig

@@ -29,7 +29,6 @@
 #}
 
 {% set id = [elements][0].content['#view_id'] %}
-
 <div class="container {{id}}">
 {% if id == 'programme' %}
   {{ title_prefix }}
@@ -41,4 +40,3 @@
   {% block content %}
     {{ content }}
   {% endblock %}
-</div>

web/themes/custom/popsu_colloque/template/block/block--views-block--participants-ressources-block-1.html.twig

@@ -0,0 +1,38 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="col-sm-12 col-md-3">
+
+    {% block content %}
+      {{ content }}
+    {% endblock %}
+    </div>
+
+</article>
+</div>

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

@@ -1,4 +1,10 @@
-<div class="__rs d-flex d-md-block">
+{% if page == 'moments' %}
+    {% set class = "d-flex d-lg-block moment" %}
+  {% else %}
+    {% set class = "d-flex d-md-block" %}
+{% endif %}
+
+<div class="__rs {{class}}">
   <div class="__mail">
     <a href="#">
       <img src="/themes/custom/popsu_colloque/images/mail.svg" alt="Mail">

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

@@ -45,7 +45,7 @@
 %}
 
 <h4>{{ label }}</h4>
-<div class="d-lg-flex d-block">
+<div class="d-lg-flex d-block pb-4">
   {% for item in items %}
     {{ item.content }}
   {% endfor %}

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

@@ -45,7 +45,7 @@
 %}
 
 <h4>{{ label }}</h4>
-<div class="d-lg-flex d-block">
+<div class="row flex-wrap">
   {% for item in items %}
     {{ item.content }}
   {% endfor %}

web/themes/custom/popsu_colloque/template/forms/select.html.twig

@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a select element.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the <select> tag.
+ * - options: The <option> element children.
+ *
+ * @see template_preprocess_select()
+ *
+ * @ingroup themeable
+ */
+#}
+{% spaceless %}
+  <select{{ attributes }}>
+    {% for option in options %}
+      {% if option.type == 'optgroup' %}
+        <optgroup label="{{ option.label }}">
+          {% for sub_option in option.options %}
+            <option value="{{ sub_option.value }}"{{ sub_option.selected ? ' selected="selected"' }}>{{ sub_option.label }}</option>
+          {% endfor %}
+        </optgroup>
+      {% elseif option.type == 'option' %}
+        <option value="{{ option.value }}"{{ option.selected ? ' selected="selected"' }}>{{ option.label }}</option>
+      {% endif %}
+    {% endfor %}
+  </select>
+{% endspaceless %}

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

@@ -71,25 +71,29 @@
  *
  * @ingroup themeable
  */
+
 #}
-<article{{ attributes }} class="d-flex flex-wrap">
+
+
+
+<article{{ attributes }} class="row">
   <div class="__wrapper col-sm-12 col-md-9">
     <div class="__img-hero">
       {{content.field_image}}
     </div>
 
-    <div class="__wrapper row mt-4">
-      <div class="__title col-12 mb-5">
+    <div class="__wrapper row">
+      <div class="__title col-12 my-3 my-lg-5">
         <h2>{{label}}</h2>
       </div>
 
-      <div class="__wrap_side col-sm-12 col-md-1 px-0 mt-3">
-        {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
+      <div class="__wrap_side col-md-12 col-lg-2 mt-3">
+        {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'moments' } %}
       </div>
 
-      <div class="__wrap_content col-sm-12 col-md-11 px-0 my-3">
+      <div class="__wrap_content col-12 col-lg-10 my-3">
         <div class="__head mb-5">
-          <div class="d-flex">
+          <div class="d-flex flex-wrap">
             {{ content.field_date_du_programme }} |
             {{ content.field_heure_du_moment }} |
             {{ content.field_type_de_moment }}
@@ -102,13 +106,14 @@
       </div>
     </div>
 
+
     <div class="__ressources">
-      <div class="__publications">
+      <section class="__publications">
         {{content.field_publications}}
-      </div>
-      <div class="__bibliographie">
+      </section>
+      <section class="__bibliographie">
         {{content.field_bibliographie}}
-      </div>
+      </section>
     </div>
   </div>
   <div class="__wrap_side col-sm-12 col-md-3">

web/themes/custom/popsu_colloque/template/node/node--participants--full.html.twig

@@ -89,7 +89,7 @@
     </figure>
   </div>
 
-  <div class="__wrap_content col-sm-12 col-md-9 mx-auto">
+  <div class="__wrap_content col-md-12 col-lg-9 mx-auto">
     <div class="content">
       {{content.body}}
     </div>

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

@@ -81,7 +81,7 @@
   </div>
   <div class="__wrapper row mt-5">
     <div class="__wrap_side col-sm-12 col-md-1 pr-0 mt-0 mb-3">
-      {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
+      {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'presentation' }  %}
     </div>
     <div class="__wrap_content col-sm-12 col-md-8">
       {{content.body}}

web/themes/custom/popsu_colloque/template/node/node--publications--full.html.twig

@@ -72,13 +72,13 @@
  * @ingroup themeable
  */
 #}
-<article class="d-flex">
-  <div class="__wrap_side col-sm-12 col-md-1 px-0 mt-3">
+<article class="d-sm-flex flex-wrap d-block publications">
+  <div class="__wrap_side col-sm-12 col-md-12 col-lg-1">
     {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
     {{content.field_telecharger_la_ressource}}
   </div>
 
-  <div class="__wrapper col-sm-12 col-md-11 px-0 my-3">
+  <div class="__wrapper col-sm-12 col-md-9 col-lg-8">
     {% if content.field_ajouter_un_media[0]['#paragraph'].field_video %}
       <div class="__hero">
         {{content.field_ajouter_un_media}}
@@ -95,10 +95,10 @@
           <div class="__auteur">
             {{content.field_auteur}}
           </div>
-          <div>
+          <div class="__titre">
             {{label}}
           </div>
-          <div class="my-3">
+          <div class="__info">
             {{content.field_complement_d_info}}
           </div>
         </div>
@@ -108,5 +108,3 @@
       </div>
     </div>
   </div>
-
-</article>

web/themes/custom/popsu_colloque/template/node/node--thumbnails-bilbiographie.html.twig

@@ -72,7 +72,7 @@
  * @ingroup themeable
  */
 #}
-<article{{ attributes }}>
+<article{{ attributes }} class="thumbnails bibliographie">
 <div>
   <a href="{{url}}">
   <div>

web/themes/custom/popsu_colloque/template/node/node--thumbnails-publications.html.twig

@@ -72,18 +72,20 @@
  * @ingroup themeable
  */
 #}
-<article{{ attributes }}>
+<article{{ attributes }} class=" thumbnails publications">
   <div{{ content_attributes }}>
     <a href="{{ url }}">
-      <figure class="d-flex">
+      <div class="d-flex">
         <div class="__media">
           {{content.field_ajouter_un_media}}
         </div>
-        <figcaption class="__info">
-          {{ label|raw }}
-          {{content.field_complement_d_info|raw}}
-        </figcaption>
-      </figure>
+        <div class="__wrap">
+          <div class="__content">
+            {{ label|raw }}
+            {{content.field_complement_d_info|raw}}
+          </div>
+        </div>
+      </div>
     </a>
   </div>
 </article>

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

@@ -0,0 +1,70 @@
+{#
+/**
+ * @file
+ * Default theme implementation for main view template.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A CSS-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   Javascript.
+ *
+ * @see template_preprocess_views_view()
+ *
+ * @ingroup themeable
+ */
+#}
+
+
+<div class="views col">
+
+  {{ title_prefix }}
+  {{ title }}
+  {{ title_suffix }}
+
+  {% if header %}
+    <section class="wrap_head">
+      {% include 'themes/custom/popsu_colloque/template/components/header_slide.html.twig' with { croix : true } %}
+    </section>
+  {% endif %}
+
+  {{ exposed }}
+  {{ attachment_before }}
+
+  {% if rows -%}
+    <section>
+      {{ rows }}
+    </section>
+  {% elseif empty -%}
+    {{ empty }}
+  {% endif %}
+  {{ pager }}
+
+  {{ attachment_after }}
+
+  {% if footer %}
+    <footer>
+      {{ footer }}
+    </footer>
+  {% endif %}
+
+  {{ feed_icons }}
+</div>

web/themes/custom/popsu_colloque/template/views/views-view--slide_programme.html.twig

@@ -34,7 +34,7 @@
 #}
 
 
-<div class="views">
+<div class="views col">
 
   {{ title_prefix }}
   {{ title }}