fantus/styles/menu.styl

79 lines
1.6 KiB
Stylus
Raw Normal View History

2020-01-15 23:35:39 +00:00
@require './utils.styl'
2020-01-12 17:34:57 +00:00
$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%)
2020-01-15 23:35:39 +00:00
#icon
height: 2.5em
width: 2.5em
object-fit: contain
z-index 10
cursor pointer
display: none
.home
2020-01-12 17:34:57 +00:00
color: $foregound
font-weight: bold
font-size: 2em
cursor pointer
2020-01-15 23:35:39 +00:00
.links
2020-01-12 17:34:57 +00:00
&>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()
2020-01-15 23:35:39 +00:00
>.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
2020-01-16 00:23:50 +00:00
font-size: 1.25em
2020-01-15 23:35:39 +00:00
&.open
display: flex
& .home
display: initial
&>div
margin: .5em 0