style(footer): 调整页脚链接样式以支持折行

- 修改页脚链接的 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`,以优化在小屏幕上的显示效果。
This commit is contained in:
KazooTTT
2025-03-05 16:36:49 +08:00
parent b931b14013
commit b7bf1eab35

View File

@ -23,12 +23,15 @@ const year = new Date().getFullYear();
</div>
<nav
aria-labelledby="footer_links"
class="flex gap-x-2 sm:gap-x-0 sm:divide-x sm:divide-gray-500"
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-4 py-2 hover:underline sm:py-0" href={link.path}>
<a
class="hover:text-global-text px-2 py-2 hover:underline sm:px-4 sm:py-0"
href={link.path}
>
{link.title}
</a>
))