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

Fixed Mobile functionality

Browse Source
This commit is contained in:
James Dinh 2022-06-09 16:55:46 -07:00
parent fc7559c6df
commit b0ccaa1408
3 changed files with 62 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
css/general.css
View File

@ -37,6 +37,16 @@ nav * {
#nav-logo { #nav-logo {
margin-top: 5px; margin-top: 5px;
height: 50px;
width: 258px;
}
#nav-logo-div {
height: 50px;
width: 258px;
margin: none;
display: inline block;
position: fixed;
} }
#nav-logo-a { #nav-logo-a {
@ -132,12 +142,26 @@ nav li a:focus::after{
transition: 0.5s; transition: 0.5s;
} }
.notification { /* .notification {
position: absolute; position: absolute;
text-align: center; text-align: center;
margin: auto; margin: auto;
z-index: 100; z-index: 100;
visibility: hidden; visibility: hidden;
} */
@keyframes dropdown{
0% {
opacity: 0;
}
30% {
transform: translateY(-30px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
} }
/* Responsive Functions */ /* Responsive Functions */
@ -152,7 +176,7 @@ nav li a:focus::after{
margin-top: 58px; margin-top: 58px;
margin-right: 0; margin-right: 0;
background: rgb(24, 24, 24); background: rgb(24, 24, 24);
top: -100%; visibility: hidden;
text-align: center; text-align: center;
} }
nav ul li { nav ul li {
@ -161,14 +185,12 @@ nav li a:focus::after{
line-height: 30px; line-height: 30px;
} }
#check:checked ~ul { #check:checked ~ul {
top: 0; visibility: visible;
animation: dropdown 1s ease;
} }
.checkbtn { .checkbtn {
display: inline-block; display: inline-block;
} }
#card-container {
grid-template-columns: repeat(1, 1fr) !important;
}
#prize-logo, .podium-label { #prize-logo, .podium-label {
transform: scale(0.9); transform: scale(0.9);
font-size: 16px !important; font-size: 16px !important;
@ -189,8 +211,13 @@ nav li a:focus::after{
} }
} }
@media (max-width: 470px) { @media (max-width: 470px) {
.checkbtn { /* .checkbtn {
display: none; display: none;
} */
#nav-logo {
content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico);
height: 50px;
width: 50px;
} }
#logo { #logo {
height: 300px; height: 300px;
@ -243,8 +270,8 @@ nav li a:focus::after{
/* Header */ /* Header */
#header-background { #header-background {
background-image: url(/img/mountains-1.jpg); background-image: url(/img/mountains-1.jpg);
background-position: center; /* background-position: center; */
background-size: cover; /* background-size: cover; */
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
height: 100vh; height: 100vh;
@ -1051,7 +1078,7 @@ section {
#map-article { #map-article {
margin: 20px auto 0; margin: 20px auto 0;
width: 90%; width: 90%;
max-width: 1000px; max-width: 1100px;
} }
#cal-container { #cal-container {
@ -1065,7 +1092,7 @@ section {
} }
.cal-card { .cal-card {
width: 33%; width: 33.3%;
border-radius: 7px; border-radius: 7px;
border: 1px solid white; border: 1px solid white;
} }

18
index.html
View File

@ -41,7 +41,7 @@
<!--Nav--> <!--Nav-->
<nav id="navBar"> <nav id="navBar">
<a id="nav-logo-a" href="./"> <a id="nav-logo-a" href="./">
<img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" height="50" width="258" alt="logo"/> <img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
</a> </a>
<div id="nav-links-container"> <div id="nav-links-container">
<input type="checkbox" id="check"> <input type="checkbox" id="check">
@ -107,27 +107,27 @@
<div class="input-flex-container"> <div class="input-flex-container">
<div id="timeline-left-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></div> <div id="timeline-left-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></div>
<input id="t1" class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked> <input id="t1" class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked>
<div onclick="checkt('t1')" class="dot-info" data-description="1"> <div onclick="check('t1')" class="dot-info" data-description="1">
<span class="year">8/12 4:00pm</span> <span class="year">8/12 4:00pm</span>
<span class="label">Opening Ceremony</span> <span class="label">Opening Ceremony</span>
</div> </div>
<input id="t2" class="timeline-input" type="radio" name="timeline-dot" data-description="2"> <input id="t2" class="timeline-input" type="radio" name="timeline-dot" data-description="2">
<div onclick="checkt('t2')" class="dot-info" data-description="2"> <div onclick="check('t2')" class="dot-info" data-description="2">
<span class="year">8/12 5:00pm</span> <span class="year">8/12 5:00pm</span>
<span class="label">Hacking Begins</span> <span class="label">Hacking Begins</span>
</div> </div>
<input id="t3" class="timeline-input" type="radio" name="timeline-dot" data-description="3"> <input id="t3" class="timeline-input" type="radio" name="timeline-dot" data-description="3">
<div onclick="checkt('t3')" class="dot-info" data-description="3"> <div onclick="check('t3')" class="dot-info" data-description="3">
<span class="year">8/14 12:00pm</span> <span class="year">8/14 12:00pm</span>
<span class="label">Hacking Ends</span> <span class="label">Hacking Ends</span>
</div> </div>
<input id="t4" class="timeline-input" type="radio" name="timeline-dot" data-description="4"> <input id="t4" class="timeline-input" type="radio" name="timeline-dot" data-description="4">
<div onclick="checkt('t4')" class="dot-info" data-description="4"> <div onclick="check('t4')" class="dot-info" data-description="4">
<span class="year">8/14 2:00pm</span> <span class="year">8/14 2:00pm</span>
<span class="label">Project Presentations</span> <span class="label">Project Presentations</span>
</div> </div>
<input id="t5" class="timeline-input" type="radio" name="timeline-dot" data-description="5"> <input id="t5" class="timeline-input" type="radio" name="timeline-dot" data-description="5">
<div onclick="checkt('t5')" class="dot-info" data-description="5"> <div onclick="check('t5')" class="dot-info" data-description="5">
<span class="year">8/14 3:30pm</span> <span class="year">8/14 3:30pm</span>
<span class="label">Awards Ceremony</span> <span class="label">Awards Ceremony</span>
</div> </div>
@ -210,7 +210,7 @@
<div id="checklist"> <div id="checklist">
<input id="01" onclick="save()" type="checkbox" name="r" value="1"> <input id="01" onclick="save()" type="checkbox" name="r" value="1">
<label for="01"> <label for="01">
<p class="title">1. Sign up w/ this <a onclick="check01()" class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7" title="Signup Form">form</a></p> <p class="title">1. Sign up w/ this <a onclick="check('01')" class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7" title="Signup Form">form</a></p>
</label> </label>
<label for="01"> <label for="01">
<p class="step-desc">- These questions are used to gauge your experience and skills so we can pair you with others</p> <p class="step-desc">- These questions are used to gauge your experience and skills so we can pair you with others</p>
@ -223,7 +223,7 @@
<div id="checklist"> <div id="checklist">
<input id="02" onclick="save()" type="checkbox" name="r" value="2"> <input id="02" onclick="save()" type="checkbox" name="r" value="2">
<label for="02"> <label for="02">
<p class="title">2. Join the <a onclick="check02()" class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p> <p class="title">2. Join the <a onclick="check('02')" class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p>
</label> </label>
<label for="02"> <label for="02">
<p class="step-desc">- Please change your nickname to your First and Last name</p> <p class="step-desc">- Please change your nickname to your First and Last name</p>
@ -558,7 +558,7 @@
<div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div> <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
<div class="team-description"> <div class="team-description">
<h4 class="person-name">Aadhavan Magesh</h4> <h4 class="person-name">Aadhavan Magesh</h4>
<h5 class="person-subtitle">Head of Administration</h5> <h5 class="person-subtitle">Administrative Manager</h5>
<h5 class="person-contact"><span class="discord-text">Discord</span>: Skymon<span class="discord-tag">#0438</span><br><a class="link" target="_blank" href="mailto:aadhavan.magesh@gmail.com" title="Email">aadhavan.magesh@gmail.com</a></h5> <h5 class="person-contact"><span class="discord-text">Discord</span>: Skymon<span class="discord-tag">#0438</span><br><a class="link" target="_blank" href="mailto:aadhavan.magesh@gmail.com" title="Email">aadhavan.magesh@gmail.com</a></h5>
</div> </div>
</div> </div>

14
js/data_checkbox.js
View File

@ -1,5 +1,5 @@
var i; var i;
var checkboxes = document.querySelectorAll('input[type=checkbox]'); var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]');
function save() { function save() {
for (i = 0; i < checkboxes.length; i++) { for (i = 0; i < checkboxes.length; i++) {
localStorage.setItem(checkboxes[i].value, checkboxes[i].checked); localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
@ -13,13 +13,7 @@ function load() {
checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false; checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
} }
} }
function check01() { function check(id) {
document.getElementById('01').checked = true;
}
function check02() {
document.getElementById('02').checked = true;
}
function checkt(id) {
document.getElementById(id).checked = true; document.getElementById(id).checked = true;
} }
function notifitcation_popup() { function notifitcation_popup() {
@ -28,10 +22,10 @@ function notifitcation_popup() {
{ {
if (localStorage.getItem(checkboxes[i].value) != true) { if (localStorage.getItem(checkboxes[i].value) != true) {
verify = false; verify = false;
break;
} }
} }
if (verify) { if (verify) {
document.getElementById("notification").style.visibility = "visible"; document.getElementById('notification').style.visibility = visible;
} }
} }