Updated header styles

This commit is contained in:
James Dinh 2023-01-22 01:50:31 -08:00
parent f14aa45ee2
commit e120e58439
4 changed files with 624 additions and 586 deletions

View File

@ -132,7 +132,7 @@ html {
}
.nav-container .menu-icon {
cursor: pointer;
display: inline-block;
display: block;
float: right;
padding: 28px 20px;
position: relative;
@ -580,6 +580,25 @@ nav * {
flex-flow: column nowrap;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.header-container {
width: 100%;
height: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
text-align: center;
}
.header-logo-parent {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
@ -676,6 +695,13 @@ nav * {
color: rgb(252, 93, 93);
}
.header-info-container {
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
justify-content: center;
}
@media (max-width: 610px) {
#header-tooltip::after, #spots-tooltip::after {
display: none;

View File

@ -22,7 +22,7 @@
<link rel="apple-touch-icon" href="img/Gilroy_Hacks_Logo_app.png">
<meta name="author" content="Gilroy Hacks">
<meta name="copyright" content="This site and its pages are Copyright (c) 2022 Gilroy Hacks All Rights Reserved.">
<meta name="copyright" content="This site and its pages are Copyright (c) 2023 Gilroy Hacks All Rights Reserved.">
<meta name="description" content="Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local middle/high school students.">
<meta name="keywords" content="Gilroy Hacks, GilroyHacks, Gilroy, hackathon, Bay Area, GECA, Dr. TJ Owens Gilroy Early College Academy">
@ -30,9 +30,10 @@
<!-- <script defer src="js/leaflet.js"></script>
<script defer src="js/map.js"></script> -->
<script defer src="js/general.js"></script>
<script src="js/apexcharts.js"></script>
<script src="js/splide.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script defer src="js/apexcharts.js"></script>
<script defer src="js/splide.min.js"></script>
<script defer src="js/jquery-3.6.0.min.js"></script>
<script defer src="js/anime.min.js"></script>
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<script defer data-domain="gilroyhacks.com" src="https://plausible.gilroyhacks.com/js/script.js"></script>
<style>
@ -103,8 +104,7 @@
<header>
<div id="header-background">
<div id="header-gradient">
<!-- <div id="winners">Congrats to the winners of the Gilroy Hacks 2022 Summer Hackathon: <span id="team-emphasis">Team 7 - Christian Nguyen, Connor Palsgrove</span></div> -->
<!-- <div id="header">
<div id="header">
<img id="logo" src="img/icon.ico" alt="logo"/>
<div class="waviy" id="top-logo-text">
<span style="--i:0.1s">G</span>
@ -133,42 +133,46 @@
<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 id="header">
<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="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="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>
<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>
<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 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 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 class="header-info-container">
</div> -->
</div>
</div> -->
</div>
</div>
</header>

8
js/anime.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff