this repo has no description
✨ Add a logo to header on /
+183
-20
+134
src/components/Logo.astro
+134
src/components/Logo.astro
···
1
+
<svg
2
+
width="620"
3
+
height="664"
4
+
viewBox="0 0 620 664"
5
+
fill="none"
6
+
xmlns="http://www.w3.org/2000/svg"
7
+
>
8
+
<path
9
+
d="M293.377 328.025L529.358 63.8557"
10
+
stroke="var(--primary)"
11
+
stroke-width="5"
12
+
stroke-miterlimit="10"></path>
13
+
<path
14
+
d="M379.024 361.995L553.209 40.7273"
15
+
stroke="var(--primary)"
16
+
stroke-width="5"
17
+
stroke-miterlimit="10"></path>
18
+
<path
19
+
d="M531.888 321.159C531.888 387.82 477.849 441.86 411.187 441.86C344.525 441.86 290.486 387.82 290.486 321.159C290.486 254.498 344.525 200.458 411.187 200.458C477.849 200.458 531.888 254.498 531.888 321.159Z"
20
+
fill="#FFA20A"></path>
21
+
<path
22
+
d="M55.9495 234.789L427.81 381.148"
23
+
stroke="var(--primary)"
24
+
stroke-width="5"
25
+
stroke-miterlimit="10"></path>
26
+
<path
27
+
d="M54.5042 235.15L298.436 140.468"
28
+
stroke="var(--primary)"
29
+
stroke-width="5"
30
+
stroke-miterlimit="10"></path>
31
+
<path
32
+
d="M88.4739 248.16L326.624 141.552"
33
+
stroke="var(--primary)"
34
+
stroke-width="5"
35
+
stroke-miterlimit="10"></path>
36
+
<path
37
+
d="M124.612 261.169L361.678 135.77"
38
+
stroke="var(--primary)"
39
+
stroke-width="5"
40
+
stroke-miterlimit="10"></path>
41
+
<path
42
+
d="M159.304 275.625L400.345 127.097"
43
+
stroke="var(--primary)"
44
+
stroke-width="5"
45
+
stroke-miterlimit="10"></path>
46
+
<path
47
+
d="M189.299 287.55L435.038 116.617"
48
+
stroke="var(--primary)"
49
+
stroke-width="5"
50
+
stroke-miterlimit="10"></path>
51
+
<path
52
+
d="M222.907 300.56L474.067 99.271"
53
+
stroke="var(--primary)"
54
+
stroke-width="5"
55
+
stroke-miterlimit="10"></path>
56
+
<path
57
+
d="M259.407 314.654L508.759 76.504"
58
+
stroke="var(--primary)"
59
+
stroke-width="5"
60
+
stroke-miterlimit="10"></path>
61
+
<path
62
+
d="M330.96 342.841L541.645 53.737"
63
+
stroke="var(--primary)"
64
+
stroke-width="5"
65
+
stroke-miterlimit="10"></path>
66
+
<path
67
+
d="M427.81 381.148L565.496 21.2128"
68
+
stroke="var(--primary)"
69
+
stroke-width="5"
70
+
stroke-miterlimit="10"></path>
71
+
<path
72
+
d="M54.5042 235.15V354.406"
73
+
stroke="var(--primary)"
74
+
stroke-width="5"
75
+
stroke-miterlimit="10"></path>
76
+
<path
77
+
d="M88.4739 248.16V381.148"
78
+
stroke="var(--primary)"
79
+
stroke-width="5"
80
+
stroke-miterlimit="10"></path>
81
+
<path
82
+
d="M124.612 261.169V408.613"
83
+
stroke="var(--primary)"
84
+
stroke-width="5"
85
+
stroke-miterlimit="10"></path>
86
+
<path
87
+
d="M159.304 275.625V435.355"
88
+
stroke="var(--primary)"
89
+
stroke-width="5"
90
+
stroke-miterlimit="10"></path>
91
+
<path
92
+
d="M189.299 287.55V459.206"
93
+
stroke="var(--primary)"
94
+
stroke-width="5"
95
+
stroke-miterlimit="10"></path>
96
+
<path
97
+
d="M222.907 300.56V485.948"
98
+
stroke="var(--primary)"
99
+
stroke-width="5"
100
+
stroke-miterlimit="10"></path>
101
+
<path
102
+
d="M259.407 314.654V513.413"
103
+
stroke="var(--primary)"
104
+
stroke-width="5"
105
+
stroke-miterlimit="10"></path>
106
+
<path
107
+
d="M293.377 328.025V539.071"
108
+
stroke="var(--primary)"
109
+
stroke-width="5"
110
+
stroke-miterlimit="10"></path>
111
+
<path
112
+
d="M330.96 342.841V567.982"
113
+
stroke="var(--primary)"
114
+
stroke-width="5"
115
+
stroke-miterlimit="10"></path>
116
+
<path
117
+
d="M427.81 381.148V642.787"
118
+
stroke="var(--primary)"
119
+
stroke-width="5"
120
+
stroke-miterlimit="10"></path>
121
+
<path
122
+
d="M379.024 361.995V605.204"
123
+
stroke="var(--primary)"
124
+
stroke-width="5"
125
+
stroke-miterlimit="10"></path>
126
+
</svg>
127
+
128
+
<style>
129
+
svg {
130
+
width: var(--logo-size, 1.2em);
131
+
height: auto;
132
+
flex-shrink: 0;
133
+
}
134
+
</style>
+49
-20
src/pages/index.astro
+49
-20
src/pages/index.astro
···
3
3
import StrongHeader from "../components/StrongHeader.astro";
4
4
import Layout from "../layouts/Regular.astro";
5
5
import { getCollection, getEntry } from "astro:content";
6
+
import Logo from "../components/Logo.astro";
6
7
7
8
const works = (await getCollection("works")).map((w) => w.data);
8
9
const smolWorks = (await getEntry("collections", "smol"))?.data?.includes.split(
···
11
12
---
12
13
13
14
<Layout>
14
-
<StrongHeader title="Hiya!">
15
-
<p i18n>I'm Gwenn Le Bihan :3</p>
16
-
<p i18n>interested in anything that touches art, technology or both</p>
17
-
<a href="/resume">-> curriculum vitæ</a>
18
-
<nav class="webring">
19
-
<a href="https://n7webring.neocities.org/gwenn/prev"><-</a>
20
-
<a href="https://n7webring.neocities.org">n7webring</a>
21
-
<a href="https://n7webring.neocities.org/gwenn/next">-></a>
22
-
</nav>
23
-
</StrongHeader>
15
+
<div class="header-with-logo">
16
+
<Logo slot="title-pre" />
17
+
<StrongHeader title="Hiya!">
18
+
<p i18n>I'm Gwenn Le Bihan :3</p>
19
+
<p i18n>interested in anything that touches art, technology or both</p>
20
+
<a href="/resume">-> curriculum vitæ</a>
21
+
<nav class="webring">
22
+
<a href="https://n7webring.neocities.org/gwenn/prev"><-</a>
23
+
<a href="https://n7webring.neocities.org">n7webring</a>
24
+
<a href="https://n7webring.neocities.org/gwenn/next">-></a>
25
+
</nav>
26
+
</StrongHeader>
27
+
</div>
24
28
25
29
<WorksGrid works={works.filter((w) => !smolWorks?.includes(w.id))} />
26
30
</Layout>
27
31
28
32
<style>
33
+
.header-with-logo {
34
+
--logo-size: 15em;
35
+
display: flex;
36
+
align-items: center;
37
+
flex-wrap: wrap;
38
+
gap: 0 1em;
39
+
40
+
p {
41
+
text-wrap: balance;
42
+
}
43
+
44
+
@media (min-width: 1400px) {
45
+
margin: 0 auto;
46
+
}
47
+
}
48
+
49
+
.header-with-logo :global(*:not(svg)) {
50
+
flex-shrink: 1;
51
+
}
52
+
53
+
.header-with-logo :global(header) {
54
+
flex-grow: 1;
55
+
flex-basis: 15ch;
56
+
}
57
+
29
58
nav.webring {
30
59
opacity: 0.7;
31
60
margin-top: 0.75em;
32
-
}
33
61
34
-
nav.webring a {
35
-
text-decoration: none;
36
-
}
62
+
a {
63
+
text-decoration: none;
64
+
}
37
65
38
-
nav.webring a[href="https://n7webring.neocities.org"]
39
-
{
40
-
font-family:
41
-
Victor Mono,
42
-
monospace;
43
-
font-size: 0.8em;
66
+
a[href="https://n7webring.neocities.org"]
67
+
{
68
+
font-family:
69
+
Victor Mono,
70
+
monospace;
71
+
font-size: 0.8em;
72
+
}
44
73
}
45
74
</style>