Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: dark mode

Browse Source
This commit is contained in:
ISA
2025-09-08 15:01:34 +02:00
parent 12d3a17f60
commit d163df0d96
30 changed files with 380 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/footer/Footer.tsx
View File

@@ -55,45 +55,46 @@ function Footer() {
}, [showSlider]);
return (
<footer className="relative bg-gray-300 p-4 xl:p-2 2xl:p-4 overflow-hidden text-black laptop:h-[5vh] ">
<footer className="relative bg-[var(--color-surface-alt)] border-t border-base p-4 xl:p-2 2xl:p-4 overflow-hidden text-[var(--color-fg)] laptop:h-[5vh] theme-transition">
<div className="container mx-auto flex justify-between">
<div className="flex flex-row space-x-2">
<div className="flex flex-row space-x-2 items-center">
<Icon
icon="material-symbols:factory-outline"
className="text-xl text-blue-400"
className="text-xl text-accent"
/>
<p className="text-sm">Littwin Systemtechnik GmbH & Co. KG</p>
<p className="text-sm text-fg-muted">Littwin Systemtechnik GmbH & Co. KG</p>
</div>
<div className="flex flex-row space-x-2">
<Icon icon="charm:phone" className="text-xl text-blue-400" />
<p className="text-sm">Telefon: 04402 972577-0</p>
<div className="flex flex-row space-x-2 items-center">
<Icon icon="charm:phone" className="text-xl text-accent" />
<p className="text-sm text-fg-muted">Telefon: 04402 972577-0</p>
</div>
<div className="flex flex-row space-x-2">
<Icon icon="mdi:email-outline" className="text-xl text-blue-400" />
<p className="text-sm">kontakt@littwin-systemtechnik.de</p>
<div className="flex flex-row space-x-2 items-center">
<Icon icon="mdi:email-outline" className="text-xl text-accent" />
<p className="text-sm text-fg-muted">kontakt@littwin-systemtechnik.de</p>
</div>
<div
className="flex flex-row space-x-2 cursor-pointer"
className="flex flex-row space-x-2 cursor-pointer items-center group"
onClick={() => setShowSlider(true)}
>
<Icon icon="bi:book" className="text-xl text-blue-400" />
<p className="text-sm">Handbücher</p>
<Icon icon="bi:book" className="text-xl text-accent group-hover:brightness-110 transition" />
<p className="text-sm text-fg-muted group-hover:text-[var(--color-fg)] transition">Handbücher</p>
</div>
</div>
<div
ref={sliderRef}
className={`fixed top-0 right-0 w-64 h-full bg-white shadow-lg transform transition-transform duration-300 ${
className={`fixed top-0 right-0 w-64 h-full bg-[var(--color-surface)] border-l border-base shadow-lg transform transition-transform duration-300 ${
showSlider ? "translate-x-0" : "translate-x-full"
}`}
>
<div className="p-4 flex justify-between items-center border-b">
<h3 className="text-lg font-semibold">PDF Handbücher</h3>
<div className="p-4 flex justify-between items-center border-b border-base">
<h3 className="text-base font-semibold text-[var(--color-fg)]">PDF Handbücher</h3>
<button
className="text-gray-500 hover:text-gray-800"
className="text-[var(--color-muted)] hover:text-[var(--color-fg)] transition"
onClick={() => setShowSlider(false)}
aria-label="Schließen"
>
<Icon icon="carbon:close" className="text-2xl" />
<Icon icon="carbon:close" className="text-xl" />
</button>
</div>
@@ -102,7 +103,7 @@ function Footer() {
{pdfFiles.map((fileName) => (
<li
key={fileName}
className="cursor-pointer text-blue-500 hover:underline mb-2"
className="cursor-pointer text-accent hover:underline mb-2 text-sm"
onClick={() => loadPDF(fileName)}
>
{fileName}