From 78083fac6ac5d54d679fc6dc85bd0eec1a202fd3 Mon Sep 17 00:00:00 2001 From: Umut Kantarci Date: Mon, 9 Nov 2026 20:02:24 +0100 Subject: [PATCH] Use own SVG icons instead of text glyphs on the website Phones turn glyphs such as arrows and crosses into emoji. The viewer, scroll button, video toggle, menus, breadcrumbs, pagers and quote stars now draw SVG. Co-Authored-By: Claude Opus 5.5 --- public/assets/lightbox.js | 11 +++++++---- public/assets/site.css | 24 +++++++++++++++++------- public/assets/slider.js | 6 +++--- src/Twig/LanguageExtension.php | 8 ++++---- templates/blocks/block.html.twig | 2 +- templates/blocks/post-list.html.twig | 4 ++-- templates/page.html.twig | 2 +- 7 files changed, 35 insertions(+), 22 deletions(-) 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 %}