expanded-nav - adjust ticketing

assets/css/src/footer.css

@@ -11,8 +11,6 @@
 }
 
 .main-footer .social-icons {
-  display: flex;
-  column-gap: 1.15rem;
   margin-bottom: 2rem;
 }
 
@@ -25,12 +23,3 @@
 .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/generic.css

@@ -46,3 +46,17 @@ body.progress * {
 .logo > *:not(:first-child) {
   margin-left: 2.4ch;
 }
+
+.social-icons {
+  display: flex;
+  column-gap: 1.15rem;
+}
+
+.social-icons a svg {
+  transform: scale(1);
+  transition: transform 0.2s ease-in-out;
+}
+
+.social-icons a:hover svg {
+  transform: scale(1.15);
+}

assets/css/src/nav.css

@@ -12,13 +12,13 @@
   position: fixed;
   width: 100%;
   box-sizing: border-box;
-  top: -32rem;
+  top: -34rem;
   z-index: 2;
   background-color: var(--color-brown-light);
   display: grid;
   grid-template-columns: 2fr 8fr 1fr;
   transition: top 0.4s var(--curve-quick-slow);
-  padding: 2rem var(--space-m) 2rem 1rem;
+  padding: 3rem var(--space-m) 3rem 1rem;
   border-bottom: var(--border);
 }
 .expanded-nav.open {
@@ -68,6 +68,25 @@
   font-size: var(--font-size-s);
 }
 
+.expanded-nav__ticketing a {
+  display: flex;
+  align-items: center;
+}
+
+.expanded-nav__links {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.expanded-nav__ticketing .ticket {
+  margin-right: 1rem;
+}
+
+.expanded-nav__links .social-icons {
+  margin-top: 1rem;
+}
+
 /* Header */
 
 .main-nav {

assets/css/src/ticket.css

@@ -41,18 +41,20 @@ a:hover .ticket svg,
   animation: vibrate 0.5s forwards;
 }
 
-.ticket:hover svg path:not(.dot) {
+.ticket:hover svg path:not(.dot),
+a:hover .ticket svg path:not(.dot) {
   fill: var(--color-salmon);
   stroke: var(--color-salmon);
 }
-a:hover .ticket svg path:not(.dot) {
+a.to-blank:hover .ticket svg path:not(.dot) {
   fill: #fff;
   stroke: #fff;
 }
 
-.ticket:hover svg path.dot {
+.ticket:hover svg path.dot,
+a:hover .ticket svg path.dot {
   fill: #fff;
 }
-a:hover .ticket svg path.dot {
+a.to-blank:hover .ticket svg path.dot {
   fill: var(--color-salmon);
 }

site/snippets/nav.php

@@ -60,6 +60,22 @@
           </ul>
         </li>
     <?php endforeach ?>
+    <li class="expanded-nav__links">
+      <div class="expanded-nav__ticketing">
+        <a href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
+      </div>
+      <div class="expanded-nav__socials">
+        <strong>Suivez-nous</strong>
+        <ul class="social-icons">
+          <li>
+            <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="<?= $site->facebook() ?>" class="invert" target="_blank" title="Voir la page Facebook du NTB"><?= svg('assets/images/icons/facebook.svg') ?></a>
+          </li>
+        </ul>
+      </div>
+    </li>
   </ul>
   <button class="close-btn" title="Fermer le menu">
     <span class="sr-only">Fermer le menu</span>

site/templates/home.php

@@ -32,7 +32,7 @@
 
 <section class="callout">
   <h4><?= $site->callout() ?></h4>
-  <a href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
+  <a class="to-blank" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
 </section>
 
 <?php snippet('footer') ?>