Add compass logo with favicon set and quote claim titles in the UI.

Introduces SVG and PNG icon assets with manifest links, and wraps public claim titles in German quotation marks.

Co-authored-by: Cursor <cursoragent@cursor.com>

claims/templatetags/claims_extras.py

@@ -15,6 +15,13 @@ def evidence_label(value):
     return dict(Claim.EvidenceLevel.choices).get(value, value)
 
 
+@register.filter
+def quoted(value):
+    if not value:
+        return value
+    return f'„{value}"'
+
+
 @register.inclusion_tag('claims/partials/status_badge.html')
 def status_badge(claim):
     return {'claim': claim}

static/css/custom.css

@@ -74,8 +74,13 @@ body {
     justify-content: center;
     width: 1.75rem;
     height: 1.75rem;
-    color: var(--fk-accent);
-    font-size: 1.15rem;
+    flex-shrink: 0;
+}
+
+.fk-brand-icon img {
+    display: block;
+    width: 100%;
+    height: 100%;
 }
 
 .fk-nav-links {

static/img/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-hidden="true">
+  <circle cx="16" cy="16" r="14" fill="none" stroke="#0d9488" stroke-width="1.75"/>
+  <line x1="16" y1="2" x2="16" y2="5.5" stroke="#0d9488" stroke-width="2" stroke-linecap="round"/>
+  <path fill="#0d9488" d="M16 5 L13.25 16 L16 13.5 L18.75 16 Z"/>
+  <path fill="#94a3b8" d="M16 27 L13.25 16 L16 18.5 L18.75 16 Z" opacity="0.55"/>
+  <path fill="none" stroke="#0d9488" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M11 18.25 L14.25 21.5 21 13.75"/>
+  <circle cx="16" cy="16" r="1.75" fill="#0d9488"/>
+</svg>

static/img/logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-hidden="true">
+  <circle cx="32" cy="32" r="28" fill="none" stroke="#0d9488" stroke-width="2.5"/>
+  <line x1="32" y1="4" x2="32" y2="11" stroke="#0d9488" stroke-width="3" stroke-linecap="round"/>
+  <line x1="32" y1="53" x2="32" y2="60" stroke="#0d9488" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
+  <line x1="53" y1="32" x2="60" y2="32" stroke="#0d9488" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
+  <line x1="4" y1="32" x2="11" y2="32" stroke="#0d9488" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
+  <path fill="#0d9488" d="M32 10 L26.5 32 L32 27 L37.5 32 Z"/>
+  <path fill="#94a3b8" d="M32 54 L26.5 32 L32 37 L37.5 32 Z" opacity="0.55"/>
+  <path fill="none" stroke="#0d9488" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" d="M22 36.5 L28.5 43 40 29.5"/>
+  <circle cx="32" cy="32" r="3.25" fill="#0d9488"/>
+</svg>

static/img/safari-pinned-tab.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <circle cx="32" cy="32" r="28" fill="none" stroke="#000" stroke-width="4"/>
+  <path fill="#000" d="M32 10 L26.5 32 L32 27 L37.5 32 Z"/>
+  <path fill="#000" d="M32 54 L26.5 32 L32 37 L37.5 32 Z" opacity="0.35"/>
+  <path fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M22 36.5 L28.5 43 40 29.5"/>
+  <circle cx="32" cy="32" r="4" fill="#000"/>
+</svg>

static/site.webmanifest

@@ -0,0 +1,20 @@
+{
+  "name": "Faktenkompass",
+  "short_name": "Faktenkompass",
+  "description": "Überprüfbare Fakten und Quellen",
+  "icons": [
+    {
+      "src": "img/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "img/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#0d9488",
+  "background_color": "#f5f5f7",
+  "display": "standalone"
+}

templates/admin/base_site.html

@@ -10,6 +10,9 @@
 
 {% block extrahead %}
 {{ block.super }}
+<link rel="icon" href="{% static 'img/favicon.ico' %}" sizes="any">
+<link rel="icon" href="{% static 'img/favicon.svg' %}" type="image/svg+xml">
+<link rel="apple-touch-icon" href="{% static 'img/apple-touch-icon.png' %}">
 <script src="{% static 'js/admin_custom.js' %}" defer></script>
 {% endblock %}
 

templates/base.html

@@ -6,6 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="{% block meta_description %}Faktenkompass – Überprüfbare Fakten und Quellen.{% endblock %}">
     <title>{% block title %}Faktenkompass{% endblock %}</title>
+    <link rel="icon" href="{% static 'img/favicon.ico' %}" sizes="any">
+    <link rel="icon" href="{% static 'img/favicon.svg' %}" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="{% static 'img/apple-touch-icon.png' %}">
+    <link rel="manifest" href="{% static 'site.webmanifest' %}">
+    <link rel="mask-icon" href="{% static 'img/safari-pinned-tab.svg' %}" color="#0d9488">
+    <meta name="theme-color" content="#0d9488">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
@@ -28,7 +34,9 @@
     <header class="fk-nav">
         <div class="container fk-nav-inner">
             <a class="fk-brand" href="{% url 'claims:home' %}">
-                <span class="fk-brand-icon"><i class="bi bi-compass"></i></span>
+                <span class="fk-brand-icon">
+                    <img src="{% static 'img/logo.svg' %}" width="28" height="28" alt="">
+                </span>
                 Faktenkompass
             </a>
             <nav class="fk-nav-links" aria-label="Hauptnavigation">

templates/claims/claim_detail.html

@@ -14,7 +14,7 @@
 </nav>
 
 <article>
-    <h1 class="fk-claim-title">{{ claim.title }}</h1>
+    <h1 class="fk-claim-title">{{ claim.title|quoted }}</h1>
 
     <div class="fk-meta-stack mb-3">
         {% status_badge claim %}
@@ -132,7 +132,7 @@
             <div class="claim-card">
                 <div class="card-body py-2">
                     <div class="mb-1">{% status_badge related %}</div>
-                    <span class="claim-title small d-block">{{ related.title }}</span>
+                    <span class="claim-title small d-block">{{ related.title|quoted }}</span>
                 </div>
             </div>
         </a>

templates/claims/partials/claim_list.html

@@ -10,7 +10,7 @@
                 </div>
                 {% endif %}
                 <div class="mb-1">{% status_badge claim %}</div>
-                <span class="claim-title d-block">{{ claim.title }}</span>
+                <span class="claim-title d-block">{{ claim.title|quoted }}</span>
             </div>
         </div>
     </a>