Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: restore CSS-only transitions and update config examples

Browse Source
This commit is contained in:
ralksta
2026-03-07 09:13:36 +01:00
parent 59ffe37cce
commit fd965c5a75
5 changed files with 82 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/globals.css
View File

@@ -60,6 +60,22 @@
padding: 104px 24px 96px; /* 56px header + 48px original padding */
}
/* Simple CSS Page Fade-In (Replaces Framer Motion) */
[data-transitions='true'] .main {
animation: page-fade-in 0.5s ease-out forwards;
}
@keyframes page-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Homepage hero + About page use full bleed — override main padding */
.main:has(.hero),
.main:has(.about) {

111
app/impressum/page.tsx
View File

@@ -7,6 +7,7 @@ import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { getConfig } from '@/lib/config';
import { BackLink } from '@/components/BackLink';
import { FadeIn } from '@/components/FadeIn';
import './impressum.css';
export const metadata: Metadata = {
@@ -25,68 +26,72 @@ export default function ImpressumPage() {
<div className="subpage-container">
<header className="subpage-header">
<BackLink href="/" label="Home" />
<h1 className="subpage-title">Impressum</h1>
<p className="subpage-subtitle">Angaben gemäß § 5 TMG</p>
<FadeIn>
<h1 className="subpage-title">Impressum</h1>
<p className="subpage-subtitle">Angaben gemäß § 5 TMG</p>
</FadeIn>
</header>
<main className="subpage-content" style={{ maxWidth: '600px', margin: '0 auto' }}>
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Anschrift</h2>
<p style={{ lineHeight: 1.6 }}>
{legal.name}
<br />
{legal.address}
<br />
{legal.zipCity}
<br />
{legal.country}
</p>
</section>
{(legal.email || legal.phone) && (
<FadeIn delay={0.1}>
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Kontakt</h2>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Anschrift</h2>
<p style={{ lineHeight: 1.6 }}>
{legal.email && (
<>
E-Mail: {legal.email}
<br />
</>
)}
{legal.phone && <>Telefon: {legal.phone}</>}
{legal.name}
<br />
{legal.address}
<br />
{legal.zipCity}
<br />
{legal.country}
</p>
</section>
)}
{(legal.taxId || legal.vatId) && (
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
Steuernummer
</h2>
<p style={{ lineHeight: 1.6 }}>
{legal.taxId && (
<>
Steuernummer: {legal.taxId}
<br />
</>
)}
{legal.vatId && <>Umsatzsteuer-ID: {legal.vatId}</>}
</p>
{(legal.email || legal.phone) && (
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>Kontakt</h2>
<p style={{ lineHeight: 1.6 }}>
{legal.email && (
<>
E-Mail: {legal.email}
<br />
</>
)}
{legal.phone && <>Telefon: {legal.phone}</>}
</p>
</section>
)}
{(legal.taxId || legal.vatId) && (
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
Steuernummer
</h2>
<p style={{ lineHeight: 1.6 }}>
{legal.taxId && (
<>
Steuernummer: {legal.taxId}
<br />
</>
)}
{legal.vatId && <>Umsatzsteuer-ID: {legal.vatId}</>}
</p>
</section>
)}
{legal.extraInfo && (
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
Weitere Informationen
</h2>
<p style={{ lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{legal.extraInfo}</p>
</section>
)}
<section style={{ marginTop: '4rem', fontSize: '0.85rem', opacity: 0.6 }}>
<p>Quelle: Erstellt mit dem Impressum-Generator von eRecht24.</p>
</section>
)}
{legal.extraInfo && (
<section style={{ marginBottom: '2rem' }}>
<h2 style={{ fontSize: '1.2rem', marginBottom: '0.5rem', opacity: 0.8 }}>
Weitere Informationen
</h2>
<p style={{ lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{legal.extraInfo}</p>
</section>
)}
<section style={{ marginTop: '4rem', fontSize: '0.85rem', opacity: 0.6 }}>
<p>Quelle: Erstellt mit dem Impressum-Generator von eRecht24.</p>
</section>
</FadeIn>
</main>
</div>
);

1
app/layout.tsx
View File

@@ -63,6 +63,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
data-grain={theme.grain}
data-header-dot={theme.headerDot}
data-photo-frame={theme.photoFrame}
data-transitions={config.transitions}
>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />