diff options
Diffstat (limited to 'themes/theme/source/css/partials/header.styl')
| -rw-r--r-- | themes/theme/source/css/partials/header.styl | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/themes/theme/source/css/partials/header.styl b/themes/theme/source/css/partials/header.styl new file mode 100644 index 00000000..545743f3 --- /dev/null +++ b/themes/theme/source/css/partials/header.styl @@ -0,0 +1,121 @@ +.header + position fixed + top 0 + left 0 + right 0 + z-index 100 + background $color-glass + backdrop-filter blur(12px) + -webkit-backdrop-filter blur(12px) + border-bottom 1px solid $color-border + text-style(header) + +@supports not (backdrop-filter: blur(12px)) + .header + background $color-background + +@media (max-width: 688px) + @supports not (backdrop-filter: blur(12px)) + .header-inner .site-nav .menu-list + background $color-background + +.header-inner + display flex + flex-wrap nowrap + align-items center + height $header-height + + #menu-btn + display none + + .site-nav + flex-grow 1 + overflow-x auto + +.site-brand-container + a + font-weight 400 + color $color-text-primary + +.menu-list + text-align right + display flex + + &:before + content "" + flex-grow 1 + +.menu-item + position relative + margin-left $margin-l-0 + underline-motion(header) + +.menu-item-active:after + border-bottom solid $line-secondary $color-accent + width 100% + +.logo-img + max-height $line-height-heading-h1 + width auto + max-width 100% + display flex + +@media (max-width: 688px) + .header + overflow visible + + .header-inner + flex-wrap wrap + align-items center + height $header-height + padding-top 0 + padding-bottom 0 + + #menu-btn + display flex !important + align-items center + justify-content flex-end + width 50% + height 100% + cursor pointer + color $color-text-primary + transition color $transition-duration ease + + &:hover + color $color-accent + + .site-brand-container + display flex + align-items center + width 50% + height 100% + + .site-nav + width 100% + + .menu-list + display flex + flex-direction column + max-height 0 + overflow hidden + margin-top 0 + background $color-glass + backdrop-filter blur(12px) + -webkit-backdrop-filter blur(12px) + border-top 1px solid $color-border + transition max-height 300ms ease-out + text-align left + + &.active + max-height 400px + + .menu-item + margin 0 + padding $margin-m-0 $margin-m-1 + border-bottom 1px solid $color-border + + &:last-child + border-bottom none + + a + display block
\ No newline at end of file |