Merge pull request #11 from crisbusquets/improvement/add-newsletter-c…

…ta-header Add subscribe CTA desktop
crisbusquets · Aug 3, 2024 · f826260 · f826260
2 parents a8ba51d + cd70b35
commit f826260
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 34 deletions.
diff --git a/header.php b/header.php
@@ -11,34 +11,29 @@
   <link rel="preconnect" async href="https://www.googletagmanager.com" />
   <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css">
 
-  <link rel="apple-touch-icon" sizes="180x180"
-    href="<?php bloginfo('template_url'); ?>/assets/images/favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32"
-    href="<?php bloginfo('template_url'); ?>/assets/images/favicon/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16"
-    href="<?php bloginfo('template_url'); ?>/assets/images/favicon/favicon-16x16.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="<?php bloginfo('template_url'); ?>/assets/images/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="<?php bloginfo('template_url'); ?>/assets/images/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="<?php bloginfo('template_url'); ?>/assets/images/favicon/favicon-16x16.png">
   <link rel="manifest" href="<?php bloginfo('template_url'); ?>/assets/images/favicon/site.webmanifest">
-  <link rel="mask-icon" href="<?php bloginfo('template_url'); ?>/assets/images/favicon/safari-pinned-tab.svg"
-    color="#5bbad5">
+  <link rel="mask-icon" href="<?php bloginfo('template_url'); ?>/assets/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
   <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/assets/images/favicon/favicon.ico">
   <meta name="apple-mobile-web-app-title" content="uiFromMars">
   <meta name="application-name" content="uiFromMars">
   <meta name="msapplication-TileColor" content="#b91d47">
-  <meta name="msapplication-config"
-    content="<?php bloginfo('template_url'); ?>/assets/images/favicon/browserconfig.xml">
+  <meta name="msapplication-config" content="<?php bloginfo('template_url'); ?>/assets/images/favicon/browserconfig.xml">
   <meta name="theme-color" content="#ffffff">
 
   <!-- MailerLite Universal -->
   <script>
-  (function(w, d, e, u, f, l, n) {
-    w[f] = w[f] || function() {
-        (w[f].q = w[f].q || [])
-        .push(arguments);
-      }, l = d.createElement(e), l.async = 1, l.src = u,
-      n = d.getElementsByTagName(e)[0], n.parentNode.insertBefore(l, n);
-  })
-  (window, document, 'script', 'https://assets.mailerlite.com/js/universal.js', 'ml');
-  ml('account', '244387');
+    (function(w, d, e, u, f, l, n) {
+      w[f] = w[f] || function() {
+          (w[f].q = w[f].q || [])
+          .push(arguments);
+        }, l = d.createElement(e), l.async = 1, l.src = u,
+        n = d.getElementsByTagName(e)[0], n.parentNode.insertBefore(l, n);
+    })
+    (window, document, 'script', 'https://assets.mailerlite.com/js/universal.js', 'ml');
+    ml('account', '244387');
   </script>
   <!-- End MailerLite Universal -->
 
@@ -48,22 +43,18 @@
 <body>
 
   <div id="marquee">
-    <a href="https://disenodesdemarte.com/" class="marquee-link plausible-event-name=Top+Bar"
-      aria-label="Consulta mi libro 'Diseño desde Marte', ya disponible">
+    <a href="https://disenodesdemarte.com/" class="marquee-link plausible-event-name=Top+Bar" aria-label="Consulta mi libro 'Diseño desde Marte', ya disponible">
       <span class="marquee-element">Mi libro “Diseño desde Marte” ya a la venta</span>
     </a>
-    <button id="close-marquee" aria-label="Cerrar barra superior" class="plausible-event-name=Close+Top+Bar"> <img
-        src="<?php echo get_bloginfo('template_url') ?>/assets/images/icon/x-mark-white.svg" width="16" height="16"
-        alt="icono aspa cerrar" /></button>
+    <button id="close-marquee" aria-label="Cerrar barra superior" class="plausible-event-name=Close+Top+Bar"> <img src="<?php echo get_bloginfo('template_url') ?>/assets/images/icon/x-mark-white.svg" width="16" height="16" alt="icono aspa cerrar" /></button>
     <div id="marquee-close-gradient"></div>
   </div>
 
   <header>
     <div class="wrapper">
       <div id="logo">
         <a href="/" target="_self" alt="Volver al inicio">
-          <img src="<?php echo get_bloginfo('template_url') ?>/assets/images/uifrommars-logo.svg" alt="uiFromMars"
-            width="125" height="auto" />
+          <img src="<?php echo get_bloginfo('template_url') ?>/assets/images/uifrommars-logo.svg" alt="uiFromMars" width="125" height="auto" />
         </a>
       </div>
       <div id="navigation">
@@ -76,13 +67,11 @@
         </div>
       </div>
       <div id="extra">
-        <a href="#" id="header-newsletter">Suscríbete</a>
+        <a href="/suscribete" id="header-newsletter" class="plausible-event-name=Subscribe+CTA+Header">Suscríbete</a>
         <div id="search-icon" class="show plausible-event-name=Search">
-          <img src="<?php echo get_bloginfo('template_url') ?>/assets/images/icon/magnifying-glass.svg" width="24"
-            height="24" alt="icono lupa buscar" />
+          <img src="<?php echo get_bloginfo('template_url') ?>/assets/images/icon/magnifying-glass.svg" width="24" height="24" alt="icono lupa buscar" />
         </div>
-        <button class="hamburger hamburger--squeeze nav-toggle" type="button" aria-label="Abrir menú navegación"
-          aria-expanded="false">
+        <button class="hamburger hamburger--squeeze nav-toggle" type="button" aria-label="Abrir menú navegación" aria-expanded="false">
           <span class="hamburger-box">
             <span class="hamburger-inner"></span>
           </span>
@@ -92,8 +81,7 @@
       <dialog>
         <div id="dialog-header">
           <h3>Busca en uiFromMars</h3>
-          <img src="<?php echo get_bloginfo('template_url') ?>/assets/images/icon/x-mark.svg" width="24" height="24"
-            alt="icono aspa cerrar" class="close" />
+          <img src="<?php echo get_bloginfo('template_url') ?>/assets/images/icon/x-mark.svg" width="24" height="24" alt="icono aspa cerrar" class="close" />
         </div>
         <?php get_search_form(); ?>
       </dialog>

diff --git a/styles/grid.css b/styles/grid.css
@@ -95,7 +95,6 @@ aside > .wrapper {
 }
 
 #header-newsletter {
-  display: none; /* k bai */
   background-color: var(--dark-gray);
   color: var(--warm);
   padding-block: var(--spacing-xs);