From dd04bac95e06ff8a9a41b205b487ca99b6b8e26a Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 10 Sep 2024 15:23:24 +0200
Subject: [PATCH] mobile responsive : home and start event

---
 assets/css/src/calendar-strip.css     |  7 +++++++
 assets/css/src/callout.css            | 17 +++++++++++++++++
 assets/css/src/event-key-infos.css    | 16 ++++++++++++++++
 assets/css/src/event-presentation.css |  7 +++++++
 assets/css/src/events-grid.css        | 20 ++++++++++++++++++++
 assets/css/src/footer.css             |  7 +++++++
 assets/css/src/generic.css            |  6 ++++++
 assets/css/src/hero.css               | 20 ++++++++++++++++++++
 assets/css/src/nav.css                | 16 ++++++++++++++--
 assets/css/src/variables.css          |  8 ++++++++
 site/snippets/event-card.php          |  2 +-
 site/templates/event.php              |  2 +-
 site/templates/home.php               |  6 +++---
 site/templates/program.php            |  2 +-
 14 files changed, 128 insertions(+), 8 deletions(-)

diff --git a/assets/css/src/calendar-strip.css b/assets/css/src/calendar-strip.css
index 4666376..b4d9211 100644
--- a/assets/css/src/calendar-strip.css
+++ b/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);
+  }
+}
diff --git a/assets/css/src/callout.css b/assets/css/src/callout.css
index 74ccf68..54e3b21 100644
--- a/assets/css/src/callout.css
+++ b/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;
+  }
+}
diff --git a/assets/css/src/event-key-infos.css b/assets/css/src/event-key-infos.css
index 615556b..c95d600 100644
--- a/assets/css/src/event-key-infos.css
+++ b/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;
+  }
+}
diff --git a/assets/css/src/event-presentation.css b/assets/css/src/event-presentation.css
index 11e9226..039eb4a 100644
--- a/assets/css/src/event-presentation.css
+++ b/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;
+  }
+}
diff --git a/assets/css/src/events-grid.css b/assets/css/src/events-grid.css
index 3ad6f15..8ae4e53 100644
--- a/assets/css/src/events-grid.css
+++ b/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;
+  }
+}
diff --git a/assets/css/src/footer.css b/assets/css/src/footer.css
index 3eed1dc..f303935 100644
--- a/assets/css/src/footer.css
+++ b/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;
+  }
+}
diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css
index e042632..f93a9b1 100644
--- a/assets/css/src/generic.css
+++ b/assets/css/src/generic.css
@@ -205,3 +205,9 @@ img {
 img.show {
   opacity: 1;
 }
+
+@media screen and (max-width: 800px) {
+  .logo {
+    font-size: 6vw;
+  }
+}
diff --git a/assets/css/src/hero.css b/assets/css/src/hero.css
index eab97dd..a61df9d 100644
--- a/assets/css/src/hero.css
+++ b/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;
+  }
+}
diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css
index a36d8c6..846256a 100644
--- a/assets/css/src/nav.css
+++ b/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;
   }
 }
diff --git a/assets/css/src/variables.css b/assets/css/src/variables.css
index 41bbf5d..ccebb59 100644
--- a/assets/css/src/variables.css
+++ b/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;
   }
 }
diff --git a/site/snippets/event-card.php b/site/snippets/event-card.php
index 3f85760..bea09f0 100644
--- a/site/snippets/event-card.php
+++ b/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();
diff --git a/site/templates/event.php b/site/templates/event.php
index bccf92c..11edf81 100644
--- a/site/templates/event.php
+++ b/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'): ?>  
       
diff --git a/site/templates/home.php b/site/templates/home.php
index 0f2bc6c..8ddc048 100644
--- a/site/templates/home.php
+++ b/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>
 
diff --git a/site/templates/program.php b/site/templates/program.php
index f1a56cc..616334a 100644
--- a/site/templates/program.php
+++ b/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">