mobile responsive : home and start event

assets/css/src/calendar-strip.css

@@ -65,3 +65,10 @@
 .calendar-strip__date.open {
   max-height: 20rem;
 }
+
+@media screen and (max-width: 800px) {
+  .calendar-strip {
+    margin-top: 2rem;
+    border-top: var(--border);
+  }
+}

assets/css/src/callout.css

@@ -4,6 +4,7 @@ section.callout {
   display: flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
 }
 
 section.callout h4 {
@@ -14,3 +15,19 @@ section.callout a {
   display: flex;
   align-items: center;
 }
+
+@media screen and (max-width: 800px) {
+  section.callout {
+    padding: 2.25rem 2rem;
+  }
+  section.callout h4 {
+    font-size: var(--font-size-m);
+  }
+
+  section.callout h4 {
+    margin-bottom: 1rem;
+  }
+  section.callout svg {
+    width: 1.5rem;
+  }
+}

assets/css/src/event-key-infos.css

@@ -19,3 +19,19 @@ section.key-infos .key-infos__key {
 section.key-infos .key-infos__key:not(:last-child) {
   margin-right: 3rem;
 }
+
+@media screen and (max-width: 800px) {
+  section.key-infos ul {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    row-gap: 0.3rem;
+  }
+
+  section.key-infos li:nth-child(even) {
+    justify-self: flex-end;
+  }
+
+  section.key-infos .key-infos__key:not(:last-child) {
+    margin-right: 0.2rem;
+  }
+}

assets/css/src/event-presentation.css

@@ -19,3 +19,10 @@
 .presentation__description {
   font-size: var(--font-size-s);
 }
+
+@media screen and (max-width: 800px) {
+  .presentation {
+    grid-template-columns: 1fr;
+    row-gap: 1rem;
+  }
+}

assets/css/src/events-grid.css

@@ -31,6 +31,7 @@
 .event-card__infos > div {
   display: flex;
   justify-content: space-between;
+  align-items: flex-end;
 }
 .event-card__infos > div:first-child {
   margin-bottom: calc(var(--space-m) / 2);
@@ -41,3 +42,22 @@
   inset: 0;
   z-index: 3;
 }
+
+@media screen and (max-width: 800px) {
+  .events-grid {
+    --padding-vertical: 10vw;
+  }
+  .events-grid h4 {
+    margin-bottom: 1.2rem;
+  }
+  .event-card {
+    margin-bottom: 1rem;
+  }
+  .event-card picture {
+    height: 70vw;
+  }
+
+  .event-card svg {
+    width: 2rem;
+  }
+}

assets/css/src/footer.css

@@ -23,3 +23,10 @@
 .main-footer form input::after {
   content: "→";
 }
+
+@media screen and (max-width: 800px) {
+  .main-footer {
+    grid-template-columns: 1fr;
+    row-gap: 1rem;
+  }
+}

assets/css/src/generic.css

@@ -205,3 +205,9 @@ img {
 img.show {
   opacity: 1;
 }
+
+@media screen and (max-width: 800px) {
+  .logo {
+    font-size: 6vw;
+  }
+}

assets/css/src/hero.css

@@ -44,3 +44,23 @@
   content: "→";
   margin-right: 1rem;
 }
+
+@media screen and (max-width: 800px) {
+  .hero__text h2 {
+    text-align: center;
+  }
+
+  .hero__text p:first-of-type {
+    margin-top: 1rem;
+  }
+
+  .hero__link {
+    position: relative;
+    display: block;
+    margin: 1rem 0;
+  }
+
+  .hero {
+    border-bottom: none !important;
+  }
+}

assets/css/src/nav.css

@@ -112,6 +112,10 @@
   margin-right: 2.69rem;
 }
 
+.main-nav__search {
+  transform: translateY(1px);
+}
+
 .main-nav .burger-btn {
   position: relative;
   width: 1.5rem;
@@ -174,6 +178,15 @@
     display: none;
   }
 
+  .main-nav__right > :not(:last-child),
+  .main-nav__featured-pages li:not(:last-child) {
+    margin-right: 7vw;
+  }
+
+  .main-nav svg {
+    height: 5.2vw;
+  }
+
   .expanded-nav {
     width: 100vw;
     height: 100vh;
@@ -232,7 +245,6 @@
   }
 
   .expanded-nav__socials {
-    position: absolute;
-    bottom: 3rem;
+    margin-top: 3rem;
   }
 }

assets/css/src/variables.css

@@ -42,6 +42,14 @@
 
 @media screen and (max-width: 800px) {
   :root {
+    --font-size-xl: 2.5rem;
+    --font-size-h1: 1.875rem;
     --font-size-h2: 1.5625rem;
+    --font-size-h3: 1.25rem;
+    --font-size-h4: 1.25rem;
+    --font-size-h5: 1.25rem;
+    --font-size-m: 0.9375rem;
+
+    --padding-vertical: 1rem;
   }
 }

site/snippets/event-card.php

@@ -2,7 +2,7 @@
   <a class="event-card__link" href="<?= $event->url() ?>" title="Voir l'événément"></a>
   <div class="image-wrapper">
   <?php if ($event->gallery()->toFiles()->count() > 1): ?>
-      <img class="image-cover" src="<?= $event->gallery()->toFiles()->first()->url() ?>" alt="">
+    <img class="image-cover" src="<?= $event->gallery()->toFiles()->first()->url() ?>" alt="">
   <?php endif ?>
   <?php 
     $file = $event->gallery()->toFiles()->count() > 1 ? $event->gallery()->toFiles()->nth(1) : $event->gallery()->toFiles()->first();

site/templates/event.php

@@ -30,7 +30,7 @@
 </section>
 
 <section class="collapsable-sections">
-  <?php snippet('collapsable-section', ['title' => 'Prenez vos places !', 'padding' => false], slots: true) ?>
+  <?php snippet('collapsable-section', ['title' => 'Réserver', 'padding' => false], slots: true) ?>
     <!--========== KIRBY EVENT ==========-->
     <?php if ($page->isMapadoEvent() != 'true'): ?>  
       

site/templates/home.php

@@ -26,15 +26,15 @@
     'asc'
   );
 
-    snippet('events-grid', ['title' => 'À venir', 'events' => $orderedEvents->slice(0, 2), 'columns' => 2]) 
+    snippet('events-grid', ['title' => 'Prochainement', 'events' => $orderedEvents->slice(0, 2), 'columns' => 2]) 
 ?>
 
 <?php snippet('newsletter-section') ?>
 
-<?php snippet('events-grid', ['title' => 'À venir', 'events' => $orderedEvents->slice(2, 3)]) ?>
+<?php snippet('events-grid', ['title' => 'Prochainement', 'events' => $orderedEvents->slice(2, 3)]) ?>
 
 <section class="callout">
-  <h4><?= $site->callout() ?></h4>
+  <h4><?= $site->callout()->inline() ?></h4>
   <a class="ticket-link" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
 </section>
 

site/templates/program.php

@@ -48,7 +48,7 @@
     <template x-if="tab === 'Programme'">
       <div class="program-content__events">
         <section class="yellow">
-          <h2>À venir — <?= $page->children()->first()->title() ?></h2>
+          <h2>Prochainement — <?= $page->children()->first()->title() ?></h2>
         </section>
         <?php snippet('events-grid', ['events' => $nextEvents, 'columns' => 3])  ?>
         <section class="yellow">