@anglefeint/astro-theme 0.1.12 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anglefeint/astro-theme",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.13",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Anglefeint core theme package for Astro",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"astro",
|
|
8
|
+
"astro-theme",
|
|
9
|
+
"blog",
|
|
10
|
+
"portfolio",
|
|
11
|
+
"cyberpunk",
|
|
12
|
+
"hacker",
|
|
13
|
+
"matrix"
|
|
14
|
+
],
|
|
6
15
|
"license": "MIT",
|
|
7
16
|
"files": [
|
|
8
17
|
"src/index.ts",
|
|
@@ -15,10 +15,11 @@ const { tagline = SITE_TAGLINE, scanlines = false } = Astro.props as Props;
|
|
|
15
15
|
|
|
16
16
|
<footer>
|
|
17
17
|
© {today.getFullYear()} {SITE_TITLE}. {tagline}
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
<div class="social-links">
|
|
19
|
+
<SocialMenu links={SOCIAL_LINKS} />
|
|
20
|
+
</div>
|
|
21
|
+
{import.meta.env.DEV && SOCIAL_LINKS.length === 0 && (
|
|
22
|
+
<p class="social-hint">Configure social links in <code>src/site.config.ts</code></p>
|
|
22
23
|
)}
|
|
23
24
|
{scanlines && <div class="ai-scanlines" aria-hidden="true"></div>}
|
|
24
25
|
</footer>
|
|
@@ -36,6 +37,16 @@ const { tagline = SITE_TAGLINE, scanlines = false } = Astro.props as Props;
|
|
|
36
37
|
gap: 1em;
|
|
37
38
|
margin-top: 1em;
|
|
38
39
|
}
|
|
40
|
+
.social-hint {
|
|
41
|
+
margin: 0.6rem 0 0;
|
|
42
|
+
font-size: 0.78rem;
|
|
43
|
+
color: var(--chrome-text-muted, rgb(var(--text-muted)));
|
|
44
|
+
opacity: 0.82;
|
|
45
|
+
}
|
|
46
|
+
.social-hint code {
|
|
47
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
48
|
+
font-size: 0.75rem;
|
|
49
|
+
}
|
|
39
50
|
.social-links a {
|
|
40
51
|
text-decoration: none;
|
|
41
52
|
color: var(--chrome-text-muted, rgb(var(--text-muted)));
|
|
@@ -151,53 +151,17 @@ const localeOptions = SUPPORTED_LOCALES.map((targetLocale) => ({
|
|
|
151
151
|
gap: 0.4rem;
|
|
152
152
|
position: relative;
|
|
153
153
|
flex-wrap: nowrap;
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
border:
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
}
|
|
166
|
-
.lang-label {
|
|
167
|
-
display: inline-block;
|
|
168
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
169
|
-
font-size: 0.6rem;
|
|
170
|
-
text-transform: uppercase;
|
|
171
|
-
letter-spacing: 0.12em;
|
|
172
|
-
color: rgba(190, 226, 248, 0.78);
|
|
173
|
-
white-space: nowrap;
|
|
174
|
-
}
|
|
175
|
-
.lang-select {
|
|
176
|
-
appearance: none;
|
|
177
|
-
-webkit-appearance: none;
|
|
178
|
-
-moz-appearance: none;
|
|
179
|
-
background:
|
|
180
|
-
linear-gradient(45deg, transparent 50%, rgba(204, 236, 252, 0.82) 50%) calc(100% - 0.9rem) 50% / 0.35rem 0.35rem no-repeat,
|
|
181
|
-
linear-gradient(135deg, rgba(204, 236, 252, 0.82) 50%, transparent 50%) calc(100% - 0.7rem) 50% / 0.35rem 0.35rem no-repeat,
|
|
182
|
-
rgba(9, 22, 40, 0.68);
|
|
183
|
-
border: 1px solid rgba(132, 214, 255, 0.2);
|
|
184
|
-
border-radius: 999px;
|
|
185
|
-
padding: 0.2rem 1.45rem 0.2rem 0.55rem;
|
|
186
|
-
min-width: 6rem;
|
|
187
|
-
font-size: 0.62rem;
|
|
188
|
-
line-height: 1;
|
|
189
|
-
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
190
|
-
color: rgba(204, 236, 252, 0.86);
|
|
191
|
-
cursor: pointer;
|
|
192
|
-
}
|
|
193
|
-
.lang-select:focus {
|
|
194
|
-
outline: none;
|
|
195
|
-
border-color: rgba(132, 214, 255, 0.5);
|
|
196
|
-
box-shadow: 0 0 0 2px rgba(98, 180, 228, 0.18);
|
|
197
|
-
}
|
|
198
|
-
.lang-select option {
|
|
199
|
-
color: #ccecfb;
|
|
200
|
-
background: #0b1c32;
|
|
154
|
+
--lang-switcher-border: rgba(132, 214, 255, 0.2);
|
|
155
|
+
--lang-switcher-bg: rgba(6, 16, 30, 0.35);
|
|
156
|
+
--lang-label-color: rgba(190, 226, 248, 0.78);
|
|
157
|
+
--lang-select-arrow: rgba(204, 236, 252, 0.82);
|
|
158
|
+
--lang-select-bg: rgba(9, 22, 40, 0.68);
|
|
159
|
+
--lang-select-border: rgba(132, 214, 255, 0.2);
|
|
160
|
+
--lang-select-text: rgba(204, 236, 252, 0.86);
|
|
161
|
+
--lang-select-focus-border: rgba(132, 214, 255, 0.5);
|
|
162
|
+
--lang-select-focus-ring: rgba(98, 180, 228, 0.18);
|
|
163
|
+
--lang-select-option-text: #ccecfb;
|
|
164
|
+
--lang-select-option-bg: #0b1c32;
|
|
201
165
|
}
|
|
202
166
|
.nav-status {
|
|
203
167
|
display: none;
|
|
@@ -33,3 +33,60 @@ const { label, currentLocale, options } = Astro.props as Props;
|
|
|
33
33
|
}
|
|
34
34
|
</select>
|
|
35
35
|
</div>
|
|
36
|
+
|
|
37
|
+
<style>
|
|
38
|
+
.lang-switcher {
|
|
39
|
+
display: inline-flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: 0.4rem;
|
|
42
|
+
padding: 0.2rem 0.4rem;
|
|
43
|
+
margin-right: 0.1rem;
|
|
44
|
+
border: 1px solid var(--lang-switcher-border, rgba(132, 214, 255, 0.2));
|
|
45
|
+
border-radius: 999px;
|
|
46
|
+
background: var(--lang-switcher-bg, rgba(6, 16, 30, 0.35));
|
|
47
|
+
flex-shrink: 0;
|
|
48
|
+
}
|
|
49
|
+
.lang-label {
|
|
50
|
+
display: inline-block;
|
|
51
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
52
|
+
font-size: 0.6rem;
|
|
53
|
+
text-transform: uppercase;
|
|
54
|
+
letter-spacing: 0.12em;
|
|
55
|
+
color: var(--lang-label-color, rgba(190, 226, 248, 0.78));
|
|
56
|
+
white-space: nowrap;
|
|
57
|
+
}
|
|
58
|
+
.lang-select {
|
|
59
|
+
appearance: none;
|
|
60
|
+
-webkit-appearance: none;
|
|
61
|
+
-moz-appearance: none;
|
|
62
|
+
background:
|
|
63
|
+
linear-gradient(45deg, transparent 50%, var(--lang-select-arrow, rgba(204, 236, 252, 0.82)) 50%) calc(100% - 0.9rem) 50% /
|
|
64
|
+
0.35rem 0.35rem no-repeat,
|
|
65
|
+
linear-gradient(135deg, var(--lang-select-arrow, rgba(204, 236, 252, 0.82)) 50%, transparent 50%) calc(100% - 0.7rem) 50% /
|
|
66
|
+
0.35rem 0.35rem no-repeat,
|
|
67
|
+
var(--lang-select-bg, rgba(9, 22, 40, 0.68));
|
|
68
|
+
border: 1px solid var(--lang-select-border, rgba(132, 214, 255, 0.2));
|
|
69
|
+
border-radius: 999px;
|
|
70
|
+
padding: 0.2rem 1.45rem 0.2rem 0.55rem;
|
|
71
|
+
min-width: 6rem;
|
|
72
|
+
font-size: 0.62rem;
|
|
73
|
+
line-height: 1;
|
|
74
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
75
|
+
color: var(--lang-select-text, rgba(204, 236, 252, 0.86));
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
}
|
|
78
|
+
.lang-select:focus {
|
|
79
|
+
outline: none;
|
|
80
|
+
border-color: var(--lang-select-focus-border, rgba(132, 214, 255, 0.5));
|
|
81
|
+
box-shadow: 0 0 0 2px var(--lang-select-focus-ring, rgba(98, 180, 228, 0.18));
|
|
82
|
+
}
|
|
83
|
+
.lang-select option {
|
|
84
|
+
color: var(--lang-select-option-text, #ccecfb);
|
|
85
|
+
background: var(--lang-select-option-bg, #0b1c32);
|
|
86
|
+
}
|
|
87
|
+
@media (max-width: 720px) {
|
|
88
|
+
.lang-switcher {
|
|
89
|
+
margin-right: 0;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
</style>
|
|
@@ -5,16 +5,44 @@ import Icon from './Icon.astro';
|
|
|
5
5
|
interface Props {
|
|
6
6
|
links?: SocialLink[];
|
|
7
7
|
iconSize?: number;
|
|
8
|
+
showPlaceholdersWhenEmpty?: boolean;
|
|
8
9
|
}
|
|
9
10
|
|
|
10
|
-
const {
|
|
11
|
+
const {
|
|
12
|
+
links = SOCIAL_LINKS,
|
|
13
|
+
iconSize = 32,
|
|
14
|
+
showPlaceholdersWhenEmpty = true,
|
|
15
|
+
} = Astro.props as Props;
|
|
16
|
+
const placeholderLinks: SocialLink[] = [
|
|
17
|
+
{ href: '', label: 'Mastodon', icon: 'mastodon' },
|
|
18
|
+
{ href: '', label: 'Twitter', icon: 'twitter' },
|
|
19
|
+
{ href: '', label: 'GitHub', icon: 'github' },
|
|
20
|
+
];
|
|
21
|
+
const resolvedLinks = links.length > 0 || !showPlaceholdersWhenEmpty ? links : placeholderLinks;
|
|
11
22
|
---
|
|
12
23
|
|
|
13
24
|
{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
25
|
+
resolvedLinks.map((link) => (
|
|
26
|
+
links.length > 0 ? (
|
|
27
|
+
<a href={link.href} target="_blank" rel="noopener noreferrer">
|
|
28
|
+
<span class="sr-only">{link.label}</span>
|
|
29
|
+
{link.icon ? <Icon name={link.icon} size={iconSize} /> : <span>{link.label}</span>}
|
|
30
|
+
</a>
|
|
31
|
+
) : (
|
|
32
|
+
<span class="social-placeholder" aria-hidden="true" title="Configure social links in src/site.config.ts">
|
|
33
|
+
{link.icon ? <Icon name={link.icon} size={iconSize} /> : <span>{link.label}</span>}
|
|
34
|
+
</span>
|
|
35
|
+
)
|
|
19
36
|
))
|
|
20
37
|
}
|
|
38
|
+
|
|
39
|
+
<style>
|
|
40
|
+
.social-placeholder {
|
|
41
|
+
display: inline-flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
opacity: 0.45;
|
|
45
|
+
filter: saturate(0.7);
|
|
46
|
+
cursor: default;
|
|
47
|
+
}
|
|
48
|
+
</style>
|