vielle.dev
[Archived] Archived WIP of vielle.dev
Add some base styles to the nav
verified
This commit was signed with the committer's known signature.
SSH Key Fingerprint:
SHA256:/4bvxqoEh9iMdjAPgcgAgXKZZQTROL3ULiPt6nH9RSs=
src
components
generic
+63
-70
src/components/generic/Nav.astro
+63
-70
src/components/generic/Nav.astro
···
6
6
---
7
7
8
8
<header>
9
9
-
{
10
10
-
(() => {
11
11
-
const a = (name: string, href: string) => <a {href}>{name}</a>;
12
12
-
const render = (name: string, children: nav[]) => (
13
13
-
<details>
14
14
-
<summary>{name}</summary>
15
15
-
<ul>
16
16
-
{children.map((x) => (
17
17
-
<li>
18
18
-
{x.children
19
19
-
? render(x.name, x.children)
20
20
-
: a(x.name, x.url || "")}
21
21
-
</li>
22
22
-
))}
23
23
-
</ul>
24
24
-
</details>
25
25
-
);
26
26
-
return data.map((entry) => (
27
27
-
<li>
28
28
-
{entry.children
29
29
-
? render(entry.name, entry.children)
30
30
-
: a(entry.name, entry.url || "")}
31
31
-
</li>
32
32
-
));
33
33
-
})()
34
34
-
}
9
9
+
<h1>🪤 | vielle.dev</h1>
10
10
+
<ul>
11
11
+
{
12
12
+
(() => {
13
13
+
const a = (name: string, href: string) => <a {href}>{name}</a>;
14
14
+
const render = (name: string, children: nav[]) => (
15
15
+
<details>
16
16
+
<summary>{name}</summary>
17
17
+
<ul>
18
18
+
{children.map((x) => (
19
19
+
<li>
20
20
+
{x.children
21
21
+
? render(x.name, x.children)
22
22
+
: a(x.name, x.url || "")}
23
23
+
</li>
24
24
+
))}
25
25
+
</ul>
26
26
+
</details>
27
27
+
);
28
28
+
return data.map((entry) => (
29
29
+
<li>
30
30
+
{entry.children
31
31
+
? render(entry.name, entry.children)
32
32
+
: a(entry.name, entry.url || "")}
33
33
+
</li>
34
34
+
));
35
35
+
})()
36
36
+
}
37
37
+
</ul>
35
38
</header>
36
39
37
40
<style>
38
38
-
button {
39
39
-
background-color: transparent;
40
40
-
border: none;
41
41
-
& svg {
42
42
-
stroke: white;
43
43
-
}
41
41
+
header {
42
42
+
background-color: white;
43
43
+
border: 5px solid black;
44
44
+
border-radius: 0 0 20px 20px;
45
45
+
box-shadow: 0 10px;
46
46
+
display: flex;
47
47
+
flex-direction: row;
48
48
+
align-items: center;
49
49
+
justify-content: center;
50
50
+
padding: 10px 40px;
44
51
}
45
52
46
46
-
#nav-menu-close {
47
47
-
float: right;
48
48
-
height: 3em;
49
49
-
}
50
50
-
51
51
-
dialog {
52
52
-
color: white;
53
53
-
54
54
-
min-width: 200px;
55
55
-
width: fit-content;
56
56
-
max-width: 400px;
57
57
-
height: 100vh;
58
58
-
padding: 10px;
59
59
-
60
60
-
background: black;
61
61
-
border: none;
62
62
-
63
63
-
position: fixed;
64
64
-
top: 0;
65
65
-
transition:
66
66
-
left 0.2s,
67
67
-
display 0.2s allow-discrete;
68
68
-
69
69
-
&:popover-open {
70
70
-
/* Post-Entry (Normal) State */
71
71
-
left: 0;
53
53
+
ul {
54
54
+
display: flex;
55
55
+
flex-direction: row;
56
56
+
align-items: center;
57
57
+
justify-content: center;
58
58
+
gap: 10px;
72
59
73
73
-
/* Pre-Entry State */
74
74
-
@starting-style {
75
75
-
left: -100%;
60
60
+
& > li {
61
61
+
list-style-type: none;
62
62
+
display: flex;
63
63
+
flex-direction: row;
64
64
+
align-items: center;
65
65
+
justify-content: center;
66
66
+
gap: 10px;
67
67
+
&:not(:first-child)::before {
68
68
+
content: "";
69
69
+
display: block;
70
70
+
width: 5px;
71
71
+
height: 5px;
72
72
+
border-radius: 2.5px;
73
73
+
background-color: currentColor;
76
74
}
77
77
-
}
78
78
-
79
79
-
/* Exiting State */
80
80
-
&:not(:popover-open) {
81
81
-
left: -100%;
82
75
}
83
76
}
84
77
85
85
-
/* STUPID ISSUE (astro tries to add a tag to the backdrop) */
86
86
-
:global(::backdrop) {
87
87
-
background: #00000080;
88
88
-
backdrop-filter: blur(5px);
78
78
+
h1 {
79
79
+
margin-right: auto;
80
80
+
font-size: 1.5rem;
81
81
+
white-space: nowrap;
89
82
}
90
83
</style>