Updated header

This commit is contained in:
James Dinh 2023-02-23 20:43:33 -08:00
parent fe21eecd6b
commit cb2435a35b
2 changed files with 20 additions and 44 deletions

View File

@ -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;
transform-origin: left;
right: 160px;
transform-origin: right;
color: rgb(252, 188, 93);
}

View File

@ -120,57 +120,21 @@
<span style="--i:1.1s">S</span>
</div>
<hr id="line-header">
<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 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>