/* ============================================================ FEED und NEWS -- die EINE Quelle fuer das Aussehen dieser zwei Bereiche. ============================================================ Beide bekamen am 15.9. auf CEO-Wunsch eine eigene Gestaltung, die es sonst nirgends auf LFX gibt, und beide teilen GENAU EINE Sache: das Pink (`--lfx-pink`). Sonst sind es zwei verschiedene Sprachen, und das ist Absicht -- man soll nie im Zweifel sein, ob man im Feed oder im Magazin liest: | | FEED (Console) | NEWS (unter PLAY) | |---|---|---| | Vorbild | Y2K-Snack-Packaging (Referenzbild vom CEO) | VICE-Magazine ("mach das News-Modul wieder zu einem VICE-Magazine-Layout, aber mit der pinken Farbe") | | Schrift | Bitmap: Press Start 2P (Wortmarke) + Silkscreen | die drei LFX-Schriften: Archivo Black / Archivo Variable / Tabular Light | | Pink | FLAECHE (jede Karte traegt sie) | AKZENT (Rubriken, Linien, einzelne Kacheln) | | Kontrast | Neongruen als zweite Farbe | nur Schwarz/Weiss, sonst nichts | | Form | eine Spalte, Kaesten mit harter Pixelkante, Rasterzeilen, Dither, abgetreppte Ecken | dichtes, ungleichmaessiges Magazin-Raster, schwere Linien, Graustufen-Fotos | | Klasse | `.lfx-pix` | `.lfx-mag` | ABSICHTLICH NUR HIER. Der Rest der Seite (PLAY-Player/Kalender, Topleiste, EVENTS, FIELD, ABOUT, Artist Tools) bleibt unveraendert in der Schweizer Schwarz/Weiss/Blau-Sprache. Deshalb haengt jede Regel unter einer der beiden Klassen; ohne sie im Vorfahren aendert diese Datei nichts. Gesetzt werden sie an vier Stellen: - PostStream.jsx `.lfx-pix` (Feed-Liste in der Console) - PostStream.jsx `.lfx-pix` (geoeffneter Beitrag, Portal am ) - ConsoleFeed.jsx `.lfx-pix` (Sets/Termine/Releases mit Filterleiste, auf Artist-Profilen) - NewsSection.jsx `.lfx-mag` (Magazin: Liste und Artikel) Der Leser auf PLAY (Beitrag aus der Programmliste, StationSections.jsx) liegt bewusst in keiner der beiden und bleibt, wie er war. EINE Datei fuer zwei Dienste: Feed lebt in social, News in hub. Beide binden diese Datei ueber die bestehende /shared/*-Route ein (Muster: shared/topbar.css). Zwei Kopien wuerden auseinanderlaufen, und das Pink waere dann zweimal definiert. Die frueheren .news-*- und Feed-Regeln in hub/index.html und social/public/index.html sind ENTFERNT, nicht ueberschrieben. WARUM KEIN ROT. #e6483c ist auf LFX das Sendesignal (ON AIR, Aufnahme, Live). Es kommt in beiden Bereichen nicht vor, sonst verliert es seine Bedeutung. Einzige Ausnahme: das Herz -- Favorisieren ist ein seitenweites System mit einer festen Farbe (--lfx-heart). ============================================================ */ /* Das eine Pink beider Bereiche. Global deklariert, damit es EINEN Wert gibt; sichtbar wird es nur dort, wo es unten benutzt wird. */ :root{ --lfx-pink:#ff2e85; } /* ============================================================ TEIL 1 -- FEED (`.lfx-pix`) ============================================================ Vorbild war ein Getraenke-Packaging: knalliges Pink als Flaeche, Neongruen als Kontrast, Wortmarke in einer dicken Bitmap-Schrift, Kleingedrucktes in duenn umrandeten Kaestchen, Y2K-Digitalspielzeug. Uebernommen ist die Energie, nicht die fremde Marke. SCHRIFTEN (SIL Open Font License, selbst gehostet wie alle anderen -- siehe hub/fonts/PIXEL-FONTS-LICENSE.txt): - 'Press Start 2P' NUR die Wortmarke ueber dem Feed. Sehr breit laufend: als Textschrift unbrauchbar, als Logo genau richtig. - 'Silkscreen' Titel, Marken, Kleingedrucktes, Datumsangaben. Fliesstext bleibt 'Archivo Variable' -- ein Absatz in Bitmap ist nach zwei Zeilen unlesbar, und Lesbarkeit steht ueber dem Effekt. */ @font-face{ font-family:'Press Start 2P'; src:url('/fonts/PressStart2P-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Silkscreen'; src:url('/fonts/Silkscreen-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Silkscreen'; src:url('/fonts/Silkscreen-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } .lfx-pix{ --pix-pink:var(--lfx-pink); --pix-acid:#c8ff2e; --pix-ink:#0a0a0a; --pix-text:#f4f4f4; --pix-dim:#a9a9a9; /* 6.9:1 auf #0a0a0a -- reicht auch fuer Fliesstext */ --pix-shade:rgba(0,0,0,.78); /* Kleingedrucktes AUF Pink/Neon */ --pix-line:2px; /* eine Linienstaerke, wie im Rest der Seite */ --pix-step:6px; /* Stufe der abgetreppten Ecken */ /* Abstandsskala: 4 / 8 / 12 / 20 / 32 / 48 */ --pix-1:4px; --pix-2:8px; --pix-3:12px; --pix-4:20px; --pix-5:32px; --pix-6:48px; --pix-display:'Press Start 2P','Silkscreen',monospace; --pix-bitmap:'Silkscreen','Archivo Variable',monospace; --pix-read:'Archivo Variable',sans-serif; } /* Abgetreppte Ecken: die Pixel-Version einer Abrundung -- vier Ecken um genau eine Stufe eingeschnitten, nichts Weiches daran. */ .lfx-pix .st-head{ clip-path:polygon( 0 var(--pix-step), var(--pix-step) var(--pix-step), var(--pix-step) 0, calc(100% - var(--pix-step)) 0, calc(100% - var(--pix-step)) var(--pix-step), 100% var(--pix-step), 100% calc(100% - var(--pix-step)), calc(100% - var(--pix-step)) calc(100% - var(--pix-step)), calc(100% - var(--pix-step)) 100%, var(--pix-step) 100%, var(--pix-step) calc(100% - var(--pix-step)), 0 calc(100% - var(--pix-step)) ); } /* ---------- Wortmarken-Band ---------- Das Referenzbild ist im Kern eine Flaeche mit einer riesigen Wortmarke und Kleingedrucktem im Kaestchen darunter. Genau das ist der Kopf des Feeds -- die Rasterzeilen darueber machen daraus ein Display statt eines Plakats. */ .lfx-pix .st-head{ position:relative; display:block; text-align:center; background:var(--pix-pink); color:var(--pix-ink); padding:var(--pix-5) var(--pix-4) var(--pix-4); margin:0 0 var(--pix-4); } .lfx-pix .st-head::before{ content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); } .lfx-pix .st-title{ position:relative; margin:0; font-family:var(--pix-display); font-weight:400; font-size:clamp(20px, 7.4vw, 40px); line-height:1.1; letter-spacing:0; text-transform:uppercase; color:var(--pix-ink); } /* Blinkender Cursor hinter der Wortmarke -- die eine Bewegung in diesem Bereich, mechanisch (steps) statt weich. */ .lfx-pix .st-title::after{ content:''; display:inline-block; width:.62em; height:.8em; margin-left:.28em; background:var(--pix-ink); vertical-align:-.05em; animation:pixBlink 1.1s steps(1, end) infinite; } @keyframes pixBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } } /* Kleingedrucktes im Kaestchen, wie die Boxen oben im Referenzbild. */ .lfx-pix .st-sub{ position:relative; display:inline-block; margin-top:var(--pix-3); border:var(--pix-line) solid var(--pix-ink); padding:var(--pix-1) var(--pix-2); font-family:var(--pix-bitmap); font-weight:400; font-size:9px; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; color:var(--pix-ink); } /* ---------- Kaestchen-Knoepfe: Schlagworte und Filterleisten ---------- Dieselbe Form fuer die Schlagwort-Leiste ueber dem Strom (PostStream) und fuer ALL/SETS/DATES/RELEASES auf einem Artist-Profil (ConsoleFeed) -- es ist dieselbe Handlung, also dieselbe Gestalt. */ .lfx-pix .post-tagbar, .lfx-pix .cf-chips{ display:flex; flex-wrap:wrap; gap:var(--pix-2); max-width:680px; margin:0 auto var(--pix-4); padding:0; } .lfx-pix .post-tags{ display:flex; flex-wrap:wrap; gap:var(--pix-2); padding:var(--pix-3); } .lfx-pix .post-tag, .lfx-pix .post-tag-btn, .lfx-pix .cf-chip{ display:inline-flex; align-items:center; min-height:34px; padding:var(--pix-1) var(--pix-2); cursor:pointer; background:none; border:var(--pix-line) solid var(--pix-pink); color:var(--pix-pink); font-family:var(--pix-bitmap); font-weight:400; font-size:10px; letter-spacing:.06em; text-transform:lowercase; } .lfx-pix .cf-chip{ text-transform:uppercase; letter-spacing:.1em; } .lfx-pix .post-tag.on, .lfx-pix .post-tag-btn.on, .lfx-pix .cf-chip.on{ background:var(--pix-pink); color:var(--pix-ink); text-decoration:none; } .lfx-pix .post-tag:active, .lfx-pix .post-tag-btn:active, .lfx-pix .cf-chip:active{ opacity:.6; } .lfx-pix .post-tag:focus-visible, .lfx-pix .post-tag-btn:focus-visible, .lfx-pix .cf-chip:focus-visible{ outline:var(--pix-line) solid var(--pix-text); outline-offset:2px; } /* Schlagworte in der Lesefassung sind keine Knoepfe -- ruhiger gesetzt. */ .lfx-pix .post-tags-read .post-tag{ border-color:var(--pix-dim); color:var(--pix-dim); } /* ---------- Leer- und Ladezustaende ---------- Gestaltet, nicht "no data": ein umrandetes Kaestchen mit Bitmap-Text und blinkendem Cursor -- ein Display, das gerade nichts anzeigt. */ .lfx-pix .st-empty, .lfx-pix .feed-empty{ max-width:680px; margin:0 auto; padding:var(--pix-4); border:var(--pix-line) solid var(--pix-pink); background:var(--pix-ink); font-family:var(--pix-bitmap); font-size:11px; line-height:1.6; letter-spacing:.06em; text-transform:uppercase; color:var(--pix-text); } .lfx-pix .st-empty::after, .lfx-pix .feed-empty::after{ content:''; display:inline-block; width:.6em; height:.9em; margin-left:.3em; background:var(--pix-pink); vertical-align:-.1em; animation:pixBlink 1.1s steps(1, end) infinite; } /* ---------- Ein Beitrag im Strom (PostStream.jsx) ---------- Aufbau bleibt unveraendert (Kopfzeile -- Flaeche -- Aktionsleiste -- Bildunterschrift -- Schlagworte); neu sind Farbe, Schrift und Kante. Die Karte steht auf einer harten Pixelkante statt auf einem weichen Schatten. */ .lfx-pix .post-list{ list-style:none; margin:0 auto; padding:0; display:flex; flex-direction:column; gap:var(--pix-5); max-width:680px; } .lfx-pix .post-row{ position:relative; display:block; width:100%; margin:0; padding:0; text-align:left; cursor:pointer; font:inherit; overflow:hidden; background:var(--pix-ink); color:var(--pix-text); border:var(--pix-line) solid var(--pix-pink); box-shadow:6px 6px 0 0 rgba(255,46,133,.30); } .lfx-pix .post-row-lfx{ border-color:var(--pix-acid); box-shadow:6px 6px 0 0 rgba(200,255,46,.28); } .lfx-pix .post-row:focus-visible{ outline:var(--pix-line) solid var(--pix-text); outline-offset:3px; } /* Kopfzeile: wer spricht, wann. */ .lfx-pix .post-mark{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--pix-2); padding:var(--pix-3); border-bottom:var(--pix-line) solid var(--pix-pink); font-family:var(--pix-bitmap); font-size:10px; letter-spacing:.1em; text-transform:uppercase; } .lfx-pix .post-row-lfx .post-mark{ border-bottom-color:var(--pix-acid); } .lfx-pix .post-mark-label{ padding:var(--pix-1) var(--pix-2); font-family:var(--pix-bitmap); font-weight:700; font-size:9px; line-height:1.6; letter-spacing:.16em; text-transform:uppercase; background:var(--pix-acid); color:var(--pix-ink); } .lfx-pix .post-author{ background:none; border:none; padding:0; cursor:pointer; font-family:var(--pix-bitmap); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:none; color:var(--pix-pink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .lfx-pix .post-row-lfx .post-author{ color:var(--pix-acid); } .lfx-pix .post-author:focus-visible{ outline:var(--pix-line) solid var(--pix-text); outline-offset:2px; } .lfx-pix .post-date{ margin-left:auto; font-family:var(--pix-bitmap); font-size:10px; letter-spacing:.1em; color:var(--pix-dim); } /* Die Flaeche der Sendung -- was im Vorbild das Foto ist. Pink traegt JEDE Flaeche, auch die der Redaktion: ein erster Entwurf gab Redaktionsbeitraegen eine ganz neongruene Flaeche, und weil die Redaktion die Mehrheit der Eintraege schreibt, war der Feed dann eine gruene Wand. Gruen ist hier die Kontrast-, nicht die Grundfarbe -- die Herkunft steht in Rahmen, Marke und Name. */ .lfx-pix .post-cover{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:var(--pix-2); min-height:164px; padding:var(--pix-4) var(--pix-3) var(--pix-3); background:var(--pix-pink); color:var(--pix-ink); } .lfx-pix .post-cover::before{ content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(0,0,0,.13) 0 1px, transparent 1px 3px); } .lfx-pix .post-cover-kicker, .lfx-pix .post-cover-when{ position:relative; font-family:var(--pix-bitmap); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--pix-shade); } .lfx-pix .post-cover-name{ position:relative; font-family:var(--pix-bitmap); font-weight:700; font-size:clamp(18px, 5.4vw, 28px); line-height:1.3; letter-spacing:.01em; text-transform:uppercase; color:var(--pix-ink); overflow-wrap:anywhere; } /* Aktionsleiste: Herz links, der Weg in den Beitrag rechts. */ .lfx-pix .post-actions{ display:flex; align-items:center; gap:var(--pix-3); padding:var(--pix-2) var(--pix-3); border-top:var(--pix-line) solid var(--pix-pink); } .lfx-pix .post-row-lfx .post-actions{ border-top-color:var(--pix-acid); } .lfx-pix .post-heart{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 0 0 -10px; padding:0; background:none; border:none; cursor:pointer; color:var(--pix-text); } .lfx-pix .post-heart .nd-ico{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; } /* Favorisieren ist ein seitenweites System -- Zustand und Farbe bleiben deshalb dieselben wie ueberall sonst (--lfx-heart). */ .lfx-pix .post-heart.is-on{ color:var(--lfx-heart, #e6483c); } .lfx-pix .post-heart.is-on .nd-ico{ fill:currentColor; } .lfx-pix .post-heart:focus-visible{ outline:var(--pix-line) solid var(--pix-text); outline-offset:2px; } .lfx-pix .post-heart::after{ content:''; position:absolute; inset:6px; border:var(--pix-line) solid var(--lfx-heart, #e6483c); opacity:0; transform:scale(.3); pointer-events:none; } .lfx-pix .post-heart.is-popping .nd-ico{ animation:pixHeartPop .4s steps(4, end); } .lfx-pix .post-heart.is-popping::after{ animation:pixHeartRing .4s steps(4, end); } @keyframes pixHeartPop{ 0%{ transform:scale(1); } 50%{ transform:scale(1.4); } 100%{ transform:scale(1); } } @keyframes pixHeartRing{ 0%{ opacity:.8; transform:scale(.4); } 100%{ opacity:0; transform:scale(1.5); } } .lfx-pix .post-likes{ font-family:var(--pix-bitmap); font-size:11px; letter-spacing:.06em; color:var(--pix-dim); margin-left:calc(var(--pix-3) * -1); font-variant-numeric:tabular-nums; } .lfx-pix .post-more{ display:inline-flex; align-items:center; gap:var(--pix-2); margin-left:auto; min-height:32px; padding:var(--pix-1) var(--pix-2); background:var(--pix-acid); color:var(--pix-ink); font-family:var(--pix-bitmap); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; } .lfx-pix .post-more .nd-ico{ width:12px; height:12px; } /* Bildunterschrift. */ .lfx-pix .post-caption{ padding:var(--pix-3) var(--pix-3) 0; } .lfx-pix .post-caption-name{ font-family:var(--pix-bitmap); font-weight:700; font-size:11px; letter-spacing:.06em; color:var(--pix-pink); margin-right:var(--pix-2); } .lfx-pix .post-row-lfx .post-caption-name{ color:var(--pix-acid); } .lfx-pix .post-caption-title{ font-family:var(--pix-bitmap); font-weight:700; font-size:13px; line-height:1.5; color:var(--pix-text); overflow-wrap:anywhere; } .lfx-pix .post-caption-text{ display:block; margin-top:var(--pix-2); font-family:var(--pix-read); font-size:14.5px; line-height:1.6; color:var(--pix-dim); } /* ---------- Sets, Termine, Releases (ConsoleFeed.jsx) ---------- Dieselbe Sprache wie der Strom, eine Stufe kompakter: die Liste auf einem Artist-Profil ist ein Verzeichnis, kein Aufmacher. Vorher waren es weiss umrandete Karten ohne Fuellung; jetzt traegt die Art des Eintrags (SET/DATE/RELEASE) die Pink-Marke, und ein Termin steht als Datumsblock links wie ein Ticket. */ .lfx-pix .cf-card{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--pix-3); align-items:start; margin:0 0 var(--pix-3); padding:var(--pix-3); background:var(--pix-ink); color:var(--pix-text); border:var(--pix-line) solid var(--pix-pink); border-radius:0; box-shadow:5px 5px 0 0 rgba(255,46,133,.24); } .lfx-pix .cf-when{ /* Bewusst `start` und nicht `stretch`: bei einem sehr langen Ort/Venue- Namen wuchs der Datumsblock sonst zu einer riesigen Pink-Spalte mit dem Datum in der Mitte. Ein Ticketabschnitt ist klein. */ align-self:start; display:flex; align-items:center; padding:var(--pix-2); white-space:nowrap; background:var(--pix-pink); color:var(--pix-ink); font-family:var(--pix-bitmap); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; } .lfx-pix .cf-cover{ width:64px; height:64px; object-fit:cover; display:block; border-radius:0; image-rendering:pixelated; border:var(--pix-line) solid var(--pix-pink); background:var(--pix-ink); } /* Ohne Cover: Schachbrett-Dither statt einer grauen Leerflaeche. */ .lfx-pix .cf-cover-empty{ background-color:var(--pix-pink); background-image:repeating-conic-gradient(var(--pix-ink) 0 25%, transparent 0 50%); background-size:8px 8px; } .lfx-pix .cf-body{ min-width:0; } .lfx-pix .cf-artist{ display:inline-flex; align-items:center; gap:var(--pix-2); background:none; border:none; padding:0; cursor:pointer; } .lfx-pix .cf-artist-name{ font-family:var(--pix-bitmap); font-weight:700; font-size:11px; letter-spacing:.04em; color:var(--pix-pink); } /* Das @ gehoert zum Namen, ist aber nicht der Name -- schwaecher gesetzt. (Stand vorher als eigene Regel in social/public/index.html.) */ .lfx-pix .cf-artist-name::before{ content:'@'; font-weight:400; opacity:.6; } .lfx-pix .cf-kind{ margin-top:var(--pix-2); font-family:var(--pix-bitmap); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--pix-dim); } .lfx-pix .cf-title{ margin-top:var(--pix-1); font-family:var(--pix-bitmap); font-weight:700; font-size:clamp(15px, 4.4vw, 19px); line-height:1.35; letter-spacing:.01em; text-transform:uppercase; color:var(--pix-text); overflow-wrap:anywhere; } .lfx-pix .cf-meta{ margin-top:var(--pix-2); font-family:var(--pix-read); font-size:13px; line-height:1.5; color:var(--pix-dim); } .lfx-pix .cf-link{ display:inline-flex; align-items:center; min-height:32px; margin-top:var(--pix-2); padding:var(--pix-1) var(--pix-2); text-decoration:none; background:var(--pix-acid); color:var(--pix-ink); font-family:var(--pix-bitmap); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; } .lfx-pix .cf-link:focus-visible{ outline:var(--pix-line) solid var(--pix-text); outline-offset:2px; } /* "discover artists" -- gleiche Karte, nur schmaler. */ .lfx-pix .cf-discover{ margin-top:var(--pix-5); } .lfx-pix .cf-discover .console-section-label{ margin:0 0 var(--pix-3); font-family:var(--pix-bitmap); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--pix-pink); } .lfx-pix .cf-discover-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:var(--pix-3); } .lfx-pix .cf-discover-card{ display:flex; flex-direction:column; gap:var(--pix-2); min-width:0; padding:var(--pix-3); border-radius:0; background:var(--pix-ink); border:var(--pix-line) solid var(--pix-pink); } .lfx-pix .cf-discover-head{ background:none; border:none; padding:0; cursor:pointer; text-align:left; min-width:0; } .lfx-pix .cf-discover-bio{ font-family:var(--pix-read); font-size:13px; line-height:1.5; color:var(--pix-dim); } .lfx-pix .cf-discover-follow{ display:inline-flex; align-items:center; gap:var(--pix-2); align-self:flex-start; min-height:36px; margin-top:var(--pix-1); padding:var(--pix-1) var(--pix-2); cursor:pointer; background:var(--pix-acid); color:var(--pix-ink); border:none; font-family:var(--pix-bitmap); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; } .lfx-pix .cf-discover-follow:disabled{ opacity:.5; cursor:default; } .lfx-pix .cf-discover-follow .nd-ico{ width:13px; height:13px; } /* ---------- Die Lesefassung (PostReader.jsx im Feed) ---------- Dieselbe Sprache, nur ohne Karte: Name, Bitmap-Titel, Fliesstext in Archivo. Das X zum Schliessen bleibt (CEO 15.9.), wird aber ein quadratischer Pixel-Knopf statt einer runden Scheibe. */ .lfx-pix .post-read-close{ position:sticky; top:0; float:right; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 0 var(--pix-2) var(--pix-2); padding:0; background:var(--pix-pink); color:var(--pix-ink); border:none; border-radius:0; cursor:pointer; } /* Strichstaerke hier explizit: das X ist eine reine Konturform, und auf dem kleinen Pink-Quadrat braucht es eine kraeftigere Linie als die 2px der allgemeinen Icon-Regel. */ .lfx-pix .post-read-close .nd-ico{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.6; } .lfx-pix .post-read-close:focus-visible{ outline:var(--pix-line) solid var(--pix-text); outline-offset:3px; } .lfx-pix .post-read .post-mark{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--pix-3); padding:0 0 var(--pix-3); margin-top:var(--pix-4); border-bottom:none; } .lfx-pix .post-read .post-mark-track{ display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:var(--pix-2); padding:var(--pix-1) var(--pix-2); border:var(--pix-line) solid var(--pix-pink); border-radius:0; font-family:var(--pix-bitmap); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--pix-text); } .lfx-pix .post-subject-label{ color:var(--pix-dim); } .lfx-pix .post-subject-name{ font-weight:700; color:var(--pix-pink); } .lfx-pix .post-subject-when{ color:var(--pix-text); } .lfx-pix .sa-back{ display:inline-flex; align-items:center; gap:var(--pix-2); min-height:40px; padding:var(--pix-2) var(--pix-3); cursor:pointer; background:var(--pix-pink); border:none; color:var(--pix-ink); font-family:var(--pix-bitmap); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; } .lfx-pix .sa-back .nd-ico{ width:13px; height:13px; } .lfx-pix .sa-read-author{ background:none; border:none; padding:0; cursor:pointer; text-decoration:none; font-family:var(--pix-bitmap); font-weight:700; font-size:12px; letter-spacing:.04em; color:var(--pix-pink); } .lfx-pix .sa-read-title{ margin:var(--pix-4) 0 0; font-family:var(--pix-bitmap); font-weight:700; font-size:clamp(20px, 6vw, 30px); line-height:1.28; letter-spacing:.01em; text-transform:uppercase; color:var(--pix-text); overflow-wrap:anywhere; } .lfx-pix .sa-read-lede{ margin:var(--pix-3) 0 0; max-width:60ch; font-family:var(--pix-read); font-size:16px; line-height:1.55; color:var(--pix-dim); } .lfx-pix .sa-read-body{ margin-top:var(--pix-5); max-width:64ch; font-family:var(--pix-read); font-size:16px; line-height:1.7; color:var(--pix-text); } .lfx-pix .sa-read-body p{ margin:0 0 1.1em; } .lfx-pix .sa-read-body h2, .lfx-pix .sa-read-body h3{ font-family:var(--pix-bitmap); font-weight:700; letter-spacing:.01em; line-height:1.4; text-transform:uppercase; margin:1.9em 0 .6em; color:var(--pix-text); } .lfx-pix .sa-read-body h2{ font-size:17px; } .lfx-pix .sa-read-body h3{ font-size:14px; } .lfx-pix .sa-read-body ul, .lfx-pix .sa-read-body ol{ margin:0 0 1.1em; padding-left:1.3em; } .lfx-pix .sa-read-body li{ margin-bottom:.45em; } .lfx-pix .sa-read-body a{ color:var(--pix-acid); text-underline-offset:3px; } /* Zitat als Pink-Flaeche mit Bitmap-Satz -- der Moment, in dem ein Beitrag aussieht wie das Referenzbild. */ .lfx-pix .sa-read-body blockquote{ margin:1.6em 0; padding:var(--pix-4) var(--pix-3); background:var(--pix-pink); color:var(--pix-ink); font-family:var(--pix-bitmap); font-weight:700; font-size:15px; line-height:1.5; text-transform:uppercase; } @media (min-width:720px){ .lfx-pix .st-head{ padding:var(--pix-6) var(--pix-5) var(--pix-5); } .lfx-pix .post-cover{ min-height:200px; padding:var(--pix-5) var(--pix-4) var(--pix-4); } .lfx-pix .post-mark, .lfx-pix .post-actions, .lfx-pix .post-caption, .lfx-pix .post-tags{ padding-left:var(--pix-4); padding-right:var(--pix-4); } .lfx-pix .cf-card{ padding:var(--pix-4); gap:var(--pix-4); } } @media (prefers-reduced-motion: reduce){ .lfx-pix .st-title::after, .lfx-pix .st-empty::after, .lfx-pix .feed-empty::after, .lfx-pix .post-heart.is-popping .nd-ico, .lfx-pix .post-heart.is-popping::after{ animation:none; } } /* ============================================================ TEIL 2 -- NEWS (`.lfx-mag`) ============================================================ CEO 15.9.: "mach das News-Modul wieder zu einem VICE-Magazine-Layout, aber mit der pinken Farbe." Was daran VICE ist -- und was hier davon uebernommen wurde: - Die Schlagzeile ist das Bild. Sehr grosse, sehr fette, eng geschnittene Grotesk in Versalien; alles andere ist klein. - Ein dichtes, UNGLEICHMAESSIGES Raster: ein breiter Aufmacher, dann Kacheln unterschiedlicher Breite, keine Reihe wie die davor. - Harte, schwere Linien als Trennung, keine Karten mit Schatten. - Fotos in Graustufen -- Farbe hat nur der Akzent. - GENAU EINE Akzentfarbe. Bei VICE ist sie rot; hier ist es das Pink aus dem Feed. Sie erscheint in den Rubriken, in der Linie unter der Wortmarke, in jeder vierten Kachel und in der Initiale des Artikels. Die Schriften sind die drei festen LFX-Schriften -- KEINE Bitmap-Schrift. Genau daran unterscheidet man auf einen Blick Magazin von Feed. */ .lfx-mag{ --mag-pink:var(--lfx-pink); --mag-ink:#0a0a0a; --mag-text:#f4f4f4; --mag-dim:#c2c2c2; /* 11:1 auf #0a0a0a -- Fliesstext-taugig */ --mag-faint:#9a9a9a; --mag-shade:rgba(0,0,0,.80); /* auf Pink */ --mag-rule:2px; /* die schwere Linie */ --mag-1:4px; --mag-2:8px; --mag-3:12px; --mag-4:20px; --mag-5:32px; --mag-6:48px; --mag-display:'Archivo Black','Archivo Variable',sans-serif; --mag-body:'Archivo Variable',sans-serif; --mag-micro:'Tabular Light','Archivo Variable',sans-serif; } .lfx-mag.news-inner, .lfx-mag .news-inner{ width:100%; max-width:1180px; margin:0 auto; } /* ---------- Wortmarke ---------- */ .lfx-mag .news-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--mag-4); padding:var(--mag-5) 0 var(--mag-3); border-bottom:6px solid var(--mag-pink); margin-bottom:var(--mag-5); } .lfx-mag .news-title{ margin:0; font-family:var(--mag-display); font-weight:900; font-size:clamp(40px, 13vw, 96px); line-height:.84; letter-spacing:-.045em; text-transform:uppercase; color:var(--mag-text); } .lfx-mag .news-back{ display:inline-flex; align-items:center; gap:var(--mag-2); flex-shrink:0; width:max-content; min-height:40px; padding:var(--mag-2) 0; cursor:pointer; background:none; border:none; color:var(--mag-text); text-decoration:none; font-family:var(--mag-micro); font-size:10px; letter-spacing:.2em; text-transform:uppercase; } .lfx-mag .news-back .nd-ico{ width:13px; height:13px; } .lfx-mag .news-back:active{ opacity:.55; } .lfx-mag .news-back:focus-visible{ outline:var(--mag-rule) solid var(--mag-pink); outline-offset:4px; } /* ---------- Rubrik, Zeile darunter ---------- */ .lfx-mag .news-kicker{ display:inline-block; align-self:flex-start; margin-bottom:var(--mag-3); padding:var(--mag-1) var(--mag-2); background:var(--mag-pink); color:var(--mag-ink); font-family:var(--mag-micro); font-size:10px; line-height:1.4; letter-spacing:.2em; text-transform:uppercase; } .lfx-mag .news-meta{ display:flex; flex-wrap:wrap; gap:var(--mag-2) var(--mag-3); margin-top:var(--mag-3); font-family:var(--mag-micro); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mag-faint); } .lfx-mag .news-meta-author{ color:var(--mag-text); } /* Leerzustand als Schlagzeile, nicht als Fehlermeldung. */ .lfx-mag .news-empty{ margin:0; padding:var(--mag-5) 0; border-top:var(--mag-rule) solid var(--mag-text); font-family:var(--mag-display); font-weight:900; font-size:clamp(18px, 4vw, 26px); line-height:1.1; letter-spacing:-.02em; text-transform:uppercase; color:var(--mag-text); } /* ---------- Aufmacher ---------- Ohne Bild (der Normalfall in diesem CMS) wird die Textflaeche selbst zur Titelseite: Pink, schwarze Schlagzeile, kein Ersatzbild. Mit Bild steht das Foto in Graustufen daneben und der Text auf Schwarz. */ .lfx-mag .news-hero{ display:grid; grid-template-columns:minmax(0,1fr); width:100%; margin:0 0 var(--mag-6); padding:0; text-align:left; background:none; border:none; color:inherit; font:inherit; cursor:pointer; } .lfx-mag .news-hero:focus-visible{ outline:var(--mag-rule) solid var(--mag-pink); outline-offset:4px; } .lfx-mag .news-hero-img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; filter:grayscale(1) contrast(1.06); } .lfx-mag .news-hero-text{ display:flex; flex-direction:column; padding:var(--mag-4) 0 0; } .lfx-mag .news-hero-title{ font-family:var(--mag-display); font-weight:900; font-size:clamp(28px, 8.2vw, 58px); line-height:.96; letter-spacing:-.035em; text-transform:uppercase; color:var(--mag-text); overflow-wrap:anywhere; } .lfx-mag .news-hero-lede{ margin-top:var(--mag-4); max-width:54ch; font-family:var(--mag-body); font-size:16.5px; line-height:1.55; color:var(--mag-dim); } /* Kein Bild -> die Flaeche traegt die Farbe. `:has()` statt einer zweiten Markup-Variante: die Komponente liefert in diesem Fall einen leeren Platzhalter, und der bleibt hier einfach weg. */ /* Zwei Klassen liegen auf demselben Element (`news-hero-img news-img-blank`) -- die Regel braucht deshalb mehr Gewicht als .news-card-img/.news-hero-img weiter unten, sonst bleibt der Platzhalter als 3:2-Block stehen und macht jede Kachel 500px hoch. */ .lfx-mag .news-hero .news-img-blank, .lfx-mag .news-card .news-img-blank{ display:none; } .lfx-mag .news-hero:has(.news-img-blank) .news-hero-text{ background:var(--mag-pink); color:var(--mag-ink); padding:var(--mag-5) var(--mag-4); } .lfx-mag .news-hero:has(.news-img-blank) .news-hero-title{ color:var(--mag-ink); } .lfx-mag .news-hero:has(.news-img-blank) .news-hero-lede{ color:var(--mag-shade); } .lfx-mag .news-hero:has(.news-img-blank) .news-kicker{ background:var(--mag-ink); color:var(--mag-pink); } .lfx-mag .news-hero:has(.news-img-blank) .news-meta{ color:var(--mag-ink); } .lfx-mag .news-hero:has(.news-img-blank) .news-meta-author{ color:var(--mag-ink); } /* ---------- Das dichte Raster ---------- Mobil eine Spalte mit schwerer Trennlinie; ab 720px ein Sechser-Raster mit dem Rhythmus 4-2 / 2-4, damit keine Reihe wie die davor aussieht. Jede vierte Kachel ist eine Pink-Flaeche -- das ist der Taktwechsel, den ein Magazin-Raster braucht. */ .lfx-mag .news-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0; } .lfx-mag .news-card{ display:flex; min-width:0; } .lfx-mag .news-card-btn{ display:flex; flex-direction:column; width:100%; height:100%; padding:var(--mag-4) 0; text-align:left; cursor:pointer; font:inherit; background:none; border:none; border-top:var(--mag-rule) solid var(--mag-text); color:var(--mag-text); } .lfx-mag .news-card-btn:focus-visible{ outline:var(--mag-rule) solid var(--mag-pink); outline-offset:-4px; } .lfx-mag .news-card-img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; margin-bottom:var(--mag-3); filter:grayscale(1) contrast(1.06); } .lfx-mag .news-card-title{ font-family:var(--mag-display); font-weight:900; font-size:clamp(21px, 5.6vw, 28px); line-height:1.02; letter-spacing:-.03em; text-transform:uppercase; color:inherit; overflow-wrap:anywhere; } .lfx-mag .news-card-lede{ margin-top:var(--mag-3); font-family:var(--mag-body); font-size:14.5px; line-height:1.55; color:var(--mag-dim); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* Der Taktwechsel: Pink-Kachel. */ .lfx-mag .news-card:nth-child(4n+3) .news-card-btn{ background:var(--mag-pink); color:var(--mag-ink); border-top-color:var(--mag-pink); padding:var(--mag-4); } .lfx-mag .news-card:nth-child(4n+3) .news-kicker{ background:var(--mag-ink); color:var(--mag-pink); } .lfx-mag .news-card:nth-child(4n+3) .news-card-lede{ color:var(--mag-shade); } .lfx-mag .news-card:nth-child(4n+3) .news-meta{ color:var(--mag-ink); } .lfx-mag .news-card:nth-child(4n+3) .news-meta-author{ color:var(--mag-ink); } .lfx-mag .news-card:nth-child(4n+3) .news-card-btn:focus-visible{ outline-color:var(--mag-ink); } /* ---------- Der Artikel ---------- */ .lfx-mag.news-article{ max-width:760px; padding-top:var(--mag-4); } .lfx-mag.news-article .news-back{ display:flex; } .lfx-mag.news-article .news-kicker{ display:inline-block; margin-top:var(--mag-5); } .lfx-mag .news-article-title{ margin:var(--mag-2) 0 0; font-family:var(--mag-display); font-weight:900; font-size:clamp(30px, 8.6vw, 62px); line-height:.94; letter-spacing:-.04em; text-transform:uppercase; color:var(--mag-text); overflow-wrap:anywhere; } .lfx-mag .news-standfirst{ margin:var(--mag-4) 0 0; max-width:56ch; font-family:var(--mag-body); font-size:18px; line-height:1.5; color:var(--mag-dim); } .lfx-mag.news-article .news-meta{ margin-top:var(--mag-5); padding:var(--mag-3) 0; border-top:var(--mag-rule) solid var(--mag-text); border-bottom:var(--mag-rule) solid var(--mag-text); } .lfx-mag .news-article-img{ display:block; width:100%; max-height:62vh; object-fit:cover; margin:var(--mag-5) 0; filter:grayscale(1) contrast(1.06); } .lfx-mag .news-body{ margin-top:var(--mag-5); max-width:66ch; font-family:var(--mag-body); font-size:17px; line-height:1.68; color:var(--mag-text); } .lfx-mag .news-body p{ margin:0 0 1.15em; } /* Initiale in Pink -- der eine Farbakzent im Lesetext, wie im Magazin. */ .lfx-mag .news-body > p:first-of-type::first-letter{ float:left; margin:.06em .1em 0 0; font-family:var(--mag-display); font-weight:900; font-size:3.4em; line-height:.78; color:var(--mag-pink); } .lfx-mag .news-body h1, .lfx-mag .news-body h2, .lfx-mag .news-body h3{ font-family:var(--mag-display); font-weight:900; letter-spacing:-.025em; line-height:1.06; text-transform:uppercase; margin:1.8em 0 .5em; color:var(--mag-text); } .lfx-mag .news-body h1{ font-size:28px; } .lfx-mag .news-body h2{ font-size:23px; } .lfx-mag .news-body h3{ font-size:18px; } .lfx-mag .news-body ul, .lfx-mag .news-body ol{ margin:0 0 1.15em; padding-left:1.3em; } .lfx-mag .news-body li{ margin-bottom:.45em; } .lfx-mag .news-body a{ color:var(--mag-pink); text-underline-offset:3px; } /* Zitat: schwere Schlagzeilen-Schrift an einem Pink-Balken, keine Flaeche -- im Magazin ist das Zitat eine Stimme, kein Kasten. */ .lfx-mag .news-body blockquote{ margin:1.6em 0; padding:0 0 0 var(--mag-4); border-left:6px solid var(--mag-pink); font-family:var(--mag-display); font-weight:900; font-size:21px; line-height:1.14; letter-spacing:-.02em; color:var(--mag-text); } .lfx-mag .news-back-foot{ margin-top:var(--mag-6); padding-top:var(--mag-4); border-top:var(--mag-rule) solid var(--mag-text); width:100%; } @media (min-width:720px){ .lfx-mag .news-hero{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--mag-5); align-items:center; } .lfx-mag .news-hero:has(.news-img-blank){ grid-template-columns:minmax(0,1fr); } .lfx-mag .news-hero-text{ padding:0; } .lfx-mag .news-hero:has(.news-img-blank) .news-hero-text{ padding:var(--mag-6) var(--mag-5); } /* Das ungleichmaessige Raster: 4-2 / 2-4. */ .lfx-mag .news-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); column-gap:var(--mag-5); } .lfx-mag .news-card{ grid-column:span 3; } .lfx-mag .news-card:nth-child(4n+1){ grid-column:span 4; } .lfx-mag .news-card:nth-child(4n+2){ grid-column:span 2; } .lfx-mag .news-card:nth-child(4n+3){ grid-column:span 2; } .lfx-mag .news-card:nth-child(4n+4){ grid-column:span 4; } /* Breite Kacheln tragen eine groessere Schlagzeile -- das ist die Rangfolge des Rasters, nicht Dekoration. */ .lfx-mag .news-card:nth-child(4n+1) .news-card-title, .lfx-mag .news-card:nth-child(4n+4) .news-card-title{ font-size:clamp(24px, 2.6vw, 34px); } .lfx-mag .news-card:nth-child(4n+2) .news-card-lede{ -webkit-line-clamp:4; } }