hexo-theme-stellar/source/css/_layout/partial/navbar.styl

74 lines
1.6 KiB
Stylus

.nav-wrap
padding: 0 1rem
z-index: 8
top: 0
background: var(--site-bg)
if hexo-config('style.site') && hexo-config('style.site.background-image')
position inherit
background: none
else
position: sticky
position: -webkit-sticky
margin-bottom: 1px
margin-top: -8px
&:after
content: ''
width: 'calc(100% - 2 * %s)' % 1rem
height: 2px
border-radius: 2px
position: absolute
bottom: 0
left: 1rem
background: var(--block-hover)
nav.cap
display: flex
overflow: scroll visible
scrollbar(0, 0)
>p
margin: 0
a
padding: .25rem 0.75rem
if hexo-config('style.site') && hexo-config('style.site.background-image')
margin: 10px 0.25rem 8px 0
else
margin: 10px 0.25rem 8px 0.25rem
line-height: 2
color: var(--text-p3)
border-radius: $border-button
font-weight: 500
white-space: nowrap
position: relative
z-index: 1
&:after
height: 2px
position: absolute
bottom: -8px
left: 0.75rem
right: 0.75rem
background: $color-theme
border-radius: 2px
pointer-events: none
&:hover
background: var(--block-hover)
&.active, &:hover
color: var(--text-p1)
&.active
background: var(--card)
box-shadow: $boxshadow-button
&.active:after
content: ''
a+a
margin-left: 4px
@media screen and (max-width: $device-mobile-max)
.nav-wrap
margin-top: 0
padding-left: 0
padding-right: 0
nav
a:first-child
margin-left: 1rem
a:last-child
margin-right: 1rem