64 lines
1.3 KiB
Plaintext
64 lines
1.3 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import { SITE, SOCIAL } from '../site.config';
|
|
---
|
|
|
|
<BaseLayout title="联系" description="联系方式">
|
|
<section class="page-head">
|
|
<h1>联系</h1>
|
|
<p class="lead muted">
|
|
欢迎就项目合作、技术交流或问题反馈与我联系。
|
|
</p>
|
|
</section>
|
|
|
|
<section class="contact">
|
|
<a class="card row" href={`mailto:${SITE.email}`}>
|
|
<span class="label mono">Email</span>
|
|
<span class="value">{SITE.email}</span>
|
|
</a>
|
|
{
|
|
SOCIAL.map((s) => (
|
|
<a class="card row" href={s.href} target="_blank" rel="noopener">
|
|
<span class="label mono">{s.label}</span>
|
|
<span class="value">{s.href}</span>
|
|
</a>
|
|
))
|
|
}
|
|
</section>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.page-head {
|
|
padding: 3rem 0 1rem;
|
|
}
|
|
.page-head h1 {
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
.lead {
|
|
max-width: 56ch;
|
|
}
|
|
.contact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
max-width: 560px;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
color: var(--text);
|
|
}
|
|
.label {
|
|
color: var(--accent);
|
|
font-size: 0.85rem;
|
|
min-width: 70px;
|
|
}
|
|
.value {
|
|
color: var(--text-dim);
|
|
}
|
|
.row:hover .value {
|
|
color: var(--text);
|
|
}
|
|
</style>
|