wellfedbison/gilroyhacks.com
wellfedbison/gilroyhacks.com
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated header

Browse Source
This commit is contained in:
James Dinh 2023-02-25 01:14:51 -08:00
parent cb2435a35b
commit 41767ab833
3 changed files with 83 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
css/general.css
View File

@ -280,6 +280,7 @@ nav * {
display: flex;
flex-flow: row wrap;
max-width: 420px;
padding: 0 10px;
min-width: none;
justify-content: center;
}
@ -674,7 +675,7 @@ nav * {
}
}
#header-subtitle-date {
.header-subtitle {
padding: 5px 7px;
margin-top: 5px;
border-radius: 10px;
@ -683,7 +684,23 @@ nav * {
place-items: center;
border: 1px solid rgb(73, 73, 73);
background-color: rgb(22, 22, 22);
animation: slidein ease 1.5s;
}
.header-subtitle.donate {
background: rgb(98,0,255);
background: linear-gradient(90deg, rgba(98,0,255,1) 0%, rgba(199,82,35,1) 75%, rgba(209,117,47,1) 100%);
}
.header-link.left {
animation: slideinleft ease 1.5s;
animation-delay: calc(var(--i));
animation-fill-mode: both;
}
.header-link.right {
animation: slideinright ease 1.5s;
animation-delay: calc(var(--i));
animation-fill-mode: both;
}
.header-link {
@ -700,14 +717,30 @@ nav * {
color: rgb(252, 188, 93);
}
#spots-tooltip::after {
content: '← Sign up here';
#map-tooltip::after {
content: '← Open map';
top: 12px;
right: -150px;
right: -120px;
transform-origin: left;
color: rgb(252, 188, 93);
}
#donate-tooltip::after {
content: '← Donate Page 💝';
top: 12px;
right: -160px;
transform-origin: left;
color: rgb(252, 188, 93);
}
#spots-tooltip::after {
content: 'Sign up here →';
top: 12px;
right: 205px;
transform-origin: right;
color: rgb(252, 188, 93);
}
.header-info-container {
display: flex;
flex-flow: column nowrap;
@ -734,14 +767,16 @@ nav * {
width: fit-content;
border: 1px solid rgb(73, 73, 73);
background-color: rgb(22, 22, 22);
animation: slidein-2 ease 3s;
animation: slideinleft ease 1.5s;
background: rgb(20,48,10);
background: linear-gradient(90deg, rgba(20,48,10,1) 0%, rgba(43,52,44,1) 100%);
}
#header-subtitle-spots {
padding: 5px;
}
#spots-container:hover, #header-subtitle-date:hover {
#spots-container:hover, .header-subtitle:hover {
transform: translateY(-2px);
transition: 0.5s;
}
@ -792,32 +827,48 @@ nav * {
opacity: 1;
}
}
@keyframes slidein {
@keyframes slideinleft {
0% {
transform: translateY(250px);
transform: translateX(-20px);
opacity: 0;
}
60% {
opacity: 0;
transform: translateX(-20px);
}
100% {
transform: translateY(0px);
transform: translateX(0px);
opacity: 1;
}
}
@keyframes slidein-2 {
@keyframes slideinright {
0% {
transform: translateY(1000px);
transform: translateX(20px);
opacity: 0;
}
60% {
transform: translateX(20px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
/* @keyframes slidein-2 {
0% {
transform: translateY(20px);
opacity: 0;
}
80% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
} */
@keyframes slidein-side {
0% {
transform: translateX(-100px);
@ -2618,7 +2669,7 @@ li .splide__pagination__page.is-active {
/* Utilities */
#line-header {
width: 200px;
margin: 0 auto 5px;
margin: 10px 0;
animation: grow-wide ease 2s;
}
@ -2689,6 +2740,11 @@ li .splide__pagination__page.is-active {
margin-left: 5px;
}
.new-tab-icon.sub-icon {
height: 15px;
margin-left: 8px;
}
.discord-icon {
width: 16px;
height: 16px;

BIN
img/WolframHackathonLogo2023.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

20
index.html
View File

@ -121,13 +121,16 @@
</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>
<a class="link tooltip header-link left" id="header-tooltip" style="--i:0.1s" 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 class="header-subtitle" 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 right" id="map-tooltip" style="--i:0.3s" target="_blank" href="https://goo.gl/maps/sAwTRMW3zRkZphV77"><h2 class="header-subtitle" id="header-subtitle-location"><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>
<a class="tooltip header-link left" id="spots-tooltip" style="--i:0.5s" href="https://forms.gle/DGhhtikk5j72E59G8" target="_blank">
<div id="spots-container">
<div class="blob green" aria-hidden="true"></div>
<h2 id="header-subtitle-spots">Signup Form<svg class="new-tab-icon sub-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z"/></svg></h2>
</div>
</a>
<a class="link tooltip header-link right" id="donate-tooltip" style="--i:0.7s" target="_blank" href="https://goo.gl/maps/sAwTRMW3zRkZphV77"><h2 class="header-subtitle donate"><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="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>&nbspDonate<svg class="new-tab-icon sub-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z"/></svg></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">
Scroll
@ -271,6 +274,9 @@
<a href="https://artofproblemsolving.com/" target="_blank">
<img src="img/AOPS_logo" loading="lazy" alt="AOPS logo">
</a>
<a href="https://www.wolfram.com/language/" target="_blank">
<img src="img/WolframHackathonLogo2023.png" loading="lazy" alt="Wolfram Alpha logo">
</a>
<a href="https://taskade.com/" target="_blank">
<img src="img/taskade_logo" loading="lazy" alt="taskade logo">
</a>
@ -853,4 +859,4 @@
</div>
</footer>
</body>
</html
<