samanthanguyen.me
samantha's personal website!~ ✨
samanthanguyen.me
add tangled.sh + format
+55
-41
1 changed file
src
lib
layout
+55
-41
src/lib/layout/Footer.svelte
+55
-41
src/lib/layout/Footer.svelte
···
1
1
<script lang="ts">
2
2
-
import ExternalLink from '$lib/ExternalLink.svelte'
2
2
+
import ExternalLink from "$lib/ExternalLink.svelte";
3
3
4
4
const socials = [
5
5
{
6
6
-
href: 'mailto:contact@samanthanguyen.me',
7
7
-
title: 'Email me at contact@samanthanguyen.me',
8
8
-
text: 'Email',
6
6
+
href: "mailto:contact@samanthanguyen.me",
7
7
+
title: "Email me at contact@samanthanguyen.me",
8
8
+
text: "Email",
9
9
},
10
10
{
11
11
-
href: 'https://bsky.app/profile/samanthanguyen.me',
12
12
-
title: '@samanthanguyen.me on Bluesky',
13
13
-
text: 'Bluesky',
11
11
+
href: "https://bsky.app/profile/samanthanguyen.me",
12
12
+
title: "@samanthanguyen.me on Bluesky",
13
13
+
text: "Bluesky",
14
14
},
15
15
{
16
16
-
href: 'https://github.com/neoncitylights',
17
17
-
title: '@neoncitylights on GitHub',
18
18
-
text: 'GitHub',
16
16
+
href: "https://github.com/neoncitylights",
17
17
+
title: "@neoncitylights on GitHub",
18
18
+
text: "GitHub",
19
19
},
20
20
-
]
20
20
+
{
21
21
+
href: "https://tangled.sh/@samanthanguyen.me",
22
22
+
title: "@samanthanguyen.me on Tangled.sh",
23
23
+
text: "Tangled.sh",
24
24
+
},
25
25
+
];
21
26
</script>
22
27
23
28
{#snippet separator()}
24
24
-
<hr class={[
25
25
-
'border-0 h-[15px]',
26
26
-
'bg-[length:5px_5px] bg-radial-[0.5px_0.5px]',
27
27
-
'from-current to-transparent',
28
28
-
'text-zinc-900 dark:text-zinc-100',
29
29
-
]} />
29
29
+
<hr
30
30
+
class={[
31
31
+
"border-0 h-[15px]",
32
32
+
"bg-[length:5px_5px] bg-radial-[0.5px_0.5px]",
33
33
+
"from-current to-transparent",
34
34
+
"text-zinc-900 dark:text-zinc-100",
35
35
+
]}
36
36
+
/>
30
37
{/snippet}
31
38
32
32
-
<footer class={[
33
33
-
'flex flex-col gap-4 lg:gap-6',
34
34
-
'font-mono',
35
35
-
]}>
39
39
+
<footer class={["flex flex-col gap-4 lg:gap-6", "font-mono"]}>
36
40
{@render separator()}
37
37
-
<span class={[
38
38
-
'flex flex-row gap-4 lg:gap-6 justify-end',
39
39
-
]}>
41
41
+
<span class={["flex flex-row gap-4 lg:gap-6 justify-end"]}>
40
42
{#each socials as link}
41
43
<span>
42
44
<ExternalLink
43
45
href={link.href}
44
46
id={`socials-anchor-${link.text.toLowerCase()}`}
45
47
class={[
46
46
-
'socials-anchor',
47
47
-
'flex flex-row items-center gap-1 lg:gap-2',
48
48
-
'text-xs lg:text-sm font-mono',
49
49
-
'hover:bg-zinc-900 hover:text-zinc-100',
50
50
-
'dark:hover:bg-zinc-100 dark:hover:text-zinc-900',
48
48
+
"socials-anchor",
49
49
+
"flex flex-row items-center gap-1 lg:gap-2",
50
50
+
"text-xs lg:text-sm font-mono",
51
51
+
"hover:bg-zinc-900 hover:text-zinc-100",
52
52
+
"dark:hover:bg-zinc-100 dark:hover:text-zinc-900",
51
53
]}
52
54
>
53
55
{`${link.text} \u{2197}`}
54
56
</ExternalLink>
55
57
<span
56
58
class={[
57
57
-
'socials-target hidden absolute p-2 mt-1',
58
58
-
'bg-white border-2 border-black',
59
59
-
'dark:bg-zinc-900 dark:border-zinc-100',
60
60
-
'text-xs',
61
61
-
'text-zinc-900 dark:text-zinc-100',
62
62
-
'transition-all',
59
59
+
"socials-target hidden absolute p-2 mt-1",
60
60
+
"bg-white border-2 border-black",
61
61
+
"dark:bg-zinc-900 dark:border-zinc-100",
62
62
+
"text-xs",
63
63
+
"text-zinc-900 dark:text-zinc-100",
64
64
+
"transition-all",
63
65
]}
64
66
id={`socials-target-${link.text.toLowerCase()}`}
65
67
>
···
82
84
}
83
85
}
84
86
85
85
-
:global(#socials-anchor-email) { anchor-name: --email-anchor; }
86
86
-
:global(#socials-target-email) { position-anchor: --email-anchor; }
87
87
-
:global(#socials-anchor-bluesky) { anchor-name: --bluesky-anchor; }
88
88
-
:global(#socials-target-bluesky) { position-anchor: --bluesky-anchor; }
89
89
-
:global(#socials-anchor-github) { anchor-name: --github-anchor; }
90
90
-
:global(#socials-target-github) { position-anchor: --github-anchor; }
87
87
+
:global(#socials-anchor-email) {
88
88
+
anchor-name: --email-anchor;
89
89
+
}
90
90
+
:global(#socials-target-email) {
91
91
+
position-anchor: --email-anchor;
92
92
+
}
93
93
+
:global(#socials-anchor-bluesky) {
94
94
+
anchor-name: --bluesky-anchor;
95
95
+
}
96
96
+
:global(#socials-target-bluesky) {
97
97
+
position-anchor: --bluesky-anchor;
98
98
+
}
99
99
+
:global(#socials-anchor-github) {
100
100
+
anchor-name: --github-anchor;
101
101
+
}
102
102
+
:global(#socials-target-github) {
103
103
+
position-anchor: --github-anchor;
104
104
+
}
91
105
@media (hover: hover) {
92
106
:global(.socials-anchor:hover ~ .socials-target) {
93
107
display: block;