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

Added responsiveness

Browse Source
This commit is contained in:
James Dinh 2022-06-07 01:40:29 -07:00
parent 7029dfc36a
commit 4b77949983
3 changed files with 80 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
css/general.css
View File

@ -527,6 +527,11 @@ section {
z-index: 0; z-index: 0;
} }
#timeline-left-arrow {
position: absolute;
float: left;
}
.timeline-input { .timeline-input {
width: 22px; width: 22px;
height: 22px; height: 22px;
@ -536,9 +541,22 @@ section {
display: block; display: block;
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
animation: pulse-gray 2s infinite;
}
@keyframes pulse-gray {
0% {
box-shadow: 0 0 0 0 rgba(110, 110, 110, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
}
} }
.timeline-input:focus { .timeline-input:focus {
outline: none; animation: pulse-gray 0s;
} }
.timeline-input::before, .timeline-input::after { .timeline-input::before, .timeline-input::after {
content: ""; content: "";
@ -548,14 +566,20 @@ section {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
background-color: #2C3E50; background-color: #2C3E50;
width: 80px; width: 64px;
height: 5px; height: 5px;
} }
.timeline-input::before { .timeline-input::before {
right: calc(2vw); left: -64px;
} }
/* #t1::before {
content: "<";
color: white;
font-size: 30px;
} */
.timeline-input::after { .timeline-input::after {
left: calc(1vw); right: -64px;
} }
.timeline-input:checked { .timeline-input:checked {
background-color: #2C3E50; background-color: #2C3E50;
@ -582,7 +606,7 @@ section {
visibility: hidden; visibility: hidden;
position: relative; position: relative;
z-index: -1; z-index: -1;
left: calc((((80vw - 25px) / 20) * -1) - 1px); right: 48px;
} }
.dot-info span { .dot-info span {
visibility: visible; visibility: visible;
@ -592,6 +616,7 @@ section {
.dot-info span.year { .dot-info span.year {
bottom: -30px; bottom: -30px;
right: -0.2vw; right: -0.2vw;
cursor: pointer;
} }
.dot-info span.label { .dot-info span.label {
top: -56px; top: -56px;
@ -599,6 +624,7 @@ section {
transform: rotateZ(-45deg); transform: rotateZ(-45deg);
width: 70px; width: 70px;
text-indent: -10px; text-indent: -10px;
cursor: pointer;
} }
#timeline-descriptions-wrapper { #timeline-descriptions-wrapper {
@ -651,23 +677,6 @@ section {
.timeline-input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] { .timeline-input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
display: block; display: block;
} }
@media (max-width: 2250px) {
.timeline-input::before {
left: -37.5px;
}
.timeline-input::after {
right: -37.5px;
}
.dot-info {
left: calc((((1000px - 25px) / 20) * -1) - 1px);
}
#timeline-descriptions-wrapper {
margin-left: -37.5px;
}
}
@media (max-width: 630px) { @media (max-width: 630px) {
.flex-parent { .flex-parent {
justify-content: initial; justify-content: initial;
@ -794,6 +803,11 @@ section {
font-size: 16px; font-size: 16px;
} }
.step-desc {
color: gray;
width: 298px;
}
/* Steps dot */ /* Steps dot */
.title::before { .title::before {
content: ""; content: "";
@ -840,7 +854,6 @@ section {
height: 2px; height: 2px;
width: 8px; width: 8px;
left: -35px; left: -35px;
background: var(--check);
border-radius: 2px; border-radius: 2px;
} }
#checklist label:after { #checklist label:after {
@ -1065,7 +1078,7 @@ section {
} }
.cal-subtitle { .cal-subtitle {
color: #8d8d8d; color: rgb(150, 150, 150);
} }
.cal-title { .cal-title {
@ -1091,7 +1104,7 @@ section {
.event-time { .event-time {
margin-right: 20px; margin-right: 20px;
color: #8d8d8d; color: gray;
} }
#map-title { #map-title {
@ -1111,6 +1124,7 @@ section {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
z-index: 0;
} }
#map-iframe { #map-iframe {

54
index.html
View File

@ -62,7 +62,7 @@
<div id="header"> <div id="header">
<img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="400" width="400" alt="logo"/> <img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="400" width="400" alt="logo"/>
<hr id="line-header"> <hr id="line-header">
<h2 id="header-subtitle-date">Aug 12 - 14</h2> <h2 id="header-subtitle-date">Aug 12 - 141</h2>
<div id="spots-container"> <div id="spots-container">
<div class="blob green" aria-hidden="true"></div> <div class="blob green" aria-hidden="true"></div>
<h2 id="header-subtitle-spots">40 spots remaining</h2> <h2 id="header-subtitle-spots">40 spots remaining</h2>
@ -103,28 +103,28 @@
<span class="caption">Click on each dot for more info</span> <span class="caption">Click on each dot for more info</span>
<div class="flex-parent"> <div class="flex-parent">
<div class="input-flex-container"> <div class="input-flex-container">
<input 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 class="dot-info" data-description="1"> <div onclick="checkt('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 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 class="dot-info" data-description="2"> <div onclick="checkt('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 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 class="dot-info" data-description="3"> <div onclick="checkt('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 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 class="dot-info" data-description="4"> <div onclick="checkt('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 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 class="dot-info" data-description="5"> <div onclick="checkt('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>
@ -204,10 +204,12 @@
<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 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="check01()" 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>
</label> </label>
</div> </div>
<p>- These questions are used to gauge your experience and skills so we can pair you with others</p>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -215,10 +217,12 @@
<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 class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p> <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>
</label>
<label for="02">
<p class="step-desc">- Please change your nickname to your First and Last name</p>
</label> </label>
</div> </div>
<p>- Please change your nickname to your First and Last name</p>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -228,8 +232,10 @@
<label for="03"> <label for="03">
<p class="title">3. Create/join a team</p> <p class="title">3. Create/join a team</p>
</label> </label>
<label for="03">
<p class="step-desc">- Join teams in the Discord Server!</p>
</label>
</div> </div>
<p>- Join teams in the Discord Server!</p>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -239,12 +245,14 @@
<label for="04"> <label for="04">
<p class="title">4. Start discussing ideas for a project</p> <p class="title">4. Start discussing ideas for a project</p>
</label> </label>
<label for="04">
<p class="step-desc">
- Between now and the start of the hackathon is a great time to come up with project ideas & download any software you may need
<br>
- However, you can't start working on the project until the hackathon begins
</p>
</label>
</div> </div>
<p>
- Between now and the start of the hackathon is a great time to come up with project ideas & download any software you may need
<br>
- However, you can't start working on the project until the hackathon begins
</p>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -254,8 +262,10 @@
<label for="05"> <label for="05">
<p class="title">5. Wait for the hackathon to start!</p> <p class="title">5. Wait for the hackathon to start!</p>
</label> </label>
<label for="05">
<p class="step-desc">- Mark your calendars, Aug 12 - 14</p>
</label>
</div> </div>
<p>- Mark your calendars, Aug 12 - 14</p>
</div> </div>
</div> </div>
</div> </div>

9
js/data_checkbox.js
View File

@ -12,4 +12,13 @@ function load() {
for (i = 0; i < checkboxes.length; i++) { for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false; 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) {
document.getElementById(id).checked = true;
} }