From 3008e231cb1bbf24da4c475bf23c5e1d050945a2 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 31 Jul 2024 18:29:16 +0200
Subject: [PATCH] footer - dynamize infos

---
 assets/css/src/calendar-strip.css |  2 +-
 assets/css/src/callout.css        |  2 +-
 assets/css/src/footer.css         | 29 ++++++++++++++++++++++++++++-
 assets/css/src/hero.css           |  4 ++--
 site/blueprints/site.yml          | 23 +++++++++++++++++++++++
 site/snippets/footer.php          | 20 +++-----------------
 6 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/assets/css/src/calendar-strip.css b/assets/css/src/calendar-strip.css
index 69769c6..cdefe16 100644
--- a/assets/css/src/calendar-strip.css
+++ b/assets/css/src/calendar-strip.css
@@ -55,7 +55,7 @@
 }
 
 .calendar-strip__sessions {
-  padding: 2rem 0;
+  padding: var(--padding-vertical) 0;
 }
 
 .calendar-strip__session {
diff --git a/assets/css/src/callout.css b/assets/css/src/callout.css
index a861127..407d7a3 100644
--- a/assets/css/src/callout.css
+++ b/assets/css/src/callout.css
@@ -9,7 +9,7 @@ section.callout {
 }
 
 section.callout h4 {
-  margin-bottom: 2rem;
+  margin-bottom: calc(var(--padding-vertical) / 2);
 }
 
 section.callout a {
diff --git a/assets/css/src/footer.css b/assets/css/src/footer.css
index edaace1..918bdbf 100644
--- a/assets/css/src/footer.css
+++ b/assets/css/src/footer.css
@@ -1,9 +1,36 @@
 .main-footer {
+  --padding-vertical: var(--space-m);
   background-color: var(--color-yellow-fluo);
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: 0.5fr 1fr 1fr 1fr;
+  column-gap: calc(var(--space-m));
 }
 
 .main-footer p {
   margin-bottom: 1rem;
 }
+
+.main-footer .social-icons {
+  display: flex;
+  column-gap: 1.15rem;
+  margin-bottom: 2rem;
+}
+
+.main-footer form input {
+  width: 100%;
+  border-bottom: var(--border);
+  padding-bottom: 0.5rem;
+}
+
+.main-footer form input::after {
+  content: "→";
+}
+
+.main-footer .social-icons a svg {
+  transform: scale(1);
+  transition: transform 0.2s ease-in-out;
+}
+
+.main-footer .social-icons a:hover svg {
+  transform: scale(1.15);
+}
diff --git a/assets/css/src/hero.css b/assets/css/src/hero.css
index 38ae8e7..764677f 100644
--- a/assets/css/src/hero.css
+++ b/assets/css/src/hero.css
@@ -9,7 +9,7 @@
   font-size: var(--font-size-h1);
   width: 100%;
   text-align: center;
-  margin-bottom: 2rem;
+  margin-bottom: var(--padding-vertical);
 }
 
 .hero__text h3 {
@@ -21,5 +21,5 @@
 }
 
 .hero__text p:first-of-type {
-  margin-top: 2rem;
+  margin-top: var(--padding-vertical);
 }
diff --git a/site/blueprints/site.yml b/site/blueprints/site.yml
index f45e095..b60198c 100644
--- a/site/blueprints/site.yml
+++ b/site/blueprints/site.yml
@@ -88,3 +88,26 @@ tabs:
         templates:
           - free
           - program
+  contactTab:
+    label: Contact
+    icon: email
+    columns:
+      - width: 1/2
+        fields:
+          footerInfos:
+            label: Pied-de-page
+            type: writer
+            node: false
+            help: Texte libre affiché en bas de chaque page.
+            marks:
+              - bold
+              - email
+              - link
+      - width: 1/2
+        fields:
+          instagram:
+            type: url
+            icon: instagram
+          facebook:
+            type: url
+            icon: facebook
diff --git a/site/snippets/footer.php b/site/snippets/footer.php
index de828c5..75ec253 100644
--- a/site/snippets/footer.php
+++ b/site/snippets/footer.php
@@ -9,31 +9,17 @@
     <input placeholder="e-mail" type="email" name="email" autocomplete="email" id="email">
   </form>
   <div class="main-footer__infos">
-    <p><strong>Contact</strong></p>
-
-    <p>
-      Nouveau Théâtre de Besançon<br>
-      2 avenue Édouard Droz<br>
-      Parc du Casino<br>
-      25000 Besançon
-    </p>
-
-    <p><strong>Accueil</strong></p>
-
-    <p>
-      accueil@ntbesancon.fr<br>
-      03 81 88 55 11
-    </p>
+    <?= $site->footerInfos() ?>
   </div>
 
   <div class="main-footer__socials">
     <p><strong>Suivez nous</strong></p>
     <ul class="social-icons">
       <li>
-        <a href="" target="_blank" title="Voir la page Instagram du NTB"><?= svg('assets/images/icons/instagram.svg') ?></a>
+        <a href="<?= $site->instagram() ?>" class="invert" target="_blank" title="Voir la page Instagram du NTB"><?= svg('assets/images/icons/instagram.svg') ?></a>
       </li>
       <li>
-        <a href="" target="_blank" title="Voir la page Facebook du NTB"><?= svg('assets/images/icons/facebook.svg') ?></a>
+        <a href="<?= $site->facebook() ?>" class="invert" target="_blank" title="Voir la page Facebook du NTB"><?= svg('assets/images/icons/facebook.svg') ?></a>
       </li>
     </ul>
     <a href="#">Contacts et Mentions légales</a>