feat: kamp page
This commit is contained in:
474
apps/web/src/routes/kamp.tsx
Normal file
474
apps/web/src/routes/kamp.tsx
Normal file
@@ -0,0 +1,474 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user