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-17 01:43:06 -07:00
parent 7db0836bc8
commit 44b0c0182b
6 changed files with 74 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

49
css/general.css
View File

@ -153,12 +153,12 @@ nav li a:focus::after{
#banner { #banner {
height: 100%; height: 100%;
/* width: 50%; */ /* width: 50%; */
width: 500px; width: 380px;
margin: auto; margin: auto;
font-size: 20px; font-size: 20px;
display: inline-flex; display: inline-flex;
position: relative; position: relative;
justify-content: center; justify-content: left;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
} }
@ -171,7 +171,14 @@ nav li a:focus::after{
#timer { #timer {
color: rgb(184, 184, 184); color: rgb(184, 184, 184);
animation: blinking 2s infinite; animation: blinking 3s infinite;
background-color: rgb(57, 57, 57);
border-radius: 10px;
padding: 2px 5px;
}
.tooltip-nav {
text-decoration: none;
} }
@keyframes blinking { @keyframes blinking {
@ -179,13 +186,13 @@ nav li a:focus::after{
opacity: 1; opacity: 1;
} }
50% { 50% {
opacity: 0.7; opacity: 0.8;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
@keyframes headline { /* @keyframes headline {
0% { 0% {
transform: translateX(600px); transform: translateX(600px);
} }
@ -195,7 +202,7 @@ nav li a:focus::after{
100% { 100% {
transform: translateX(-600px); transform: translateX(-600px);
} }
} } */
/* .notification { /* .notification {
position: absolute; position: absolute;
@ -223,7 +230,7 @@ nav li a:focus::after{
} }
/* Responsive Functions */ /* Responsive Functions */
@media (max-width: 1250px) { @media (max-width: 1150px) {
#banner { #banner {
display: none; display: none;
} }
@ -272,6 +279,15 @@ nav li a:focus::after{
height: 300px !important; height: 300px !important;
width: 300px !important; width: 300px !important;
} }
#banner {
display: inline-flex;
width: 300px;
}
}
@media (max-width: 750px) {
#banner {
display: none;
}
} }
@media (max-width: 500px) { @media (max-width: 500px) {
#event, #rules, #prizes, #team { #event, #rules, #prizes, #team {
@ -295,19 +311,18 @@ nav li a:focus::after{
transform: scale(0.9); transform: scale(0.9);
} }
} }
@media (max-height: 500px) { @media (max-height: 600px) {
#logo { #logo {
height: 200px !important; transform: scale(0.8);
width: 200px !important;
} }
#header-subtitle-date { #header-subtitle-date {
height: 25px; transform: translateY(-50px);
font-size: 15px;
} }
#header-subtitle-spots { #spots-container {
height: 25px; transform: translateY(-50px);
font-size: 15px; }
padding: 3px !important; #line-header {
transform: translateY(-50px);
} }
#entrance-arrow { #entrance-arrow {
visibility: hidden; visibility: hidden;
@ -1780,7 +1795,7 @@ section {
} }
} }
abbr[title] { .tooltip {
text-decoration: underline dotted; text-decoration: underline dotted;
cursor: help; cursor: help;
} }

BIN
img/.DS_Store vendored Normal file
View File

Binary file not shown.

6
index.html
View File

@ -62,7 +62,7 @@
<li><a onclick="uncheck('check')" href="#team">Team</a></li> <li><a onclick="uncheck('check')" href="#team">Team</a></li>
</ul> </ul>
<div id="banner"> <div id="banner">
<p id="banner-text">Next event:<br>Opening Ceremony, <span id="timer"></span></p> <p id="banner-text">Next event:<br>Opening Ceremony <abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr></p>
</div> </div>
</div> </div>
</nav> </nav>
@ -419,7 +419,7 @@
</div> </div>
</article> </article>
<article id="map-div"> <article id="map-div">
<h2 class="map-title">Map</h2> <h2 class="map-title">Location</h2>
<div id="map-container"> <div id="map-container">
<div id="map"></div> <div id="map"></div>
</div> </div>
@ -448,7 +448,7 @@
<div class="rules-card" id="rules-2"> <div class="rules-card" id="rules-2">
<p class="rules-title">Do not plagiarize</p> <p class="rules-title">Do not plagiarize</p>
<p> <p>
- You are allowed to use existing libraries and packages with a valid license and give credit when credit is due (required, unless under Creative Commons or <abbr title="Open-source software is computer software that is released under a license in which the copyright holder grants users the rights to use, study, change, and distribute the software and its source code to anyone and for any purpose">Open Source Licensing</abbr>) - You are allowed to use existing libraries and packages with a valid license and give credit when credit is due (required, unless under Creative Commons or <abbr class="tooltip" title="Open-source software is computer software that is released under a license in which the copyright holder grants users the rights to use, study, change, and distribute the software and its source code to anyone and for any purpose">Open Source Licensing</abbr>)
<br> <br>
- You may also use old projects as frameworks for your product, but you cannot work on any material that is related to the hackathon before the event - You may also use old projects as frameworks for your product, but you cannot work on any material that is related to the hackathon before the event
</p> </p>

56
js/timer.js
View File

@ -1,29 +1,29 @@
// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp // SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
// Set the date we're counting down to // Set the date we're counting down to
var countDownDate = new Date("Aug 12, 2022 16:00:00").getTime(); var countDownDate = new Date("Aug 12, 2022 16:00:00").getTime();
// Update the count down every 1 second // Update the count down every 1 second
var x = setInterval(function() { var x = setInterval(function() {
// Get today's date and time // Get today's date and time
var now = new Date().getTime(); var now = new Date().getTime();
// Find the distance between now and the count down date // Find the distance between now and the count down date
var distance = countDownDate - now; var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds // Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000); var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo" // Display the result in the element with id="demo"
document.getElementById("timer").innerHTML = days + "d " + hours + "h"; document.getElementById("timer").innerHTML = days + "d " + hours + "h";
// + minutes + "m " + seconds + "s "; // + minutes + "m " + seconds + "s ";
// If the count down is finished, write some text // If the count down is finished, write some text
if (distance < 0) { if (distance < 0) {
clearInterval(x); clearInterval(x);
document.getElementById("timer").innerHTML = "NOW"; document.getElementById("timer").innerHTML = "NOW";
} }
}, 1000); }, 1000);

22
sitemap.xml
View File

@ -1,16 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<urlset <urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"> http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com --> <!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
<url> <url>
<loc>https://gilroyhacks.com/</loc> <loc>https://gilroyhacks.com/</loc>
<lastmod>2022-06-13T21:30:01+00:00</lastmod> <lastmod>2022-06-13T21:30:01+00:00</lastmod>
</url> </url>
</urlset> </urlset>