hypothetical/resources/assets/less/elements/nav.less

128 lines
3.9 KiB
Text
Raw Normal View History

nav.navbar {
height: @nav_height;
margin-bottom: 0px;
padding-right: 10px;
background: linear-gradient(to right, transparent 0%, fade(@c_base, 40%) 25%, fade(@c_base, 50%) 50%, @c_base 100%);
border: none;
border-radius: 0px;
z-index: 1;
@media (max-width: @grid-float-breakpoint-max) {
height: @mobile_nav_height;
background: fade(@c_base, 55%);
}
.navbar-logo {
position: fixed;
top: 45px;
left: 63px;
width: 145px;
height: 145px;
background-image: url('/img/logo.png');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
transition: transform 200ms;
&:hover { transform: scale(1.03); }
&:active {
transition: transform 100ms;
transform: scale(1.01);
}
@media (max-width: @grid-float-breakpoint-max) {
top: 5px;
left: 10px;
width: 40px;
height: 40px;
}
@media (min-width: @grid-float-breakpoint) {
@logoAnimSpeed: 400ms;
transition: transform 200ms, top @logoAnimSpeed, left @logoAnimSpeed, width @logoAnimSpeed, height @logoAnimSpeed;
&:active { transition: transform 100ms, top @logoAnimSpeed, left @logoAnimSpeed, width @logoAnimSpeed, height @logoAnimSpeed; }
&.scaled {
top: 10px;
left: 15px;
width: @nav_height - 20;
height: @nav_height - 20;
}
}
}
#navbar {
box-shadow: none;
border: none;
ul.nav {
li {
a {
padding: 0px 15px;
user-select: none;
color: @c_text_light;
text-decoration: none;
text-transform: uppercase;
font-size: 36px;
font-weight: 500;
font-stretch: ultra-condensed;
line-height: @nav_height;
transition: color 100ms;
@media (max-width: 1250px) { font-size: 28px; }
@media (max-width: 1050px) { font-size: 24px; }
&:after {
content: "";
display: block;
position: absolute;
bottom: calc(50% ~"-" 0.8em);
left: 50%;
transform: translateX(-50%);
width: calc(100% ~"-" 20px);
height: 3px;
background-color: @c_text_light;
opacity: 0;
transition: opacity 200ms;
@media (max-width: @grid-float-breakpoint-max) { bottom: 0px; }
}
}
&.active a, &.active:hover a, &:hover a, &:focus a { background-color: transparent; }
&:hover a { color: darken(@c_text_light, 25%); }
&.active a:after { opacity: 1; }
}
}
@media (max-width: @grid-float-breakpoint-max) {
position: relative;
bottom: 4px;
width: 100vw;
padding-bottom: 5px;
background-color: fade(@c_base, 55%);
ul.nav li a {
line-height: 40px;
font-size: 18px;
}
}
}
.navbar-toggle {
position: relative;
bottom: 2px;
left: 20px;
border: none;
&, &:hover, &:focus { background-color: transparent; }
.icon-bar {
width: 27px;
height: 4px;
background-color: @c_text_light;
transition: background-color 150ms;
}
&:hover .icon-bar { background-color: darken(@c_text_light, 25%); }
}
}