Updated header

css/general.css

@@ -276,6 +276,18 @@ nav * {
   text-align: center;
 }
 
+.header-info {
+  display: flex;
+  flex-flow: row wrap;
+  max-width: 420px;
+  min-width: none;
+  justify-content: center;
+}
+
+.header-info a {
+  margin: 0 5px;
+}
+
 #timer {
   color: rgb(184, 184, 184);
   animation: blinking 3s infinite;
@@ -681,10 +693,10 @@ nav * {
 }
 
 #header-tooltip::after {
-  content: '← Add to Calendar';
+  content: 'Add to Calendar →';
   top: 12px;
-  right: -160px;
+  right: 160px;
-  transform-origin: left;
+  transform-origin: right;
   color: rgb(252, 188, 93);
 }
 

index.html

@@ -120,57 +120,21 @@
                         <span style="--i:1.1s">S</span>
                     </div>
                     <hr id="line-header">
+                    <div class="header-info">
                         <a class="link tooltip header-link" id="header-tooltip" target="_blank" href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20230415T170000Z%2F20230417T000000Z&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> Apr 15 - 16</h2></a>
+                        <a class="link tooltip header-link" target="_blank" href="https://goo.gl/maps/sAwTRMW3zRkZphV77"><h2 id="header-subtitle-date"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z"/><circle cx="12" cy="10" r="3"/></svg>&nbspGavilan College</h2></a>
+                    </div>
                     <a class="tooltip header-link" id="spots-tooltip" href="https://forms.gle/DGhhtikk5j72E59G8" target="_blank"><div id="spots-container">
                         <div class="blob green" aria-hidden="true"></div>
                         <h2 id="header-subtitle-spots">Signups are open!</h2>
                     </div></a>
                     <div id="entrance-arrow">
                         <a href="#event" id="arrow-link">
-                            Event
+                            Scroll
                             <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                         </a>
                     </div>
                 </div>
-                <!-- <div class="header-parent">
-                    <div class="header-container">
-                        <div class="header-logo-parent">
-                            <img id="logo" src="img/icon.ico" alt="logo"/>
-                            <div class="waviy" id="top-logo-text">
-                                <span style="--i:0.1s">G</span>
-                                <span style="--i:0.2s">I</span>
-                                <span style="--i:0.3s">L</span>
-                                <span style="--i:0.4s">R</span>
-                                <span style="--i:0.5s">O</span>
-                                <span style="--i:0.6s">Y</span>
-                            </div>
-                            <div class="waviy" id="bottom-logo-text">
-                                <span style="--i:0.7s">H</span>
-                                <span style="--i:0.8s">A</span>
-                                <span style="--i:0.9s">C</span>
-                                <span style="--i:1.0s">K</span>
-                                <span style="--i:1.1s">S</span>
-                            </div>
-                            <div id="entrance-arrow">
-                                <a href="#event" id="arrow-link">
-                                    Event
-                                    <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
-                                </a>
-                            </div>
-                        </div>
-                        <div class="header-info-container">
-                            <div class="info-element"><a class="link tooltip header-link" id="header-tooltip" target="_blank" href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20230415T170000Z%2F20230417T000000Z&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>Apr 15 - 16</h2></a></div>
-                            <div class="info-element">
-                                <a class="tooltip header-link" id="spots-tooltip">
-                                    <div id="spots-container">
-                                        <div class="blob gold" aria-hidden="true"></div>
-                                    <h2 id="header-subtitle-spots">Signups not yet open</h2>
-                                    </div>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div> -->
             </div>
         </div>
     </header>