footer - dynamize infos

assets/css/src/calendar-strip.css

@@ -55,7 +55,7 @@
 }
 
 .calendar-strip__sessions {
-  padding: 2rem 0;
+  padding: var(--padding-vertical) 0;
 }
 
 .calendar-strip__session {

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 {

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);
+}

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);
 }

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

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>
+    <?= $site->footerInfos() ?>
-
-    <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>
   </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>