SanYeCao-blog/src/components/Footer.astro

116 lines
2.6 KiB
Text

---
import { getLangFromUrl, getTranslations, type Lang } from "@/i18n";
import BuildHashBlocks from "@/components/BuildHashBlocks.astro";
import Divider from "@/components/Divider.astro";
import Beian from "./Beian.astro";
const commit = import.meta.env.PUBLIC_GIT_COMMIT || "unknown";
const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang);
---
<footer class="footer">
<Divider />
<a
href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog"
class="github"
aria-label="GitHub repository"></a>
<a href="mailto:cloverta@petalmail.com" class="email" aria-label="Email"></a>
<p class="footer-content-pc">
© 2026 ClovertaTheTrilobita · <a
href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog"
>Source code</a
> licensed under MIT. Content rights reserved.
<!-- <code class="build-commit">{commit.slice(0, 7)}</code> -->
</p>
<div class="footer-content-mobile">
<p>© 2026 ClovertaTheTrilobita</p>
<p>Content rights reserved.</p>
</div>
<BuildHashBlocks />
<Beian />
</footer>
<style>
.footer {
margin-top: 1rem;
padding: 1.5rem 0 0;
font-size: 0.95rem;
opacity: 0.9;
position: relative;
}
.github {
display: inline-block;
width: 30px;
height: 30px;
background-color: #1f2328;
-webkit-mask: url("/images/github-outline-7.svg") no-repeat center / contain;
mask: url("/images/github-outline-7.svg") no-repeat center / contain;
vertical-align: middle;
margin-bottom: 0.5rem;
margin-right: 0.5rem;
transition:
transform 0.18s ease,
opacity 0.18s ease;
}
.email {
display: inline-block;
width: 30px;
height: 30px;
background-color: #1f2328;
-webkit-mask: url("/images/email.svg") no-repeat center / contain;
mask: url("/images/email.svg") no-repeat center / contain;
vertical-align: middle;
margin-bottom: 0.5rem;
transition:
transform 0.18s ease,
opacity 0.18s ease;
}
.github:hover {
transform: translateY(-2px);
}
.email:hover {
transform: translateY(-2px);
}
:global(html.dark .github) {
background-color: #e6e6e6;
}
:global(html.dark .email) {
background-color: #e6e6e6;
}
.footer {
margin-top: 1rem;
padding: 1.5rem 0 0;
font-size: 0.95rem;
opacity: 0.9;
position: relative;
text-align: center;
}
.footer-content-mobile {
display: none;
}
.footer p {
margin: 0.4rem 0;
font-size: 0.8rem;
/* display: inline-flex; */
}
@media (max-width: 700px) {
.footer-content-pc {
display: none;
}
.footer-content-mobile {
display: block;
}
}
</style>