admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

improve footer layout on smaller devices

Browse source
This commit is contained in:
MarconLP 2023-04-27 22:23:09 +02:00
parent b840be86b0
commit be169714cc
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
1 changed files with 18 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/components/Footer.tsx
View file

@ -1,35 +1,27 @@
import Link from "next/link";
export default function Footer() {
return (
<div className="mx-16 flex items-center justify-center">
<footer className="mb-4 mt-4 flex h-full w-[1048px] flex-col-reverse items-center justify-between text-sm md:flex-row">
<div className="mx-8 my-[50px] text-sm text-[#666] md:my-0">
<div className="my-[50px] ml-8 text-sm text-[#666] md:my-0">
© 2023 Snapify
</div>
<div className="mx-8 flex w-full flex-col px-[50px] md:w-auto md:flex-row md:px-0">
<a
className="flex h-[42px] cursor-pointer items-center border-b border-[#eee] text-sm text-[#666] hover:text-black md:ml-8 md:border-none"
href="/legal/privacy-policy"
>
Privacy Policy
</a>
<a
className="flex h-[42px] cursor-pointer items-center border-b border-[#eee] text-sm text-[#666] hover:text-black md:ml-8 md:border-none"
href="/legal/terms"
>
Terms and Conditions
</a>
<a
className="flex h-[42px] cursor-pointer items-center border-b border-[#eee] text-sm text-[#666] hover:text-black md:ml-8 md:border-none"
href="/legal/impressum"
>
Impressum
</a>
<a
className="flex h-[42px] cursor-pointer items-center border-b border-[#eee] text-sm text-[#666] hover:text-black md:ml-8 md:border-none"
href="https://status.snapify.it"
>
Status
</a>
<div className="mr-8 flex w-full flex-col sm:px-[50px] md:w-auto md:flex-row md:gap-8 md:px-0">
{[
{ name: "Privacy Policy", link: "/legal/privacy-policy" },
{ name: "Terms and Conditions", link: "/legal/terms" },
{ name: "Status", link: "https://status.snapify.it" },
{ name: "Impressum", link: "/legal/impressum" },
].map(({ name, link }) => (
<Link
key={name}
className="flex h-[42px] cursor-pointer items-center border-b border-[#eee] text-sm text-[#666] hover:text-black md:border-none"
href={link}
>
{name}
</Link>
))}
</div>
</footer>
</div>