474 lines
12 KiB
TypeScript
474 lines
12 KiB
TypeScript
import { createFileRoute, Link } from "@tanstack/react-router";
|
||
import { useEffect, useState } from "react";
|
||
|
||
const KAMP_URL = "https://ejv.be/jong/kampen/kunstenkamp/";
|
||
|
||
export const Route = createFileRoute("/kamp")({
|
||
component: KampPage,
|
||
});
|
||
|
||
const STYLES = `
|
||
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Special+Elite&display=swap');
|
||
|
||
@keyframes kampPressIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
body.kamp-page {
|
||
background-color: #d6cdb0 !important;
|
||
overflow: hidden;
|
||
}
|
||
|
||
body.kamp-page ::selection {
|
||
background: #12100e;
|
||
color: #ede4c8;
|
||
}
|
||
|
||
.kamp-scroll::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.kamp-scroll::-webkit-scrollbar-track {
|
||
background: #c9c0a4;
|
||
}
|
||
.kamp-scroll::-webkit-scrollbar-thumb {
|
||
background: #12100e;
|
||
}
|
||
`;
|
||
|
||
const PAPER = "#ede4c8";
|
||
const INK = "#12100e";
|
||
const INK_MID = "rgba(18,16,14,0.5)";
|
||
const INK_GHOST = "rgba(18,16,14,0.2)";
|
||
const RULE_W = "rgba(18,16,14,0.75)";
|
||
|
||
function TripleRule() {
|
||
return (
|
||
<div style={{ display: "flex", flexDirection: "column", gap: "3px" }}>
|
||
<div style={{ height: "3px", background: INK }} />
|
||
<div style={{ height: "1px", background: RULE_W }} />
|
||
<div style={{ height: "2px", background: INK }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DoubleRule() {
|
||
return (
|
||
<div style={{ display: "flex", flexDirection: "column", gap: "3px" }}>
|
||
<div style={{ height: "2px", background: RULE_W }} />
|
||
<div style={{ height: "1px", background: RULE_W }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function KampPage() {
|
||
const [mounted, setMounted] = useState(false);
|
||
const [ctaHovered, setCtaHovered] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (!document.getElementById("kamp-newspaper-styles")) {
|
||
const el = document.createElement("style");
|
||
el.id = "kamp-newspaper-styles";
|
||
el.textContent = STYLES;
|
||
document.head.appendChild(el);
|
||
}
|
||
document.body.classList.add("kamp-page");
|
||
const t = setTimeout(() => setMounted(true), 60);
|
||
return () => {
|
||
document.body.classList.remove("kamp-page");
|
||
clearTimeout(t);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
height: "100dvh",
|
||
background: "#d6cdb0",
|
||
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E")`,
|
||
backgroundRepeat: "repeat",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
padding: "1.5rem 1rem",
|
||
}}
|
||
>
|
||
{/* Newspaper page */}
|
||
<article
|
||
className="kamp-scroll"
|
||
style={{
|
||
width: "100%",
|
||
maxWidth: "700px",
|
||
height: "100%",
|
||
background: PAPER,
|
||
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E")`,
|
||
border: `1px solid ${INK}`,
|
||
boxShadow:
|
||
"3px 5px 24px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12)",
|
||
opacity: mounted ? 1 : 0,
|
||
animation: mounted ? "kampPressIn 0.9s ease both" : undefined,
|
||
overflowY: "auto",
|
||
}}
|
||
>
|
||
{/* Outer decorative border inset */}
|
||
<div
|
||
style={{
|
||
margin: "6px",
|
||
border: `1px solid ${INK}`,
|
||
}}
|
||
>
|
||
{/* Top flag strip */}
|
||
<div
|
||
style={{
|
||
borderBottom: `1px solid ${INK}`,
|
||
padding: "7px 20px 6px",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
<Link
|
||
to="/"
|
||
style={{
|
||
fontFamily: "'Special Elite', cursive",
|
||
fontSize: "10px",
|
||
letterSpacing: "0.18em",
|
||
color: INK,
|
||
textDecoration: "none",
|
||
borderBottom: `1px solid ${INK}`,
|
||
paddingBottom: "1px",
|
||
}}
|
||
>
|
||
← Open Mic Night
|
||
</Link>
|
||
<span
|
||
style={{
|
||
fontFamily: "'Special Elite', cursive",
|
||
fontSize: "9px",
|
||
letterSpacing: "0.18em",
|
||
color: INK_MID,
|
||
}}
|
||
>
|
||
✦ · ✦ · ✦
|
||
</span>
|
||
<span
|
||
style={{
|
||
fontFamily: "'Special Elite', cursive",
|
||
fontSize: "9px",
|
||
letterSpacing: "0.22em",
|
||
textTransform: "uppercase",
|
||
color: INK_MID,
|
||
}}
|
||
>
|
||
Anno 2026
|
||
</span>
|
||
</div>
|
||
|
||
{/* Masthead */}
|
||
<div
|
||
style={{
|
||
padding: "20px 24px 16px",
|
||
textAlign: "center",
|
||
borderBottom: `1px solid ${INK}`,
|
||
}}
|
||
>
|
||
<h1
|
||
style={{
|
||
fontFamily: "'UnifrakturMaguntia', cursive",
|
||
fontSize: "clamp(2.4rem, 9vw, 4.5rem)",
|
||
color: INK,
|
||
margin: 0,
|
||
lineHeight: 1,
|
||
letterSpacing: "0.02em",
|
||
}}
|
||
>
|
||
De Kunstenkamp Gazet
|
||
</h1>
|
||
</div>
|
||
|
||
{/* Publication bar */}
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
padding: "6px 20px 5px",
|
||
borderBottom: `1px solid ${INK}`,
|
||
}}
|
||
>
|
||
{[
|
||
"Vol. CCXXVI",
|
||
"Zomerkamp · Juli 2026",
|
||
"Prijs: uw aanwezigheid",
|
||
].map((t) => (
|
||
<span
|
||
key={t}
|
||
style={{
|
||
fontFamily: "'Special Elite', cursive",
|
||
fontSize: "10px",
|
||
color: INK_MID,
|
||
letterSpacing: "0.1em",
|
||
}}
|
||
>
|
||
{t}
|
||
</span>
|
||
))}
|
||
</div>
|
||
|
||
{/* Main content area */}
|
||
<div style={{ padding: "28px 28px 24px" }}>
|
||
{/* Triple rule */}
|
||
<div style={{ marginBottom: "24px" }}>
|
||
<TripleRule />
|
||
</div>
|
||
|
||
{/* Main headline */}
|
||
<div style={{ textAlign: "center", marginBottom: "16px" }}>
|
||
<h2
|
||
style={{
|
||
fontFamily: "'Playfair Display', serif",
|
||
fontWeight: 900,
|
||
fontSize: "clamp(2.6rem, 9vw, 4.5rem)",
|
||
color: INK,
|
||
textTransform: "uppercase",
|
||
letterSpacing: "0.06em",
|
||
lineHeight: 0.95,
|
||
margin: "0 0 14px",
|
||
}}
|
||
>
|
||
Wat Is Waar?
|
||
</h2>
|
||
<p
|
||
style={{
|
||
fontFamily: "'Playfair Display', serif",
|
||
fontStyle: "italic",
|
||
fontSize: "clamp(1rem, 2.5vw, 1.2rem)",
|
||
color: INK_MID,
|
||
margin: 0,
|
||
lineHeight: 1.45,
|
||
}}
|
||
>
|
||
Een krant. Een tijdmachine. De waarheid doorheen de eeuwen.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Triple rule */}
|
||
<div style={{ marginBottom: "22px" }}>
|
||
<TripleRule />
|
||
</div>
|
||
|
||
{/* Editorial body copy */}
|
||
<p
|
||
style={{
|
||
fontFamily: "'EB Garamond', serif",
|
||
fontSize: "clamp(1.05rem, 2.2vw, 1.2rem)",
|
||
color: INK,
|
||
lineHeight: 1.75,
|
||
margin: "0 0 10px",
|
||
textAlign: "justify",
|
||
hyphens: "auto",
|
||
}}
|
||
>
|
||
In de zomer van 1826 — en opnieuw in 2026 — reizen onze
|
||
verslaggevers terug naar de roerige redactiezalen van de
|
||
negentiende eeuw. Waar de drukpers ronkt, de rookmachines tieren
|
||
en elke kop een mening verbergt, stellen wij de vraag die door
|
||
alle eeuwen galmt: <em>wat mogen wij geloven?</em>
|
||
</p>
|
||
<p
|
||
style={{
|
||
fontFamily: "'EB Garamond', serif",
|
||
fontStyle: "italic",
|
||
fontSize: "clamp(0.95rem, 2vw, 1.08rem)",
|
||
color: INK_MID,
|
||
lineHeight: 1.7,
|
||
margin: "0 0 24px",
|
||
textAlign: "justify",
|
||
hyphens: "auto",
|
||
}}
|
||
>
|
||
Twee waarheden en een leugen. Vier bolhoeden en één typmachine.
|
||
Bereid u voor op een week journalistiek, theater, dans en
|
||
woordkunst — alles gehuld in inkt en papier-maché.
|
||
</p>
|
||
|
||
{/* Ornamental divider */}
|
||
<p
|
||
style={{
|
||
textAlign: "center",
|
||
fontFamily: "'EB Garamond', serif",
|
||
fontSize: "13px",
|
||
color: INK_GHOST,
|
||
margin: "0 0 24px",
|
||
letterSpacing: "0.4em",
|
||
}}
|
||
>
|
||
— ✦ · ✦ · ✦ —
|
||
</p>
|
||
|
||
{/* Details grid */}
|
||
<div
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "1fr 1fr",
|
||
border: `1px solid ${INK}`,
|
||
marginBottom: "28px",
|
||
}}
|
||
>
|
||
{[
|
||
{ label: "Primo", value: "20 – 25 Juli 2026" },
|
||
{ label: "Secundo", value: "27 Juli – 1 Aug 2026" },
|
||
{
|
||
label: "Leeftijd",
|
||
value: "9 – 18 jaar",
|
||
sub: "* geboortejaar dat je 10 wordt",
|
||
},
|
||
{
|
||
label: "Locatie",
|
||
value: "Camp de Limauges",
|
||
sub: "Ceroux-Mousty · België",
|
||
},
|
||
].map(({ label, value, sub }, i) => (
|
||
<div
|
||
key={label}
|
||
style={{
|
||
padding: "16px 18px",
|
||
borderRight: i % 2 === 0 ? `1px solid ${INK}` : undefined,
|
||
borderTop: i >= 2 ? `1px solid ${INK}` : undefined,
|
||
}}
|
||
>
|
||
<p
|
||
style={{
|
||
fontFamily: "'Special Elite', cursive",
|
||
fontSize: "9px",
|
||
letterSpacing: "0.3em",
|
||
textTransform: "uppercase",
|
||
color: INK_MID,
|
||
margin: "0 0 6px",
|
||
}}
|
||
>
|
||
{label}
|
||
</p>
|
||
<p
|
||
style={{
|
||
fontFamily: "'Playfair Display', serif",
|
||
fontWeight: 700,
|
||
fontSize: "clamp(1rem, 2.5vw, 1.15rem)",
|
||
color: INK,
|
||
margin: 0,
|
||
lineHeight: 1.3,
|
||
}}
|
||
>
|
||
{value}
|
||
</p>
|
||
{sub && (
|
||
<p
|
||
style={{
|
||
fontFamily: "'EB Garamond', serif",
|
||
fontStyle: "italic",
|
||
fontSize: "13px",
|
||
color: INK_MID,
|
||
margin: "4px 0 0",
|
||
}}
|
||
>
|
||
{sub}
|
||
</p>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Double rule */}
|
||
<div style={{ marginBottom: "24px" }}>
|
||
<DoubleRule />
|
||
</div>
|
||
|
||
{/* CTA — inverted ink block */}
|
||
<div style={{ marginBottom: "4px" }}>
|
||
<p
|
||
style={{
|
||
fontFamily: "'Special Elite', cursive",
|
||
fontSize: "9px",
|
||
letterSpacing: "0.35em",
|
||
textTransform: "uppercase",
|
||
color: INK_MID,
|
||
textAlign: "center",
|
||
margin: "0 0 10px",
|
||
}}
|
||
>
|
||
✦ Aankondiging ✦
|
||
</p>
|
||
|
||
<a
|
||
href={KAMP_URL}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
onMouseEnter={() => setCtaHovered(true)}
|
||
onMouseLeave={() => setCtaHovered(false)}
|
||
style={{
|
||
display: "block",
|
||
background: ctaHovered ? "#2a2418" : INK,
|
||
color: PAPER,
|
||
textDecoration: "none",
|
||
textAlign: "center",
|
||
padding: "28px 32px 26px",
|
||
outline: `2px solid ${INK}`,
|
||
outlineOffset: "4px",
|
||
transition: "background 0.2s ease",
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
display: "block",
|
||
fontFamily: "'Playfair Display', serif",
|
||
fontWeight: 900,
|
||
fontSize: "clamp(1.5rem, 5vw, 2.4rem)",
|
||
textTransform: "uppercase",
|
||
letterSpacing: "0.1em",
|
||
lineHeight: 1,
|
||
marginBottom: "10px",
|
||
}}
|
||
>
|
||
Schrijf U In
|
||
</span>
|
||
<span
|
||
style={{
|
||
display: "block",
|
||
fontFamily: "'Special Elite', cursive",
|
||
fontSize: "clamp(0.7rem, 2vw, 0.85rem)",
|
||
letterSpacing: "0.25em",
|
||
opacity: 0.65,
|
||
}}
|
||
>
|
||
via ejv.be →
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div
|
||
style={{
|
||
borderTop: `1px solid ${INK}`,
|
||
padding: "7px 20px 8px",
|
||
textAlign: "center",
|
||
}}
|
||
>
|
||
<p
|
||
style={{
|
||
fontFamily: "'EB Garamond', serif",
|
||
fontStyle: "italic",
|
||
fontSize: "12px",
|
||
color: INK_GHOST,
|
||
margin: 0,
|
||
letterSpacing: "0.06em",
|
||
}}
|
||
>
|
||
Kunst · Expressie · Avontuur · Waar is de waarheid?
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
);
|
||
}
|