fundbureau: single-page site + Docker/Proxmox deploy

2026-06-29 23:47:33 +02:00
commit 2a55706a88
17 changed files with 368 additions and 0 deletions
@@ -0,0 +1,126 @@
+/* ---------------------------------------------------------------
+   FUND BUREAU — minimal frontpage
+   typography: Neue Haas Grotesk (lizenzpflichtig). lege deine
+   woff2-dateien in static/fonts/ ab, dann greifen die @font-face
+   regeln unten. bis dahin: klassischer Helvetica-fallback.
+   --------------------------------------------------------------- */
+
+@font-face {
+  font-family: "Neue Haas Grotesk";
+  src: url("/fonts/neue-haas-grotesk-display-55-roman.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Neue Haas Grotesk";
+  src: url("/fonts/neue-haas-grotesk-display-65-medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --ink: #111;
+  --paper: #fff;
+  --gap: clamp(1.25rem, 4vw, 2.5rem);
+  /* gemeinsame spaltenbreite: titel, bild und adresse fluchten links */
+  --media: min(100%, 56vh, 560px);
+  --grotesk: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  padding: var(--gap);
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: var(--gap);
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--grotesk);
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
+
+a { color: inherit; text-decoration: none; }
+a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
+
+/* wordmark, oben — linke kante auf der bildkante ------------------------- */
+.wordmark {
+  width: var(--media);
+  margin-inline: auto;
+}
+.wordmark a {
+  display: inline-block;
+  font-weight: 500;
+  font-size: clamp(1.5rem, 4.5vw, 3rem);
+  letter-spacing: -0.02em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+.wordmark a:hover { text-decoration: none; }
+
+/* mitte: quadratisches bild + adresse ------------------------------------ */
+.stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap);
+}
+
+.hero {
+  margin: 0;
+  width: var(--media);
+  aspect-ratio: 1 / 1;   /* quadratische box erzwingen */
+}
+.hero img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;     /* bild füllt die box, wird beschnitten */
+  background: #ececec;
+}
+
+/* intro + adresse, unter dem bild ---------------------------------------- */
+.colophon {
+  width: var(--media);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4em var(--gap);
+  justify-content: space-between;
+  font-size: clamp(0.85rem, 1.6vw, 1rem);
+  line-height: 1.4;
+}
+.colophon .intro { margin: 0; max-width: 22ch; }
+
+.colophon address {
+  font-style: normal;
+  display: flex;
+  flex-direction: column;
+}
+.colophon address span,
+.colophon address a { display: block; }
+
+/* fuss ------------------------------------------------------------------- */
+.credit {
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  opacity: 0.6;
+  text-transform: lowercase;
+}
+.credit p { margin: 0; }
+
+@media (max-width: 600px) {
+  .colophon { flex-direction: column; }
+}