nova-web/web/static/css/navbar.sass
2023-07-25 03:38:53 +02:00

95 lines
1.7 KiB
Sass

@import '_vars'
nav
display: flex
align-items: center
position: relative
>.logo
display: inline-block
stroke: $primary-light
min-height: 40px
min-width: 40px
height: 40px
width: 40px
margin-right: 8px
transition: stroke 0.2s
>h1
font-weight: 500
font-size: 20px
user-select: none
mark
font-size: 1rem
position: relative
top: -3px
>span
flex-grow: 1
#menu
display: none
cursor: pointer
.link-menu
>a
font-size: 14px
font-weight: 600
margin-left: 2rem
text-decoration: none
transition: color 0.1s
&:hover
color: $primary-light
@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
background: $secondary
padding: 1rem 0
border-radius: $edge
backdrop-filter: blur(4px)
border: 1px solid $border
transition: transform 0.2s, opacity 0.2s
&.open
opacity: 1
transform: inherit
a
font-size: 20px
display: block
line-height: 3rem
nav
.logo
stroke: $primary-light
#menu
display: block
min-height: 32px
min-width: 32px
height: 32px
width: 32px
cursor: pointer
transition: 0.5s
&.active
transform: rotate(90deg)
@media (max-width: 400px)
nav
h1
display: none