events-grid - set image to cover (calculate height)

assets/css/src/calendar-strip.css

@@ -1,11 +1,11 @@
 .calendar-strip {
+  --padding-vertical: calc(var(--space-m) / 2);
   position: relative;
   background-color: var(--color-yellow);
   box-sizing: border-box;
   width: 100%;
   display: flex;
   align-items: center;
-  padding: 2rem var(--margin-body);
   border-top: var(--border);
   border-bottom: var(--border);
 }
@@ -43,7 +43,7 @@
   top: 100%;
   width: 100%;
   max-height: 0;
-  padding: 0 var(--margin-body);
+  padding: 0 calc(var(--space-m));
   background-color: #fff;
   z-index: 0;
   transition: max-height 0.3s ease-in-out;

assets/css/src/events-grid.css

@@ -1,9 +1,9 @@
 .events-grid {
-  padding: var(--space-m);
+  --padding-vertical: calc(var(--space-m) / 2);
 }
 
 .events-grid h4 {
-  margin-bottom: 1rem;
+  margin-bottom: calc(var(--space-m) / 2);
 }
 
 .event-card picture {

assets/css/src/generic.css

@@ -3,16 +3,28 @@ body.progress * {
 }
 
 .grid {
+  --column-gap: calc(var(--space-m) * 1.5);
+  --row-gap: calc(var(--space-m) / 2);
   display: grid;
   grid-template-columns: repeat(12, 1fr);
-  column-gap: var(--space-m);
-  row-gap: calc(var(--space-m) / 2);
+  column-gap: var(--column-gap);
+  row-gap: var(--row-gap);
 }
 
 .grid__item {
   grid-column: span var(--span);
 }
 
+.grid__item picture {
+  --white-space: calc(var(--column-gap) + var(--space-m) * 2);
+  --width: calc((100vw - var(--white-space)) / 2);
+  height: calc(var(--width) / 1.4);
+}
+
+.grid__item picture img {
+  object-fit: cover;
+}
+
 @keyframes vibrate {
   0%,
   100% {

assets/css/src/hero.css

@@ -1,7 +1,8 @@
 .hero {
+  --padding-vertical: calc(var(--space-m) / 1.5);
   display: grid;
   grid-template-columns: 2fr 3fr;
-  padding: 2.5rem;
+  column-gap: calc(var(--space-m) / 2);
 }
 
 .hero__text h2 {

assets/css/src/vanilla.css

@@ -1,3 +1,6 @@
+section {
+  padding: var(--padding-vertical) var(--space-m);
+}
 picture {
   background-color: #ddd;
   display: flex !important;

assets/css/src/variables.css

@@ -9,9 +9,7 @@
   --font-size-h1: 2.8125rem;
 
   --curve-quick-slow: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-  --margin-body: 3.86rem;
-  --space-m: 2rem;
+  --space-m: 4vw;
 
   --color-pink: #ed268f;
   --color-pink-light: #ffa199;

site/snippets/calendar-strip.php

@@ -1,4 +1,4 @@
-<div 
+<section 
   class="calendar-strip"
   @mouseleave="open = false"
   x-data="{
@@ -77,5 +77,5 @@
       </template>
     </ul>
   </div>
-</div>
+</section>
 

site/snippets/event-card.php

@@ -1,15 +1,17 @@
 <div class="event-card grid__item" style="--span: <?= $span ?>">
-  <?php snippet('picture', ["file" => $event->gallery()->toFiles()->first()]) ?>
-  <div class="event-card__infos">
-    <div>
-      <h5><?= $event->title() ?></h5>
-      <?php if ($event->isMapadoEvent() == 'true'): ?>
-        <?php snippet('ticket', ['link' => 'https://cdn-besancon.mapado.com/event/' . $event->mapadoSlug()]) ?>
-      <?php endif ?>
+  <a href="<?= $event->url() ?>" title="Voir le détail">
+    <?php snippet('picture', ["file" => $event->gallery()->toFiles()->first()]) ?>
+    <div class="event-card__infos">
+      <div>
+        <h5><?= $event->title() ?></h5>
+        <?php if ($event->isMapadoEvent() == 'true'): ?>
+          <?php snippet('ticket', ['link' => 'https://cdn-besancon.mapado.com/event/' . $event->mapadoSlug()]) ?>
+        <?php endif ?>
+      </div>
+      <div>
+        <div class="event-card__authors"><?= $event->authors() ?></div>
+        <p><?= $event->schedule() ?></p>
+      </div>
     </div>
-    <div>
-      <div class="event-card__authors"><?= $event->authors() ?></div>
-      <p><?= $event->schedule() ?></p>
-    </div>
-  </div>
+  </a>
 </div>

site/snippets/newsletter-section.php

@@ -0,0 +1,3 @@
+<section>
+  
+</section>

site/templates/home.php

@@ -1,13 +1,16 @@
 <?php snippet('header') ?>
-<div class="hero">
+
+<section class="hero">
   <div class="hero__text">
     <?= $site->heroText()->toBlocks() ?>
   </div>
   <div class="hero__image">
     <?php snippet('picture', ['file' => $site->heroImage()->toFile()]) ?>
   </div>
-</div>
+</section>
+
 <?php snippet('calendar-strip') ?>
+
 <?php 
   $currentSeason = page('programme')->children()->first()->children();
   $orderedEvents = $currentSeason->sortBy(function ($event) {
@@ -22,4 +25,7 @@
 
   snippet('events-grid', ['events' => $orderedEvents->limit(2)]) 
 ?>
+
+<?php snippet('newsletter-section') ?>
+
 <?php snippet('footer') ?>