Personal Site
Make the nav work on iOS/webkit (tested on webkit gtk)
+12
-7
+12
-7
src/components/Header.astro
+12
-7
src/components/Header.astro
···
70
70
border-image: var(--box-blr-png) 10 fill / 20px / 20px round;
71
71
margin: 0 20px 20px;
72
72
padding: 10px 20px;
73
-
overflow: auto clip;
74
73
height: 3rem; /* 2rem * 1.5 */
75
74
/* render over feed bg */
76
75
z-index: 2;
···
87
86
88
87
nav {
89
88
margin-inline: auto;
89
+
contain: inline-size;
90
+
width: 100%;
91
+
overflow: auto;
92
+
scrollbar-width: thin;
90
93
}
91
94
92
95
h1 {
···
100
103
flex-direction: row;
101
104
align-items: center;
102
105
justify-content: start;
103
-
max-width: 100%;
104
106
gap: 10px;
105
107
z-index: 999;
108
+
width: fit-content;
109
+
margin-inline: auto;
106
110
107
111
& > li {
108
112
display: flex;
···
133
137
details {
134
138
summary {
135
139
cursor: pointer;
140
+
text-wrap: nowrap;
136
141
}
137
142
138
-
> ul {
143
+
& > ul {
139
144
position: absolute;
140
145
z-index: 99999;
141
146
142
147
@media (max-width: 650px) {
143
-
inset: auto 15px !important;
148
+
inset: auto 15px;
144
149
}
145
150
146
151
margin-top: 10px;
147
152
padding: 20px;
148
-
border-image: var(--box-tlbr-png) 10 fill / 20px round;
149
-
150
-
padding-left: 30px;
153
+
padding-left: 40px;
151
154
& ul {
152
155
margin-left: 10px;
153
156
}
157
+
158
+
border-image: var(--box-tlbr-png) 10 fill / 20px round;
154
159
}
155
160
}
156
161