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

Updated nav menu

Browse Source
This commit is contained in:
James Dinh 2023-01-08 22:44:43 -08:00
parent f891c2bdf7
commit 4ff1578841
3 changed files with 204 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
css/general.css
View File

@ -18,6 +18,138 @@ html {
box-sizing: border-box; box-sizing: border-box;
} }
.nav-container {
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
/* menu */
.nav-container .nav-menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
clear: none;
float: right;
max-height: none;
margin-right: 110px;
}
.nav-container .nav-menu li {
display: inline-block;
line-height: 30px;
margin: 10px 7px;
padding: 3px 11px;
cursor: pointer;
}
/* menu icon */
.nav-container .menu-icon {
display: none;
}
.nav-container .menu-icon .navicon {
background: rgb(123, 123, 123);
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.nav-container .menu-icon .navicon:before,
.nav-container .menu-icon .navicon:after {
background: rgb(123, 123, 123);
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.nav-container .menu-icon .navicon:before {
top: 5px;
}
.nav-container .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.nav-container .menu-btn {
display: none;
}
.nav-container .menu-btn:checked ~ .nav-menu {
max-height: 300px;
background-color: rgb(24, 24, 24);
transition: 0.2s;
}
.nav-container .menu-btn:not(:checked) ~ .nav-menu {
animation: slow-fade 1s ease;
}
.nav-container .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.nav-container .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.nav-container .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
@keyframes slow-fade {
0% {
background-color: rgb(24, 24, 24);
}
90% {
background-color: unset;
}
}
@media (max-width: 950px) {
/* .nav-container {
background-color: unset;
} */
.nav-container .nav-menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
text-align: center;
width: 100%;
margin-right: 0;
}
.nav-container .nav-menu li {
display: block;
}
.nav-container .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
#sign-up {
right: 50px !important;
}
}
nav { nav {
height: 59px; height: 59px;
width: 100%; width: 100%;
@ -30,7 +162,6 @@ nav {
nav * { nav * {
padding: 0; padding: 0;
margin: 0px 5px;
list-style: none; list-style: none;
box-sizing: border-box; box-sizing: border-box;
z-index: 100; z-index: 100;
@ -54,19 +185,6 @@ nav * {
margin-left: 10px; margin-left: 10px;
} }
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 30px;
margin: 10px 7px;
padding: 3px 5px;
cursor: pointer;
}
.navlink { .navlink {
color:rgb(233, 203, 104); color:rgb(233, 203, 104);
font-size: 18px; font-size: 18px;
@ -119,7 +237,6 @@ nav ul li {
padding: 0; padding: 0;
height: 59px; height: 59px;
float: right; float: right;
flex-wrap: nowrap;
flex-direction: row-reverse; flex-direction: row-reverse;
align-content: stretch; align-content: stretch;
} }
@ -131,18 +248,19 @@ nav ul li {
#sign-up { #sign-up {
padding: 6px 7px; padding: 6px 7px;
margin: 14px 15px 14px 4px; margin: 14px 15px 14px 4px;
width: 72px;
border-radius: 5px; border-radius: 5px;
font-size: 16px; font-size: 16px;
background-color: rgb(140, 42, 165); background-color: rgb(140, 42, 165);
color: bisque; color: bisque;
display: flex; position: fixed;
place-items: center; display: inline-flex;
right: 10px;
} }
#sign-up:hover { #sign-up:hover {
transform: scale(1.05); transform: scale(1.03);
background-color: blueviolet; filter: brightness(1.05);
cursor: pointer; cursor: pointer;
transition: 0.5s; transition: 0.5s;
} }
@ -163,7 +281,7 @@ nav ul li {
} }
#event-name { #event-name {
margin: 0px; margin-right: 10px;
} }
#timer { #timer {
@ -172,7 +290,9 @@ nav ul li {
background-color: rgb(57, 57, 57); background-color: rgb(57, 57, 57);
border-radius: 5px; border-radius: 5px;
padding: 2px 5px; padding: 2px 5px;
margin-left: 5px;
position: relative; position: relative;
width: fit-content
} }
#timer::after { #timer::after {
@ -284,7 +404,8 @@ nav ul li {
.checkbtn { .checkbtn {
display: inline-block; display: inline-block;
} }
nav ul {
/* nav ul {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 300px; height: 300px;
@ -302,10 +423,11 @@ nav ul li {
#check:checked ~ul { #check:checked ~ul {
visibility: visible; visibility: visible;
animation: dropdown 0.5s ease; animation: dropdown 0.5s ease;
} } */
.checkbtn { .checkbtn {
display: inline-block; display: inline-block;
} }
#prize-logo, .podium-label { #prize-logo, .podium-label {
transform: scale(0.9); transform: scale(0.9);
font-size: 16px !important; font-size: 16px !important;
@ -333,6 +455,26 @@ nav ul li {
} }
} }
@media (max-width: 750px) { @media (max-width: 750px) {
#banner {
display: block;
top: 1px;
max-width: 200px;
min-width: 150px;
width: auto;
margin-left: 300px;
}
#timer-container {
display: block;
text-align: center;
}
#timer {
display: inline-block;
position: relative;
margin: 3px auto 0;
padding: 0px 5px;
}
}
@media (max-width: 620px) {
#banner { #banner {
display: none; display: none;
} }
@ -359,6 +501,28 @@ nav ul li {
#prizes-container { #prizes-container {
transform: scale(0.9); transform: scale(0.9);
} }
#banner {
display: block;
margin-left: 75px;
}
}
@media (max-width: 400px) {
#nav-logo {
content: url(/img/logo_mini.png);
height: 45px;
width: 45px;
margin: 7px 0 0 5px;
}
#logo {
height: 2300px;
width: 230px;
}
#prizes-container {
transform: scale(0.9);
}
#banner {
display: none;
}
} }
@media (max-height: 550px) { @media (max-height: 550px) {
#logo { #logo {
@ -863,7 +1027,7 @@ section {
} }
.slide { .slide {
min-width: 340px; /* min-width: 340px; */
max-width: 600px; max-width: 600px;
min-height: 200px; min-height: 200px;
max-height: 400px; max-height: 400px;
@ -2631,4 +2795,4 @@ footer li {
/* Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and /* Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and
coding extravaganza with tons of other like-minded students sound (at the least bit) interesting to you? coding extravaganza with tons of other like-minded students sound (at the least bit) interesting to you?
Gilroy Hacks is all about allowing passionate students showcase their skills and teaching new concepts to Gilroy Hacks is all about allowing passionate students showcase their skills and teaching new concepts to
newcomers. If this sounds like you, then all aboard the Hackathon train! */ newcomers. If this sounds like you, then all aboard the Hackathon tra

30
index.html
View File

@ -76,27 +76,25 @@
<body> <body>
<!--Nav--> <!--Nav-->
<nav id="navBar"> <nav id="navBar">
<a id="nav-logo-a" href="./"> <div class="nav-container">
<img id="nav-logo" src="img/Gilroy_Hacks_Banner_Spring.png" alt="logo"/> <a id="nav-logo-a" href="./">
</a> <img id="nav-logo" src="img/Gilroy_Hacks_Banner_Spring.png" alt="logo"/>
<div id="banner"> </a>
<p id="banner-text"><a class="navlink" id="timer-link" href="#schedule"><span id="event-name">loading...</span></a> in <div id="banner">
<span id="timer">---</span> <p id="banner-text"><a class="navlink" id="timer-link" href="#schedule"><span id="event-name">loading...</span></a> <div id="timer-container">in
</p> <span id="timer">---</span></div>
</div> </p>
<div id="nav-links-container"> </div>
<input type="checkbox" id="check"> <input class="menu-btn" type="checkbox" id="menu-btn" />
<label for="check" class="checkbtn"> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<img src="img/bars.png" loading="lazy" height="17" width="25" alt="Bars"/> <ul class="nav-menu">
</label>
<a onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
<ul id="navList">
<li><a class="navlink" onclick="uncheck('check')" href="#event">Event</a></li> <li><a class="navlink" onclick="uncheck('check')" href="#event">Event</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#workshops">Workshops</a></li> <li><a class="navlink" onclick="uncheck('check')" href="#workshops">Workshops</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li> <li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li> <li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="./rules">Rules<svg id="nav-icon" class="new-tab-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><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></a></li> <li><a class="navlink" onclick="uncheck('check')" href="./rules">Rules<svg id="nav-icon" class="new-tab-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></a></li>
</ul> </ul>
<a onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
</div> </div>
</nav> </nav>
<!--Front Page--> <!--Front Page-->

1
js/general.js
View File

@ -328,6 +328,7 @@ function save() {
} }
window.onload = function() { window.onload = function() {
load(); load();
document.getElementById('#menu-btn').checked = false;
}; };
function load() { function load() {
for (i = 0; i < checkboxes.length; i++) { for (i = 0; i < checkboxes.length; i++) {