blob: 545743f337b108808f051b8e827369e1cee49f94 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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
|
