From d97e7124be1bad5105b2e0d73ac5b098e667ca52 Mon Sep 17 00:00:00 2001
From: Lucy Cifferello <12953208+elvece@users.noreply.github.com>
Date: Thu, 10 Nov 2022 08:13:10 -0700
Subject: [PATCH] make banner clickable

---
 src/_includes/components/banner.njk | 13 +++++++++----
 src/assets/styles/main.scss         | 27 +++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/_includes/components/banner.njk b/src/_includes/components/banner.njk
index 1f9799c..78ad07a 100644
--- a/src/_includes/components/banner.njk
+++ b/src/_includes/components/banner.njk
@@ -1,9 +1,14 @@
 {% if site.banner %}
   <section id="banner" style="display: none">
-    <div class="banner__content">
-      <p>
-        <a href="/embassy-pro">Embassy Pro</a> presale ends Nov 20, 11:00pm ET. Price will rise from $1,499 to $1,899. <a target="_blank" rel="noopener noreferrer" href="{{ site.products.pro }}">Get yours</a>!
-      </p>
+    <div class="link-container">
+      <a class="overlay" target="_blank" rel="noopener noreferrer" href="{{ site.products.pro }}">
+        <div class="banner__content">
+          <p class="inner">
+            <a href="/embassy-pro">Embassy Pro</a> presale ends Nov 20, 11:00pm ET. Price will rise from $1,499 to $1,899.
+          </p>
+        </div>
+        <span class="link-spanner"></span>
+      </a>
     </div>
   </section>
 {% endif %}
\ No newline at end of file
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index 3099f5c..3337642 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -286,6 +286,33 @@ section#banner {
   top: 0;
   height: $banner-height;
 
+  a {
+    cursor: pointer;
+  }
+
+  .link-container {
+    position: relative;
+  }
+
+ .link-container .overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .link-container .inner {
+    position: relative;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .link-container .inner a {
+    pointer-events: all;
+    position: relative;
+  }
+
   .banner__content {
     display: flex;
     align-items: center;