vielle.dev
Personal Site
Improve margins for heading box.
- elements flex in right direction
- goes vertical at small screen threshold
- overflowing creates a scroll
- dot is placed between list items
src/assets/dot.png
src/assets/dot.png
This is a binary file and will not be displayed.
+42
-2
src/components/Header.astro
+42
-2
src/components/Header.astro
···
1
1
---
2
2
import { urls, type nav } from "/site-config";
3
-
4
3
---
5
4
6
5
<header>
···
39
38
header {
40
39
image-rendering: pixelated;
41
40
border-image: url("../assets/box-blr.png") 10 fill / 10px / 10px round;
42
-
margin: 10px;
41
+
margin: 0 10px 10px;
42
+
padding: 10px 20px;
43
43
overflow: auto;
44
+
45
+
display: flex;
46
+
flex-direction: row;
47
+
justify-content: space-between;
48
+
align-items: center;
49
+
50
+
@media (max-width: 600px) {
51
+
flex-direction: column;
52
+
}
53
+
54
+
& > ul {
55
+
display: flex;
56
+
flex-direction: row;
57
+
align-items: center;
58
+
justify-content: start;
59
+
max-width: 100%;
60
+
overflow-y: scroll;
61
+
gap: 10px;
62
+
63
+
& > li {
64
+
display: flex;
65
+
flex-direction: row;
66
+
align-items: center;
67
+
gap: 10px;
68
+
69
+
&::marker {
70
+
content: none;
71
+
}
72
+
73
+
& + &::before {
74
+
content: "";
75
+
image-rendering: pixelated;
76
+
background-image: url("../assets/dot.png");
77
+
background-size: contain;
78
+
width: 9px;
79
+
height: 9px;
80
+
display: block;
81
+
}
82
+
}
83
+
}
44
84
}
45
85
46
86
h1 {