knso/Webklar-Kundenbereich
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

news.js: Variablen-Defaults ohne Spezifitaet, Combo-Umbruch, Bildmaße absichern

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
knsoandClaude Opus 5.5 committed 2026-09-30 17:19:40 +00:00
1 parent 035d1d5517
commit 0e0776b406
3 files changed
+43 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/embed/news.js
+20 -13
View File
@@ -10,7 +10,8 @@
var PAPERS = { sun: 1, sky: 1, coral: 1, white: 1 }
var CSS = [
'.wkn-root{container-type:inline-size;display:block;--wkn-board:#C08A52;--wkn-frame:#A8733F;--wkn-font-display:"Fredoka",system-ui,sans-serif;--wkn-font-body:"Nunito",system-ui,sans-serif;--wkn-paper-sun:#FFF6D6;--wkn-paper-sky:#DDEEFB;--wkn-paper-coral:#FFE1DA;--wkn-paper-white:#fff;--wkn-ink:#232A33;--wkn-ink-soft:#5B6673;font-family:var(--wkn-font-body)}',
'.wkn-root{container:wkn-root/inline-size;display:block}',
':where(.wkn-root){--wkn-board:#C08A52;--wkn-frame:#A8733F;--wkn-font-display:"Fredoka",system-ui,sans-serif;--wkn-font-body:"Nunito",system-ui,sans-serif;--wkn-paper-sun:#FFF6D6;--wkn-paper-sky:#DDEEFB;--wkn-paper-coral:#FFE1DA;--wkn-paper-white:#fff;--wkn-ink:#232A33;--wkn-ink-soft:#5B6673;font-family:var(--wkn-font-body)}',
'.wkn-root *,.wkn-root *::before,.wkn-root *::after{box-sizing:border-box}',
'.wkn-board{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;padding:40px 32px 48px;background-color:var(--wkn-board);',
'background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27260%27 height=%27260%27%3E%3Cfilter id=%27a%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%271.1%27 numOctaves=%272%27 seed=%273%27/%3E%3CfeColorMatrix values=%270 0 0 0 .29 0 0 0 0 .16 0 0 0 0 .06 0 0 0 -2.4 1.25%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23a)%27/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27220%27 height=%27220%27%3E%3Cfilter id=%27b%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 seed=%2711%27/%3E%3CfeColorMatrix values=%270 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .58 0 0 0 2.6 -1.55%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23b)%27/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27600%27 height=%27600%27%3E%3Cfilter id=%27c%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.012%27 numOctaves=%273%27 seed=%277%27/%3E%3CfeColorMatrix values=%270 0 0 0 .45 0 0 0 0 .27 0 0 0 0 .12 0 0 0 1.4 -.45%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23c)%27/%3E%3C/svg%3E");',
@@ -25,14 +26,15 @@
'.wkn-new{position:absolute;top:-14px;right:-10px;z-index:3;transform:rotate(8deg);background:#E4573D;color:#fff;font:700 12px/1 var(--wkn-font-body);letter-spacing:.04em;padding:7px 12px;border-radius:999px;box-shadow:0 3px 8px rgba(35,52,74,.25)}',
'.wkn-note{padding:28px 24px 22px;border-radius:6px 6px 18px 6px;box-shadow:0 8px 18px rgba(35,52,74,.14);background:var(--wkn-paper,#fff)}',
'.wkn-note h3{font:600 20px/1.25 var(--wkn-font-display);color:var(--wkn-ink);margin:8px 0}',
'.wkn-note p{font:400 16px/1.5 var(--wkn-font-body);color:var(--wkn-ink);margin:0;white-space:pre-line;overflow-wrap:anywhere}',
'.wkn-lead .wkn-note h3{font-size:28px}',
'.wkn-note p{font:400 16px/1.5 var(--wkn-font-body);color:var(--wkn-ink);margin:0;white-space:pre-line;overflow-wrap:break-word;hyphens:auto}',
'.wkn-lead .wkn-note h3,.wkn-lead.wkn-note h3{font-size:28px}',
'.wkn-paper-sun{--wkn-paper:var(--wkn-paper-sun)}.wkn-paper-sky{--wkn-paper:var(--wkn-paper-sky)}.wkn-paper-coral{--wkn-paper:var(--wkn-paper-coral)}.wkn-paper-white{--wkn-paper:var(--wkn-paper-white)}',
'.wkn-polaroid{margin:0;background:#fff;padding:12px 12px 16px;border-radius:4px;box-shadow:0 10px 22px rgba(35,52,74,.16)}',
'.wkn-polaroid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px;background:#eef0f3}',
'.wkn-polaroid figcaption{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:12px}',
'.wkn-polaroid figcaption b{font:600 17px/1.25 var(--wkn-font-display);color:var(--wkn-ink);overflow-wrap:anywhere}',
'.wkn-combo{display:grid;grid-template-columns:1.25fr 1fr;align-items:center}',
'.wkn-polaroid figcaption b{font:600 17px/1.25 var(--wkn-font-display);color:var(--wkn-ink);overflow-wrap:break-word;hyphens:auto}',
'.wkn-combo{container:wkn-card/inline-size}',
'.wkn-combo-in{display:grid;grid-template-columns:1.25fr 1fr;align-items:center}',
'.wkn-combo .wkn-polaroid{transform:rotate(-2deg)}',
'.wkn-combo .wkn-note{margin-left:-28px;transform:rotate(2.5deg);z-index:1}',
'.wkn-combo::before{left:28%}',
@@ -44,18 +46,18 @@
'.wkn-dots{display:flex;gap:6px;margin-right:8px}',
'.wkn-dots i{width:7px;height:7px;border-radius:50%;background:rgba(35,42,51,.2);transition:width .2s}',
'.wkn-dots i.wkn-on{background:var(--wkn-ink);width:18px;border-radius:999px}',
'@container (max-width:700px){',
'@container wkn-root (max-width:700px){',
'.wkn-board{padding:32px 0;border-radius:20px}',
'.wkn-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding:28px 20px 12px;scrollbar-width:none}',
'.wkn-grid::-webkit-scrollbar{display:none}',
'.wkn-grid>*{flex:0 0 76%;scroll-snap-align:center}',
'.wkn-grid>:first-child{grid-column:auto}',
'.wkn-combo{grid-template-columns:1fr}',
'.wkn-combo .wkn-note{margin:-26px 12px 0 26px}',
'.wkn-lead .wkn-note h3{font-size:20px}',
'.wkn-lead .wkn-note h3,.wkn-lead.wkn-note h3{font-size:20px}',
'.wkn-more{margin-top:24px;padding-inline:20px}.wkn-more .wkn-btn{width:100%}',
'.wkn-swipehint{display:flex}',
'}',
'@container wkn-card (max-width:340px){.wkn-combo-in{grid-template-columns:1fr}.wkn-combo .wkn-note{margin:-26px 12px 0 26px}}',
'@media (prefers-reduced-motion:reduce){.wkn-pin,.wkn-btn,.wkn-dots i{transition:none}}'
].join('\n')
@@ -99,14 +101,17 @@
var fig = el('figure', 'wkn-polaroid')
if (p.image) {
var img = document.createElement('img')
var iw = Number.isFinite(+p.image.w) && +p.image.w > 0 ? Math.round(+p.image.w) : 1600
var ih = Number.isFinite(+p.image.h) && +p.image.h > 0 ? Math.round(+p.image.h) : 1200
var small = absUrl(api, p.image.srcSmall)
var full = absUrl(api, p.image.src)
img.src = small || full
if (small && full) {
img.srcset = small + ' 480w, ' + full + ' ' + (p.image.w || 1600) + 'w'
img.srcset = small + ' 480w, ' + full + ' ' + iw + 'w'
img.sizes = '(max-width:700px) 80vw, 480px'
}
if (p.image.w && p.image.h) { img.width = p.image.w; img.height = p.image.h }
img.width = iw
img.height = ih
img.alt = p.title || ''
img.loading = 'lazy'
img.decoding = 'async'
@@ -133,8 +138,10 @@
} else if (p.type === 'combo' && p.image) {
item = el('article', cls + ' wkn-combo')
item.style.setProperty('--wkn-r', '0deg')
item.appendChild(buildPhoto(p, api, false))
item.appendChild(buildNote(p))
var inner = el('div', 'wkn-combo-in')
inner.appendChild(buildPhoto(p, api, false))
inner.appendChild(buildNote(p))
item.appendChild(inner)
} else {
item = el('article', cls)
item.style.setProperty('--wkn-r', r + 'deg')