feat(mobile): improve mobile view by introducing css for small devices

This commit is contained in:
2026-07-31 18:30:57 +02:00
parent 6b94a75e30
commit 9edde535bb
3 changed files with 26 additions and 20 deletions
+19 -13
View File
@@ -15,28 +15,34 @@ export default function Footer() {
};
return (
<footer className="bg-ctp-mantle flex items-center justify-between px-24 py-6 border-t border-ctp-lavender-800 mt-10">
<footer className="bg-ctp-mantle flex flex-col md:flex-row items-center justify-between gap-3 px-4 md:px-24 py-6 border-t border-ctp-lavender-800 mt-10">
<p className="text-sm text-ctp-text">
&copy; {currentYear} AramJonghu. All rights reserved.
</p>
<div className="flex">
<p className="text-sm text-ctp-text">
<div className="flex items-center">
<p className="text-sm text-ctp-text hidden sm:block">
Check out the website repository here:
</p>
<img
src={forgejo}
alt="Forgejo repository"
<button
onClick={goToForgejo}
className="ml-2 w-6 h-6 cursor-pointer hover:opacity-80 transition-opacity"
/>
aria-label="Forgejo repository"
className="ml-2 p-2 cursor-pointer hover:opacity-80 transition-opacity"
>
<img
src={forgejo}
alt="Forgejo repository"
className="w-7 h-7"
/>
</button>
<img
src={gitea}
alt="Gitea mirror"
<button
onClick={goToGitea}
className="ml-2 w-6 h-6 cursor-pointer hover:opacity-80 transition-opacity"
/>
aria-label="Gitea mirror"
className="ml-2 p-2 cursor-pointer hover:opacity-80 transition-opacity"
>
<img src={gitea} alt="Gitea mirror" className="w-7 h-7" />
</button>
</div>
</footer>
);