SanYeCao-blog/src/components/Footer.astro

---
import { getLangFromUrl, getTranslations, type Lang } from "@/i18n";
import BuildHashBlocks from "@/components/BuildHashBlocks.astro";
const commit = import.meta.env.PUBLIC_GIT_COMMIT || "unknown";
const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang);
---

<footer class="footer">
  <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 />
</footer>

<style>
  .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::before {
    content: "";
    display: block;
    width: 100%;
    height: 12px;
    margin-bottom: 1rem;
    background: repeating-linear-gradient(
      -45deg,
      #ef5a6f 0 14px,
      transparent 14px 28px,
      #536493 28px 42px,
      transparent 42px 56px
    );
    pointer-events: none;
  }

  .footer-content-mobile {
    display: none;
  }

  .footer p {
    margin: 0.4rem 0;
    font-size: 0.8rem;
    /* display: inline-flex; */
  }

  :global(.dark) .footer::before {
    background: repeating-linear-gradient(
      -45deg,
      #ff8a8a 0 14px,
      transparent 14px 28px,
      #9ecbff 28px 42px,
      transparent 42px 56px
    );
  }

  @media (max-width: 700px) {
    .footer-content-pc {
      display: none;
    }

    .footer-content-mobile {
      display: block;
    }
  }
</style>