nova-web/static/css/navbar.css

93 lines
1.6 KiB
CSS
Raw Normal View History

2023-07-21 23:50:17 +02:00
nav {
display: flex;
align-items: center;
position: relative;
}
nav > .logo {
display: inline-block;
stroke: #f45a88;
min-height: 40px;
min-width: 40px;
height: 40px;
width: 40px;
margin-right: 8px;
transition: stroke 0.2s;
}
nav > h1 {
font-weight: 500;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
nav > h1 mark {
font-size: 1rem;
position: relative;
top: -3px;
}
nav > span {
flex-grow: 1;
}
nav #menu {
display: none;
cursor: pointer;
}
.link-menu > a {
font-size: 14px;
font-weight: 600;
margin-left: 2rem;
text-decoration: none;
transition: color 0.1s;
}
.link-menu > a:hover {
color: #f45a88;
}
@media (max-width: 800px) {
.link-menu {
transform: scale(0.8) translateX(1rem);
opacity: 0;
z-index: 100;
width: 200px;
position: absolute;
top: 5rem;
right: 2rem;
2023-07-23 02:07:22 +02:00
background: #252a38;
2023-07-21 23:50:17 +02:00
padding: 1rem 0;
border-radius: 5px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border: 1px solid rgba(22, 29, 43, 0.6901960784);
transition: transform 0.2s, opacity 0.2s;
}
.link-menu.open {
opacity: 1;
transform: inherit;
}
.link-menu a {
font-size: 20px;
display: block;
line-height: 3rem;
}
nav .logo {
stroke: #f45a88;
}
nav #menu {
display: block;
min-height: 32px;
min-width: 32px;
height: 32px;
width: 32px;
cursor: pointer;
transition: 0.5s;
}
nav #menu.active {
transform: rotate(90deg);
}
}
@media (max-width: 400px) {
nav h1 {
display: none;
}
}/*# sourceMappingURL=navbar.css.map */