二〇二六年四月二十一日

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