WEBklar/emmas-schatzkiste
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Neuigkeiten: News-Pinnwand auf der Startseite

Browse Source 
Sektion 'Neues aus dem Laden' nach dem Hero. Die Beitraege schreibt Opa Martin
im WEBklar-Kundenportal (Funktion News); news.js von project.webklar.com zeigt
sie als Korkwand. Ohne Beitraege bleibt der statische Leerzustand stehen.
Menuepunkt 'Neuigkeiten' (am Handy ausgeblendet, 4 Punkte passen),
Datenschutz Abschnitt 4c, Stand 30.09.2026.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
knsoandClaude Opus 5.5 committed 2026-09-30 18:02:14 +00:00
1 parent 116b8b741e
commit 3ae1084df8
6 files changed
+81 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/site.css
+38
View File
@@ -230,6 +230,8 @@ a:hover{color:var(--sky-600)}
.hdr__brand{font-size:0; gap:0; min-width:44px; justify-content:center}
.hdr__brand img{width:32px; height:32px}
.nav{flex-wrap:nowrap; gap:0}
/* Die Kopfzeile traegt am Handy vier Punkte; "Neuigkeiten" steht dort direkt unter dem Hero */
.nav a.nav__news{display:none}
.nav a{
position:relative; min-height:44px; padding:6px clamp(5px,2.2vw,10px);
font-size:clamp(13px,3.8vw,15px); white-space:nowrap; border-radius:var(--radius-s);
@@ -776,3 +778,39 @@ a:hover{color:var(--sky-600)}
@media (max-width:639.98px){
.ftr__col a, .ftr__col span{min-height:44px; padding-block:2px}
}
/* ============================================================ NEUIGKEITEN (News-Pinnwand)
Die Zettel rendert news.js (WEBklar-Portal, Funktion "News") in Kork mit Holzrahmen #A8733F,
Schriften der Seite ueber die --wkn-Variablen. .news-board ist nur der statische Leerzustand im
selben Look; news.js ersetzt ihn, sobald ein Beitrag haengt. */
.news-lead{max-width:52ch; margin:calc(var(--space-2) * -1) 0 var(--space-6) 58px; color:var(--ink-500)}
.news-pinnwand{
--wkn-font-display:'Fredoka', 'Trebuchet MS', sans-serif;
--wkn-font-body:'Nunito', 'Segoe UI', sans-serif;
}
.news-board{
position:relative; border-radius:var(--radius-xl); border:12px solid #A8733F;
padding:var(--space-12) var(--space-6); display:grid; place-items:center;
background-color:#C08A52;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .16 0 0 0 0 .06 0 0 0 -2.4 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .58 0 0 0 2.6 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
box-shadow:inset 0 6px 14px rgba(60,32,10,.35), var(--shadow-band);
}
.news-empty{
position:relative; max-width:34ch; text-align:center; background:#fff; border-radius:8px;
padding:var(--space-8) var(--space-6) var(--space-6); transform:rotate(-1.5deg);
box-shadow:0 10px 22px rgba(35,52,74,.18);
}
.news-empty::before{
content:""; position:absolute; top:-12px; left:50%; width:84px; height:24px;
transform:translateX(-50%) rotate(3deg); background:rgba(255,255,255,.7);
box-shadow:0 1px 2px rgba(35,52,74,.12);
}
.news-empty__pin svg{width:34px; height:34px; color:var(--sun-700)}
.news-empty h3{font:var(--t-h2); color:var(--ink-700); margin:var(--space-2) 0}
.news-empty p{color:var(--ink-500); margin:0}
@media (max-width:700px){
.news-lead{margin-left:0}
.news-board{border-width:8px; padding:var(--space-10) var(--space-4); border-radius:var(--radius-l)}
}