Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "feat: full responsive layout — mobile-first, lg breakpoint, fluid typography"

Browse Source 
This reverts commit 2505a87717.
This commit is contained in:
Marco
2026-06-30 22:07:51 +00:00
parent 2505a87717
commit b946697b12
9 changed files with 172 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/About.tsx
+16 -15
View File
@@ -1,31 +1,32 @@
export function About() {
return (
<section id="ueber-bjoern" className="bg-[#111] flex flex-col lg:flex-row items-stretch w-full">
<section id="ueber-bjoern" className="bg-[#111] flex items-stretch w-full">
{/* Left: text content */}
<div className="flex-[1_0_0] flex flex-col gap-4 justify-center px-4 md:px-8 lg:px-[5rem] py-10 lg:py-8 min-w-0">
{/* Left: text content — flex-[1_0_0] = flex: 1 0 0, no shrink, exactly 50% */}
<div className="flex-[1_0_0] flex flex-col gap-4 justify-center px-[5rem] py-8 min-w-0">
{/* Large serif statement */}
{/* Large serif statement — width-constrained as per design */}
<p
className="font-semibold text-white leading-normal"
style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.375rem, 2.5vw, 1.75rem)", maxWidth: "17.625rem" }}
className="font-semibold text-white text-[1.75rem] leading-normal w-[17.625rem]"
style={{ fontFamily: "var(--font-lora)" }}
>
Ich glaube nicht, dass Menschen mehr Disziplin brauchen.
</p>
{/* Quote row: script quote + golden divider + author bio */}
<div className="flex items-start justify-between w-full gap-4">
<div className="flex items-start justify-between w-full">
{/* Caveat script text with signature */}
{/* Caveat script text with signature positioned below */}
<div className="relative flex-1" style={{ minHeight: "8rem" }}>
<div
className="font-normal text-[#f6a701]"
style={{ fontFamily: "var(--font-caveat)", fontSize: "clamp(1.75rem, 3vw, 2.25rem)", lineHeight: "2rem" }}
className="font-normal text-[#f6a701] text-[2.25rem]"
style={{ fontFamily: "var(--font-caveat)", lineHeight: "2rem" }}
>
<p>Ich glaube,</p>
<p>sie brauchen&nbsp;</p>
<p>weniger Reibung.</p>
</div>
{/* Signature — absolute, sits just below the three Caveat lines (3 × 32px = 96px) */}
<div
className="absolute overflow-hidden pointer-events-none"
style={{ top: "6.44rem", left: "1.5rem", width: "9.375rem", height: "1.375rem" }}
@@ -39,12 +40,12 @@ export function About() {
</div>
</div>
{/* Golden divider + author */}
<div className="flex gap-4 lg:gap-6 items-start shrink-0">
{/* Golden vertical divider + author lines */}
<div className="flex gap-6 items-start shrink-0">
<div className="bg-[#f6a701] w-[2px] h-24 shrink-0" />
<div
className="text-white font-normal whitespace-nowrap"
style={{ fontSize: "clamp(0.875rem, 1.5vw, 1rem)", lineHeight: "1.5rem" }}
style={{ fontSize: "1rem", lineHeight: "1.5rem" }}
>
<p>Björn.</p>
<p>Führungskraft.</p>
@@ -56,8 +57,8 @@ export function About() {
</div>
</div>
{/* Right: author photo */}
<div className="flex-[1_0_0] relative overflow-hidden" style={{ minHeight: "18rem" }}>
{/* Right: author photo — flex-[1_0_0] keeps it at exactly 50% */}
<div className="flex-[1_0_0] relative overflow-hidden" style={{ minHeight: "14rem" }}>
<img
alt="Björn"
src="/about-author.jpg"