diff --git a/public/assets/lightbox.js b/public/assets/lightbox.js index 805ab13..0e1c97b 100644 --- a/public/assets/lightbox.js +++ b/public/assets/lightbox.js @@ -1,3 +1,6 @@ +/* Symbole als SVG: Schriftzeichen macht ein Telefon zu Emoji. */ +const symbol = (p) => ``; + /* * Der Bildbetrachter. * @@ -23,9 +26,9 @@
- - - + + +

`; document.body.append(dialog); @@ -138,7 +141,7 @@

Herunterladen Im neuen Tab - + `; diff --git a/public/assets/site.css b/public/assets/site.css index 26a8457..4dec849 100644 --- a/public/assets/site.css +++ b/public/assets/site.css @@ -1,3 +1,5 @@ +/* Symbole als eingebettete SVG-Masken: Schriftzeichen macht ein Telefon zu Emoji. */ +:root{--kant-svg-unten:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--kant-svg-oben:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");--kant-svg-rechts:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5.5 6.5 6.5L9 18.5'/%3E%3C/svg%3E");--kant-svg-pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5m-6.5-6.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E");--kant-svg-pfeil-links:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4.5M11 5.5 4.5 12 11 18.5'/%3E%3C/svg%3E");--kant-svg-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5v14m8-14v14'/%3E%3C/svg%3E");--kant-svg-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")} @charset "UTF-8"; /* Lange Wörter dürfen umbrechen, damit nichts aus der Spalte läuft. Getrennt wird nur im Fließtext: eine Überschrift mit Trennstrich („di-gitale") sieht nach Fehler aus. */ @@ -19,14 +21,14 @@ p{hyphens:auto} .menu-list a:hover,.menu-list summary:hover{text-decoration:underline} .menu-list [aria-current=page]{font-weight:700;text-decoration:none} .menu-branch>summary{cursor:pointer;padding:6px 2px;list-style:none} -.menu-branch>summary::after{content:' ▾'} -.menu-branch[open]>summary::after{content:' ▴'} +.menu-branch>summary::after{content:'';display:inline-block;width:.75em;height:.75em;background:currentColor;-webkit-mask:var(--kant-svg-unten) center/contain no-repeat;mask:var(--kant-svg-unten) center/contain no-repeat;margin-left:.3em;vertical-align:-.05em} +.menu-branch[open]>summary::after{-webkit-mask-image:var(--kant-svg-oben);mask-image:var(--kant-svg-oben)} .menu-branch-body{display:grid;gap:2px;padding:6px 0 6px 14px} .menu-level-2{flex-direction:column;align-items:flex-start;gap:2px} /* Posts */ .post-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}.post-list-karten{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.post-list-liste{gap:18px}.post-list-liste .post-card{flex-direction:row;align-items:stretch}.post-list-liste .post-image{flex:0 0 34%;max-width:300px}.post-list-liste .post-image img{height:100%;aspect-ratio:auto;min-height:170px}.post-list-liste .post-body{flex:1 1 auto;align-content:center;padding:22px 26px}.post-list-wechsel{gap:0;counter-reset:beitrag}.post-list-wechsel .post-card{position:relative;counter-increment:beitrag;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0 56px;padding:38px 0;background:transparent;border:0;border-radius:0;overflow:visible}.post-list-wechsel .post-card + .post-card{border-top:1px solid var(--line)}.post-list-wechsel .post-image{border-radius:20px;overflow:hidden;box-shadow:0 18px 46px -22px color-mix(in srgb,var(--ink) 55%,transparent)}.post-list-wechsel .post-image img{aspect-ratio:16/10;border-radius:20px}.post-list-wechsel .post-body{padding:0;display:grid;gap:12px;align-content:center}.post-list-wechsel .post-body::before{content:counter(beitrag,decimal-leading-zero);font-size:13px;font-weight:800;letter-spacing:2px;color:var(--accent)}.post-list-wechsel .post-card h3{font-size:28px;line-height:1.18;letter-spacing:-.5px}.post-list-wechsel .post-excerpt{margin:0;max-width:46ch}.post-list-wechsel .post-meta,.post-list-wechsel .post-terms{margin:0}.post-list-wechsel .post-more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-size:15px;font-weight:700;color:var(--accent);text-decoration:none;width:fit-content} -.post-more::after{content:'→';transition:transform .2s} +.post-more::after{content:'';display:inline-block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--kant-svg-pfeil) center/contain no-repeat;mask:var(--kant-svg-pfeil) center/contain no-repeat;vertical-align:-.12em;transition:transform .2s} .post-more:hover::after{transform:translateX(4px)}.post-list-wechsel .post-more::after{content:'\2192'}.post-list-wechsel .post-card:nth-child(even) .post-image{order:2}.post-list-wechsel .post-card:nth-child(even) .post-body{order:1}@media(max-width:767px){.post-list-wechsel .post-card{grid-template-columns:1fr;gap:18px;padding:26px 0}.post-list-wechsel .post-card:nth-child(even) .post-image{order:0}.post-list-wechsel .post-card:nth-child(even) .post-body{order:0}.post-list-wechsel .post-card h3{font-size:22px}}.post-list-kompakt{gap:0}.post-list-kompakt .post-card{flex-direction:row;align-items:baseline;justify-content:space-between;gap:18px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow:visible}.post-list-kompakt .post-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:16px 2px}.post-list-kompakt .post-meta,.post-list-kompakt .post-terms{margin:0}.post-list-kompakt .post-excerpt{flex:1 1 100%;margin:0} .post-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}.post-card>.post-body{display:grid;gap:10px;padding:20px 22px 22px} .post-image{display:block;position:relative;overflow:hidden;text-decoration:none}.post-view{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 55%,transparent);color:#fff;font-weight:700;font-size:15px;letter-spacing:.4px;opacity:0}.post-card:hover .post-view,.post-card:focus-within .post-view{opacity:1}.post-image img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:0;display:block;background:var(--ink)} @@ -66,7 +68,9 @@ p{hyphens:auto} .block-quote blockquote p{margin:0;font-size:inherit;line-height:1.65} .block-quote figcaption{font-size:14px;font-weight:600} .block-quote figcaption span{font-weight:400;opacity:.85} -.quote-rating{margin:0;letter-spacing:3px} +.quote-rating{margin:0} +.quote-rating svg{display:inline-block;width:1.1em;height:1.1em;margin-right:2px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round} +.quote-rating .quote-star-voll{fill:currentColor} .block-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));align-items:center;gap:24px} .block-logos img{max-height:52px;width:auto;margin-inline:auto;display:block} .kant .block-cta .button{background:var(--accent);color:var(--paper);border-color:var(--accent)}.kant .block-cta .button:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}.block-cta{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center;justify-content:space-between;padding:32px;border:1px solid currentColor;border-radius:14px} @@ -170,7 +174,7 @@ p{hyphens:auto} @media(max-width:767px){.form-summary-list{grid-template-columns:1fr;gap:2px 0}.form-summary-list dd{margin-bottom:8px}} .block-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;font-size:13px} -.block-breadcrumb li+li::before{content:'›';margin-right:10px;opacity:.6} +.block-breadcrumb li+li::before{content:'';display:inline-block;width:.85em;height:.85em;background:currentColor;-webkit-mask:var(--kant-svg-rechts) center/contain no-repeat;mask:var(--kant-svg-rechts) center/contain no-repeat;margin-right:10px;opacity:.6;vertical-align:-.08em} .block-breadcrumb a{text-decoration:none} .block-breadcrumb a:hover{text-decoration:underline} @@ -247,8 +251,8 @@ body.consent-open{padding-bottom:320px} .section-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none} .has-video>.section-inner{position:relative;z-index:1} .video-toggle{position:absolute;right:16px;bottom:16px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(10,20,35,.72);color:#fff;font:14px/1 system-ui,sans-serif;cursor:pointer} -.video-toggle::before{content:"❚❚"} -.video-toggle.is-paused::before{content:"▶"} +.video-toggle::before{content:'';display:inline-block;width:20px;height:20px;background:currentColor;-webkit-mask:var(--kant-svg-pause) center/contain no-repeat;mask:var(--kant-svg-pause) center/contain no-repeat;display:block;margin:auto} +.video-toggle.is-paused::before{-webkit-mask-image:var(--kant-svg-play);mask-image:var(--kant-svg-play)} .video-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px} .video-toggle[hidden]{display:none} .block-html{max-width:100%} @@ -603,6 +607,10 @@ html.kant-top-armed.kant-top-shown .scroll-top{opacity:1;visibility:visible;tran .zoom-close,.zoom-prev,.zoom-next{position:fixed;display:grid;place-items:center;width:52px;height:52px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer} .zoom-close:hover,.zoom-prev:hover,.zoom-next:hover{background:rgba(255,255,255,.26)} .zoom-close:focus-visible,.zoom-prev:focus-visible,.zoom-next:focus-visible{outline:3px solid #fff;outline-offset:3px} +.zoom-close svg,.zoom-prev svg,.zoom-next svg,.pdf-close svg,.scroll-top svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} +.zoom-close svg,.zoom-prev svg,.zoom-next svg{width:26px;height:26px} +.pdf-close svg{width:20px;height:20px} +.scroll-top svg{width:46%;height:46%} .zoom-close{top:18px;right:18px} .zoom-prev{left:18px;top:50%;transform:translateY(-50%)} .zoom-next{right:18px;top:50%;transform:translateY(-50%)} @@ -644,3 +652,5 @@ html.kant-top-armed.kant-top-shown .scroll-top{opacity:1;visibility:visible;tran .tone-ink,.tone-mint{background:transparent;color:#000} [data-step][hidden],.block-form [hidden]{display:block!important} } +.post-pager a[rel="prev"]::before{content:'';display:inline-block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--kant-svg-pfeil-links) center/contain no-repeat;mask:var(--kant-svg-pfeil-links) center/contain no-repeat;margin-right:.35em;vertical-align:-.12em} +.post-pager a[rel="next"]::after{content:'';display:inline-block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--kant-svg-pfeil) center/contain no-repeat;mask:var(--kant-svg-pfeil) center/contain no-repeat;margin-left:.35em;vertical-align:-.12em} diff --git a/public/assets/slider.js b/public/assets/slider.js index ad53506..70c3b40 100644 --- a/public/assets/slider.js +++ b/public/assets/slider.js @@ -56,14 +56,14 @@ export function initSliders(doc = document) { go(direction > 0 ? (last ? visible[0] : visible[Math.min(visible.length - 1, position + 1)]) : (first ? visible.at(-1) : visible[Math.max(0, position - 1)])); }; const manual = action => { playing = false; clearTimeout(timer); update(); action(); }; - const previous = button('←', 'Vorherige Folie', () => manual(() => step(-1))); previous.className = 'slider-prev'; + const previous = button('', 'Vorherige Folie', () => manual(() => step(-1))); previous.className = 'slider-prev'; const count = doc.createElement('span'); count.className = 'slider-position'; controls.append(count); - const next = button('→', 'Nächste Folie', () => manual(() => step(1))); next.className = 'slider-next'; + const next = button('', 'Nächste Folie', () => manual(() => step(1))); next.className = 'slider-next'; const dots = []; if (slider.classList.contains('slider-dots')) { const group = doc.createElement('div'); group.className = 'slider-control-dots'; controls.append(group); slides.forEach((slide, i) => { - const dot = button('●', `Folie ${i + 1} anzeigen`, () => manual(() => go(i))); group.append(dot); dots.push(dot); + const dot = button('', `Folie ${i + 1} anzeigen`, () => manual(() => go(i))); group.append(dot); dots.push(dot); }); } const play = seconds >= 3 ? button('', 'Automatische Wiedergabe pausieren', () => { playing = !playing; update(); schedule(); }) : null; diff --git a/src/Twig/LanguageExtension.php b/src/Twig/LanguageExtension.php index 3bd3e55..6193918 100644 --- a/src/Twig/LanguageExtension.php +++ b/src/Twig/LanguageExtension.php @@ -81,8 +81,8 @@ final class LanguageExtension extends AbstractExtension 'Beiträge in der Kategorie „%s“.' => 'Posts in the category “%s”.', 'Beiträge zum Schlagwort „%s“.' => 'Posts tagged “%s”.', 'von' => 'by', - '← Neuere' => '← Newer', - 'Ältere →' => 'Older →', + 'Neuere' => 'Newer', + 'Ältere' => 'Older', 'Seite %d von %d' => 'Page %d of %d', 'Externe Inhalte und Einwilligung' => 'External content and consent', 'Diese Website lädt bestimmte Inhalte erst, wenn du zustimmst. Ohne Zustimmung wird die Seite vollständig angezeigt, nur eingebettete Inhalte anderer Anbieter bleiben leer.' => 'This website only loads certain content once you agree. Without consent the page is shown in full; only embedded content from other providers stays empty.', @@ -173,8 +173,8 @@ final class LanguageExtension extends AbstractExtension 'Beiträge in der Kategorie „%s“.' => '„%s“ kategorisindeki yazılar.', 'Beiträge zum Schlagwort „%s“.' => '„%s“ etiketli yazılar.', 'von' => 'yazan:', - '← Neuere' => '← Daha yeni', - 'Ältere →' => 'Daha eski →', + 'Neuere' => 'Daha yeni', + 'Ältere' => 'Daha eski', 'Seite %d von %d' => 'Sayfa %d / %d', 'Externe Inhalte und Einwilligung' => 'Harici içerikler ve onay', 'Diese Website lädt bestimmte Inhalte erst, wenn du zustimmst. Ohne Zustimmung wird die Seite vollständig angezeigt, nur eingebettete Inhalte anderer Anbieter bleiben leer.' => 'Bu web sitesi bazı içerikleri ancak onayınızdan sonra yükler. Onay vermeseniz de sayfa eksiksiz görüntülenir; yalnızca diğer sağlayıcıların yerleştirilmiş içerikleri boş kalır.', diff --git a/templates/blocks/block.html.twig b/templates/blocks/block.html.twig index c91323a..5616336 100644 --- a/templates/blocks/block.html.twig +++ b/templates/blocks/block.html.twig @@ -78,7 +78,7 @@ {% elseif type == 'quote' %}
{% if props.rating|default(0) > 0 %} -

+

{% endif %}

{{ props.text }}

{{ props.author }}{% if props.role|default('') %} {{ props.role }}{% endif %}
diff --git a/templates/blocks/post-list.html.twig b/templates/blocks/post-list.html.twig index b1bdbfc..bd28604 100644 --- a/templates/blocks/post-list.html.twig +++ b/templates/blocks/post-list.html.twig @@ -41,8 +41,8 @@ {% if pages|default(1) > 1 %} {# Dieselbe Blätterleiste wie im Archiv: eine Liste, die mehr hat als sie zeigt, sagt es. #} {% endif %} diff --git a/templates/page.html.twig b/templates/page.html.twig index a53dbd2..bb5ce88 100644 --- a/templates/page.html.twig +++ b/templates/page.html.twig @@ -125,7 +125,7 @@ {# Ein Anker, kein Skript. Er springt an den Anfang - das kann ein Browser allein. Der nav-Rahmen gibt ihm eine Landmarke: ein Verweis außerhalb jeder Landmarke ist für Vorlesesoftware Inhalt ohne Ort, und axe meldet ihn als Verstoß gegen „region“. #} - + {% endif %}