better date display

web/themes/custom/leshed/assets/js/titles.js

@@ -10,12 +10,12 @@ const TITLE_SELECTORS = '\
   article.node-type-projet>.cols>.left>h2,\
   article.node-type-projet.view-mode-full h2.node-title,\
   article.node-type-evenement>header>h2,\
-  article.node-type-evenement>header>.field_dates>time,\
   article.node-type-evenement.view-mode-full h2.node-title,\
-  article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part,\
   article.node-type-evenement.view-mode-calendrier h2.node-title,\
   div.views-archives-evenements > h3 > time\
   ';
+  // article.node-type-evenement>header>.field_dates>time,\
+  // article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part,\
 
 // Police Epilogue = axe variable `wght` (100–900) uniquement ; l'italique est
 // un fichier séparé (font-style).

web/themes/custom/leshed/assets/scss/main.scss

@@ -578,37 +578,53 @@ article.node-type-projet.view-mode-full{
 //  |  _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __|
 //  | |___ \ V /  __/ | | |  __/ | | | | |  __/ | | | |_
 //  |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|
+
+@mixin event-date-time($ref: 10em){
+  display: flex;
+  position: relative;
+  time{
+    position: relative;
+    display: grid;
+    grid-template-columns: $ref ($ref * 7 / 18);
+    grid-template-rows: $ref / 2.3 $ref / 2.3;
+    grid-template-areas:
+      "day month"
+      "day year";
+
+    span.date-day{
+      grid-area: day;
+      font-size: $ref;
+      font-weight: 100;
+      font-style: italic;
+    }
+    span.date-month{
+      grid-area: month;
+      align-self: end;
+      font-weight: 400;
+    }
+    span.date-year{
+      grid-area: year;
+      align-self: end;
+      font-weight: 700;
+    }
+    span.date-month,
+    span.date-year{
+      font-size: $ref / 2.45;
+    }
+  }
+  span.date-sep{
+    font-size: $ref / 2;
+    padding:0 0.2em;
+  }
+}
+
+
 article.node-type-evenement.view-mode-full{
   @include nodefull();
 
   .field_dates.digit-dates{
     transform-origin: 0 0;
-    time{
+    @include event-date-time();
-      display: grid;
-      grid-template-columns: 18em 7em;
-      grid-template-rows: auto auto;
-      grid-template-areas:
-        "day month"
-        "day year";
-      // align-items: baseline;
-
-      span.date-day{
-        grid-area: day;
-
-        font-size: 18em;
-      }
-      span.date-month{
-        grid-area: month;
-        align-self: end;
-      }
-      span.date-year{
-        grid-area: year;
-      }
-      span.date-month,
-      span.date-year{
-        font-size: 6em;
-      }
-    }
   }
 
   div.field_projet_s_lie_s{
@@ -690,11 +706,22 @@ div.views-archives-evenements {
     header{
       flex:0 1 auto;
       // width: 5em;
-      padding:1em;
+      padding:0 1em 0 0;
 
       .field_dates{
-        time{
+        @include event-date-time(5em);
-          font-size: 5em;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.6em;
+        span.date-sep{
+          display: block;
+          width: 1em;
+          height: 0;
+          overflow: visible;
+          transform-origin: center;
+          transform: rotate(90deg) translateX(0.1em);
+          line-height: 0;
+          padding: 0;
         }
       }
     }

web/themes/custom/leshed/templates/field--node--field-dates--evenement.html.twig

@@ -39,7 +39,7 @@
         {{ dates.date_parts(item.start_date) }}
       {% endif %}
       {% if item.end_date and (item.end_date.year != item.start_date.year or item.end_date.day != item.start_date.day) %}
-        <span class="date-sep">–</span>
+        <span class="date-sep">→</span>
         {{ dates.date_parts(item.end_date) }}
       {% endif %}
     </div>
@@ -53,7 +53,7 @@
           {{ dates.date_parts(item.start_date) }}
         {% endif %}
         {% if item.end_date and (item.end_date.year != item.start_date.year or item.end_date.day != item.start_date.day) %}
-          <span class="date-sep">–</span>
+          <span class="date-sep">→</span>
           {{ dates.date_parts(item.end_date) }}
         {% endif %}
       </div>