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> </div>
<nav <nav
aria-labelledby="footer_links" 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> <p id="footer_links" class="sr-only">More on this site</p>
{ {
menuLinks.map((link) => ( 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} {link.title}
</a> </a>
)) ))