diff --git a/css/general.css b/css/general.css index ced1f28..8bdf527 100644 --- a/css/general.css +++ b/css/general.css @@ -18,6 +18,138 @@ html { box-sizing: border-box; } +.nav-container { + box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); + position: fixed; + width: 100%; + z-index: 3; +} + +/* menu */ + +.nav-container .nav-menu { + margin: 0; + padding: 0; + list-style: none; + overflow: hidden; + clear: none; + float: right; + max-height: none; + margin-right: 110px; +} + +.nav-container .nav-menu li { + display: inline-block; + line-height: 30px; + margin: 10px 7px; + padding: 3px 11px; + cursor: pointer; +} + +/* menu icon */ + +.nav-container .menu-icon { + display: none; +} + +.nav-container .menu-icon .navicon { + background: rgb(123, 123, 123); + display: block; + height: 2px; + position: relative; + transition: background .2s ease-out; + width: 18px; +} + +.nav-container .menu-icon .navicon:before, +.nav-container .menu-icon .navicon:after { + background: rgb(123, 123, 123); + content: ''; + display: block; + height: 100%; + position: absolute; + transition: all .2s ease-out; + width: 100%; +} + +.nav-container .menu-icon .navicon:before { + top: 5px; +} + +.nav-container .menu-icon .navicon:after { + top: -5px; +} + +/* menu btn */ + +.nav-container .menu-btn { + display: none; +} + +.nav-container .menu-btn:checked ~ .nav-menu { + max-height: 300px; + background-color: rgb(24, 24, 24); + transition: 0.2s; +} + +.nav-container .menu-btn:not(:checked) ~ .nav-menu { + animation: slow-fade 1s ease; +} + +.nav-container .menu-btn:checked ~ .menu-icon .navicon { + background: transparent; +} + +.nav-container .menu-btn:checked ~ .menu-icon .navicon:before { + transform: rotate(-45deg); +} + +.nav-container .menu-btn:checked ~ .menu-icon .navicon:after { + transform: rotate(45deg); +} + +.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, +.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { + top: 0; +} + +@keyframes slow-fade { + 0% { + background-color: rgb(24, 24, 24); + } + 90% { + background-color: unset; + } +} + +@media (max-width: 950px) { + /* .nav-container { + background-color: unset; + } */ + .nav-container .nav-menu { + clear: both; + max-height: 0; + transition: max-height .2s ease-out; + text-align: center; + width: 100%; + margin-right: 0; + } + .nav-container .nav-menu li { + display: block; + } + .nav-container .menu-icon { + cursor: pointer; + display: inline-block; + float: right; + padding: 28px 20px; + position: relative; + user-select: none; + } + #sign-up { + right: 50px !important; + } +} + nav { height: 59px; width: 100%; @@ -30,7 +162,6 @@ nav { nav * { padding: 0; - margin: 0px 5px; list-style: none; box-sizing: border-box; z-index: 100; @@ -54,19 +185,6 @@ nav * { margin-left: 10px; } -nav ul { - float: right; - margin-right: 20px; -} - -nav ul li { - display: inline-block; - line-height: 30px; - margin: 10px 7px; - padding: 3px 5px; - cursor: pointer; -} - .navlink { color:rgb(233, 203, 104); font-size: 18px; @@ -119,7 +237,6 @@ nav ul li { padding: 0; height: 59px; float: right; - flex-wrap: nowrap; flex-direction: row-reverse; align-content: stretch; } @@ -131,18 +248,19 @@ nav ul li { #sign-up { padding: 6px 7px; margin: 14px 15px 14px 4px; - + width: 72px; border-radius: 5px; font-size: 16px; background-color: rgb(140, 42, 165); color: bisque; - display: flex; - place-items: center; + position: fixed; + display: inline-flex; + right: 10px; } #sign-up:hover { - transform: scale(1.05); - background-color: blueviolet; + transform: scale(1.03); + filter: brightness(1.05); cursor: pointer; transition: 0.5s; } @@ -163,7 +281,7 @@ nav ul li { } #event-name { - margin: 0px; + margin-right: 10px; } #timer { @@ -172,7 +290,9 @@ nav ul li { background-color: rgb(57, 57, 57); border-radius: 5px; padding: 2px 5px; + margin-left: 5px; position: relative; + width: fit-content } #timer::after { @@ -284,7 +404,8 @@ nav ul li { .checkbtn { display: inline-block; } - nav ul { + + /* nav ul { position: fixed; width: 100%; height: 300px; @@ -302,10 +423,11 @@ nav ul li { #check:checked ~ul { visibility: visible; animation: dropdown 0.5s ease; - } + } */ .checkbtn { display: inline-block; } + #prize-logo, .podium-label { transform: scale(0.9); font-size: 16px !important; @@ -333,6 +455,26 @@ nav ul li { } } @media (max-width: 750px) { + #banner { + display: block; + top: 1px; + max-width: 200px; + min-width: 150px; + width: auto; + margin-left: 300px; + } + #timer-container { + display: block; + text-align: center; + } + #timer { + display: inline-block; + position: relative; + margin: 3px auto 0; + padding: 0px 5px; + } +} +@media (max-width: 620px) { #banner { display: none; } @@ -359,6 +501,28 @@ nav ul li { #prizes-container { transform: scale(0.9); } + #banner { + display: block; + margin-left: 75px; + } +} +@media (max-width: 400px) { + #nav-logo { + content: url(/img/logo_mini.png); + height: 45px; + width: 45px; + margin: 7px 0 0 5px; + } + #logo { + height: 2300px; + width: 230px; + } + #prizes-container { + transform: scale(0.9); + } + #banner { + display: none; + } } @media (max-height: 550px) { #logo { @@ -863,7 +1027,7 @@ section { } .slide { - min-width: 340px; + /* min-width: 340px; */ max-width: 600px; min-height: 200px; max-height: 400px; @@ -2631,4 +2795,4 @@ footer li { /* Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and coding extravaganza with tons of other like-minded students sound (at the least bit) interesting to you? Gilroy Hacks is all about allowing passionate students showcase their skills and teaching new concepts to -newcomers. If this sounds like you, then all aboard the Hackathon train! */ \ No newline at end of file +newcomers. If this sounds like you, then all aboard the Hackathon tra \ No newline at end of file diff --git a/index.html b/index.html index 52ceb2a..55e4464 100644 --- a/index.html +++ b/index.html @@ -76,27 +76,25 @@ diff --git a/js/general.js b/js/general.js index ae8a470..5ff72ba 100644 --- a/js/general.js +++ b/js/general.js @@ -328,6 +328,7 @@ function save() { } window.onload = function() { load(); + document.getElementById('#menu-btn').checked = false; }; function load() { for (i = 0; i < checkboxes.length; i++) {