From 4468e14a8cf5919c12ce51cd3ac240d6e3582412 Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@gmail.com>
Date: Sat, 23 Jul 2022 22:29:47 -0700
Subject: [PATCH] Fixed page bugs

---
 contact.html     | 12 +++++++-----
 css/contact.css  | 37 +++++++++++++++++++++++++++++++++++++
 css/licenses.css | 37 +++++++++++++++++++++++++++++++++++++
 licenses.html    | 12 +++++++-----
 4 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/contact.html b/contact.html
index e25190d..4412e0e 100644
--- a/contact.html
+++ b/contact.html
@@ -94,11 +94,13 @@
                     <img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="100" width="100" alt="logo"/>
                     <div class="vertical-line"></div>
                     <div id="header-info">
-                        <h2 id="header-subtitle-date">Aug 12 - 14</h2>
-                        <div id="spots-container">
-                            <div class="blob green" aria-hidden="true"></div>
-                            <h2 id="header-subtitle-spots">21 spots remaining</h2>
-                        </div>
+                        <a class="link tooltip header-link" id="header-tooltip" target="_blank" href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220812T230000Z%2F20220814T233000Z&details=Participate%20in%20a%20weekend-long%20hackathon%20to%20strengthen%20your%20coding%20skills%20and%20earn%20some%20cool%20prizes%21&location=Gilroy%20Library&text=Gilroy%20Hacks%20Hackathon"><h2 id="header-subtitle-date"><svg class="header-icon" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Aug 12 - 14</h2></a>
+                        <a class="link tooltip header-link" id="spots-tooltip" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7">
+                            <div id="spots-container">
+                                <div class="blob green" aria-hidden="true"></div>
+                                <h2 id="header-subtitle-spots">21 spots remaining</h2>
+                            </div>
+                        </a>
                     </div>
                 </div>
             </div>
diff --git a/css/contact.css b/css/contact.css
index 6e77f07..cbd903f 100644
--- a/css/contact.css
+++ b/css/contact.css
@@ -387,6 +387,37 @@ nav ul li {
   animation: slidein ease 1.5s;
 }
 
+.header-link {
+  background: unset !important;
+  color: white !important;
+}
+
+#header-tooltip::after {
+  content: '← Add to Calendar';
+  top: 8px;
+  right: -100px;
+  transform-origin: left;
+  color: rgb(252, 188, 93);
+}
+
+#spots-tooltip::after {
+  content: '← Signups Available!';
+  top: 8px;
+  right: -165px;
+  transform-origin: left;
+  color: rgb(252, 188, 93);
+}
+
+@media (max-width: 700px) {
+  #header-tooltip::after, #spots-tooltip::after {
+    display: none;
+  }
+}
+
+.header-icon {
+  margin-right: 6px;
+}
+
 #spots-container {
   display: flex;
   border-radius: 10px;
@@ -621,6 +652,12 @@ option {
   margin: 10px auto;
 }
 
+.new-tab-icon {
+  fill: white;
+  height: 10px;
+  margin-left: 5px;
+}
+
 #footer-line {
   width: 100px;
   margin: 10px auto;
diff --git a/css/licenses.css b/css/licenses.css
index e514b60..813ffcf 100644
--- a/css/licenses.css
+++ b/css/licenses.css
@@ -383,6 +383,37 @@ nav ul li {
   animation: slidein ease 1.5s;
 }
 
+.header-link {
+  background: unset !important;
+  color: white !important;
+}
+
+#header-tooltip::after {
+  content: '← Add to Calendar';
+  top: 8px;
+  right: -100px;
+  transform-origin: left;
+  color: rgb(252, 188, 93);
+}
+
+#spots-tooltip::after {
+  content: '← Signups Available!';
+  top: 8px;
+  right: -165px;
+  transform-origin: left;
+  color: rgb(252, 188, 93);
+}
+
+@media (max-width: 700px) {
+  #header-tooltip::after, #spots-tooltip::after {
+    display: none;
+  }
+}
+
+.header-icon {
+  margin-right: 6px;
+}
+
 #spots-container {
   display: flex;
   border-radius: 10px;
@@ -543,6 +574,12 @@ section {
   margin: 10px auto;
 }
 
+.new-tab-icon {
+  fill: white;
+  height: 10px;
+  margin-left: 5px;
+}
+
 #footer-line {
   width: 100px;
   margin: 10px auto;
diff --git a/licenses.html b/licenses.html
index 318c0c3..e7b5a45 100644
--- a/licenses.html
+++ b/licenses.html
@@ -92,11 +92,13 @@
                     <img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="100" width="100" alt="logo"/>
                     <div class="vertical-line"></div>
                     <div id="header-info">
-                        <h2 id="header-subtitle-date">Aug 12 - 14</h2>
-                        <div id="spots-container">
-                            <div class="blob green" aria-hidden="true"></div>
-                            <h2 id="header-subtitle-spots">21 spots remaining</h2>
-                        </div>
+                        <a class="link tooltip header-link" id="header-tooltip" target="_blank" href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20220812T230000Z%2F20220814T233000Z&details=Participate%20in%20a%20weekend-long%20hackathon%20to%20strengthen%20your%20coding%20skills%20and%20earn%20some%20cool%20prizes%21&location=Gilroy%20Library&text=Gilroy%20Hacks%20Hackathon"><h2 id="header-subtitle-date"><svg class="header-icon" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Aug 12 - 14</h2></a>
+                        <a class="link tooltip header-link" id="spots-tooltip" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7">
+                            <div id="spots-container">
+                                <div class="blob green" aria-hidden="true"></div>
+                                <h2 id="header-subtitle-spots">21 spots remaining</h2>
+                            </div>
+                        </a>
                     </div>
                 </div>
             </div>