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

71
css/general.css
View File

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

18
index.html
View File

@ -41,7 +41,7 @@
<!--Nav-->
<nav id="navBar">
<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>
<div id="nav-links-container">
<input type="checkbox" id="check">
@ -107,27 +107,27 @@
<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>
<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="label">Opening Ceremony</span>
</div>
<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="label">Hacking Begins</span>
</div>
<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="label">Hacking Ends</span>
</div>
<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="label">Project Presentations</span>
</div>
<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="label">Awards Ceremony</span>
</div>
@ -210,7 +210,7 @@
<div id="checklist">
<input id="01" onclick="save()" type="checkbox" name="r" value="1">
<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 for="01">
<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">
<input id="02" onclick="save()" type="checkbox" name="r" value="2">
<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 for="02">
<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-description">
<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>
</div>
</div>

14
js/data_checkbox.js
View File

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