Added Responsiveness
This commit is contained in:
parent
7db0836bc8
commit
44b0c0182b
@ -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
BIN
img/.DS_Store
vendored
Normal file
Binary file not shown.
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user