mirror of
https://github.com/cupcakearmy/fantus.git
synced 2024-11-01 04:54:13 +01:00
79 lines
1.6 KiB
Stylus
79 lines
1.6 KiB
Stylus
@require './utils.styl'
|
|
|
|
$foregound=#ffffff
|
|
|
|
menu-item-hover()
|
|
box-shadow: 0 1em 0 -.75em $foregound
|
|
box-sizing: content-box
|
|
transform: translateY(.25em)
|
|
|
|
nav.main
|
|
font-family: 'Space Mono', monospace
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
z-index: 5
|
|
width: 100vw
|
|
padding: 1.5em
|
|
background: rgb(0,0,0)
|
|
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%)
|
|
|
|
#icon
|
|
height: 2.5em
|
|
width: 2.5em
|
|
object-fit: contain
|
|
z-index 10
|
|
cursor pointer
|
|
display: none
|
|
|
|
.home
|
|
color: $foregound
|
|
font-weight: bold
|
|
font-size: 2em
|
|
cursor pointer
|
|
|
|
.links
|
|
&>div
|
|
color: $foregound
|
|
padding: .5em 0.75em
|
|
font-weight: bold
|
|
box-sizing: content-box
|
|
cursor pointer
|
|
transition: all ease 100ms
|
|
|
|
&:hover
|
|
menu-item-hover()
|
|
|
|
&:not(:hover)
|
|
&>.active
|
|
menu-item-hover()
|
|
|
|
>.home
|
|
display: none
|
|
|
|
@media (max-width: $mobile-width)
|
|
nav.main
|
|
#icon
|
|
display: initial
|
|
|
|
.links
|
|
position: fixed
|
|
display: none
|
|
top: 0
|
|
left: 0
|
|
background: rgba(0, 0, 0, 1)
|
|
height: 100vh
|
|
width: 100vw
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: center
|
|
font-size: 1.25em
|
|
|
|
&.open
|
|
display: flex
|
|
|
|
& .home
|
|
display: initial
|
|
|
|
&>div
|
|
margin: .5em 0 |