mirror of
https://github.com/KazooTTT/kazoottt-blog-v2.git
synced 2025-06-24 11:11:29 +08:00
b7bf1eab35
- 修改页脚链接的 flex 布局，从 `gap-x-2 sm:gap-x-0` 改为 `flex-wrap gap-x-2 sm:gap-x-0`，使其支持折行。 - 调整链接的内边距，在小屏幕上使用 `px-2 py-2`，在大屏幕上使用 `sm:px-4 sm:py-0`，以优化在小屏幕上的显示效果。
41 lines
1.1 KiB
Plaintext
41 lines
1.1 KiB
Plaintext
---
|
||
import { menuLinks, siteConfig } from "@/site.config";
|
||
|
||
const year = new Date().getFullYear();
|
||
---
|
||
|
||
<footer
|
||
class="mt-auto flex w-full flex-col items-center justify-center gap-y-2 pt-20 pb-4 text-center align-top font-semibold text-gray-600 sm:flex-row sm:justify-between sm:text-xs dark:text-gray-400"
|
||
>
|
||
<div class="me-0 sm:me-4">
|
||
© {siteConfig.author}
|
||
{year}.<span class="inline-block"> 🚀 {siteConfig.title}</span>
|
||
</div>
|
||
<div class="group relative flex items-center gap-x-2">
|
||
<div class="absolute bottom-6 left-0 hidden group-hover:block">
|
||
<img
|
||
src="https://pictures.kazoottt.top/2025/02/20250208-be1adbf7a54795ed26312929bb6c6786.png"
|
||
alt="公众号"
|
||
class="h-24 w-24"
|
||
/>
|
||
</div>
|
||
<div>公众号：kazoottt</div>
|
||
</div>
|
||
<nav
|
||
aria-labelledby="footer_links"
|
||
class="flex flex-wrap gap-x-2 sm:gap-x-0 sm:divide-x sm:divide-gray-500"
|
||
>
|
||
<p id="footer_links" class="sr-only">More on this site</p>
|
||
{
|
||
menuLinks.map((link) => (
|
||
<a
|
||
class="hover:text-global-text px-2 py-2 hover:underline sm:px-4 sm:py-0"
|
||
href={link.path}
|
||
>
|
||
{link.title}
|
||
</a>
|
||
))
|
||
}
|
||
</nav>
|
||
</footer>
|