GL-Style: kräftigere Schrift (Open Sans Semibold, self-hosted), sattere Farben, Bahntrassen

- Labels + Cluster-Zahlen auf Open Sans Semibold (Glyphs gehostet) — Schrift war zu dünn
- Farben gesättigt: Grün/Park/Wasser kräftiger, Füll-Deckkraft 0.55→0.8 (wirkten blass)
- Bahn-Layer (class rail/transit): Basis-Linie + Schwellen-Effekt (fehlten ganz)
This commit is contained in:
rene 2026-06-05 11:47:52 +02:00
parent fc9cac410c
commit cc1fdb00b1
7 changed files with 41 additions and 32 deletions

View file

@ -1 +1 @@
1190
1191

View file

@ -86,14 +86,14 @@
<title>Ban Yaro</title>
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
<script src="/js/boot-early.js?v=1190"></script>
<script src="/js/boot-early.js?v=1191"></script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1190">
<link rel="stylesheet" href="/css/layout.css?v=1190">
<link rel="stylesheet" href="/css/components.css?v=1190">
<link rel="stylesheet" href="/css/utilities.css?v=1190">
<link rel="stylesheet" href="/css/lists.css?v=1190">
<link rel="stylesheet" href="/css/design-system.css?v=1191">
<link rel="stylesheet" href="/css/layout.css?v=1191">
<link rel="stylesheet" href="/css/components.css?v=1191">
<link rel="stylesheet" href="/css/utilities.css?v=1191">
<link rel="stylesheet" href="/css/lists.css?v=1191">
</head>
<body>
@ -617,11 +617,11 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1190"></script>
<script src="/js/ui.js?v=1190"></script>
<script src="/js/app.js?v=1190"></script>
<script src="/js/worlds.js?v=1190"></script>
<script src="/js/offline-indicator.js?v=1190"></script>
<script src="/js/api.js?v=1191"></script>
<script src="/js/ui.js?v=1191"></script>
<script src="/js/app.js?v=1191"></script>
<script src="/js/worlds.js?v=1191"></script>
<script src="/js/offline-indicator.js?v=1191"></script>
<!-- Feature-Seiten werden lazy geladen -->
@ -631,7 +631,7 @@
<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
<script src="/js/boot.js?v=1190"></script>
<script src="/js/boot.js?v=1191"></script>
</body>

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '1190'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '1191'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
window.APP_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator)
window.APP_VERSION = APP_VERSION;

View file

@ -117,7 +117,7 @@
_map.addLayer({ id: 'clsym-' + key, type: 'symbol', source: src, filter: ['has', 'point_count'],
layout: {
'text-field': ['get', 'point_count_abbreviated'],
'text-font': ['Open Sans Regular'],
'text-font': ['Open Sans Semibold'],
'text-size': ['step', ['get', 'point_count'], 12, 100, 14, 1000, 16],
'text-allow-overlap': true, 'text-ignore-placement': true,
},

View file

@ -10,20 +10,21 @@
var THEMES = {
light: {
bg: '#f4f1ec', land: '#dce8c8', park: '#c8e6b0', water: '#a0c8f0',
road: '#ffffff', roadCasing: '#d9cfc2', building: '#e6ddcf',
buildingLine: '#d4cabb', boundary: '#b08ac0', path: '#c19a86',
label: '#33312e', roadLabel: '#6b6357', waterLabel: '#4a78a8', poiLabel: '#5c5346', labelHalo: 'rgba(255,255,255,0.9)',
bg: '#f2efe8', land: '#cbe3a8', park: '#aedd88', water: '#7fbbe8',
road: '#ffffff', roadCasing: '#cdbfa9', building: '#e6d8bf',
buildingLine: '#cdbb9c', boundary: '#a06ec0', path: '#b08160', rail: '#9a9aa2',
label: '#2a2823', roadLabel: '#574f43', waterLabel: '#2f6aa0', poiLabel: '#4a4236', labelHalo: 'rgba(255,255,255,0.95)',
},
dark: {
bg: '#1a1d21', land: '#222820', park: '#27331f', water: '#16242e',
road: '#3a4046', roadCasing: '#23282d', building: '#262b30',
buildingLine: '#31373d', boundary: '#7d5a8c', path: '#5a4f47',
label: '#d6d9dd', roadLabel: '#9aa0a6', waterLabel: '#6fa0cc', poiLabel: '#b7ad9e', labelHalo: 'rgba(0,0,0,0.8)',
bg: '#1a1d21', land: '#252e1d', park: '#2c3c1f', water: '#163242',
road: '#444a52', roadCasing: '#23282d', building: '#2a2f35',
buildingLine: '#373d44', boundary: '#8a63a0', path: '#6b5d52', rail: '#5e5e68',
label: '#e2e5e9', roadLabel: '#a6acb3', waterLabel: '#7db0dd', poiLabel: '#c3b9a8', labelHalo: 'rgba(0,0,0,0.85)',
},
};
var FONT = ['Open Sans Regular'];
var FONT_BOLD = ['Open Sans Semibold'];
// Liefert ein MapLibre-Style-JSON (Version 8) ohne glyphs/sprite.
function build(opts) {
@ -38,9 +39,9 @@
layers: [
{ id: 'bg', type: 'background', paint: { 'background-color': t.bg } },
{ id: 'landcover', type: 'fill', source: 'by', 'source-layer': 'landcover',
paint: { 'fill-color': t.land, 'fill-opacity': 0.55 } },
paint: { 'fill-color': t.land, 'fill-opacity': 0.8 } },
{ id: 'park', type: 'fill', source: 'by', 'source-layer': 'park',
paint: { 'fill-color': t.park, 'fill-opacity': 0.5 } },
paint: { 'fill-color': t.park, 'fill-opacity': 0.75 } },
{ id: 'water', type: 'fill', source: 'by', 'source-layer': 'water',
paint: { 'fill-color': t.water } },
{ id: 'waterway', type: 'line', source: 'by', 'source-layer': 'waterway',
@ -65,6 +66,14 @@
6, ['match', ['get', 'class'], ['motorway', 'trunk'], 1.4, 0.4],
12, ['match', ['get', 'class'], ['motorway', 'trunk', 'primary'], 2.4, 1.1],
16, ['match', ['get', 'class'], ['motorway', 'trunk'], 6, ['primary', 'secondary'], 4.5, 3]] } },
// Bahntrassen: Basis-Linie + Schwellen (dicke gestrichelte Überlagerung).
{ id: 'railway', type: 'line', source: 'by', 'source-layer': 'transportation', minzoom: 11,
filter: ['in', ['get', 'class'], ['literal', ['rail', 'transit']]],
paint: { 'line-color': t.rail, 'line-width': ['interpolate', ['linear'], ['zoom'], 11, 0.8, 16, 2] } },
{ id: 'railway-ties', type: 'line', source: 'by', 'source-layer': 'transportation', minzoom: 13,
filter: ['in', ['get', 'class'], ['literal', ['rail', 'transit']]],
paint: { 'line-color': t.rail, 'line-dasharray': [0.35, 3],
'line-width': ['interpolate', ['linear'], ['zoom'], 13, 3, 16, 6] } },
{ id: 'buildings', type: 'fill', source: 'by', 'source-layer': 'building',
minzoom: 13,
paint: { 'fill-color': t.building, 'fill-outline-color': t.buildingLine } },
@ -77,31 +86,31 @@
filter: ['in', ['get', 'class'], ['literal', ['city', 'town', 'village', 'suburb', 'hamlet', 'neighbourhood']]],
layout: {
'text-field': ['coalesce', ['get', 'name:de'], ['get', 'name']],
'text-font': FONT, 'text-max-width': 8, 'text-anchor': 'center',
'text-font': FONT_BOLD, 'text-max-width': 8, 'text-anchor': 'center',
'text-size': ['interpolate', ['linear'], ['zoom'], 4, 10, 8, 12, 12, 14, 16, 17],
},
paint: { 'text-color': t.label, 'text-halo-color': t.labelHalo, 'text-halo-width': 1.6 } },
{ id: 'water-labels', type: 'symbol', source: 'by', 'source-layer': 'water_name',
layout: { 'text-field': ['coalesce', ['get', 'name:de'], ['get', 'name']], 'text-font': FONT, 'text-size': 12, 'text-max-width': 6 },
layout: { 'text-field': ['coalesce', ['get', 'name:de'], ['get', 'name']], 'text-font': FONT_BOLD, 'text-size': 12, 'text-max-width': 6 },
paint: { 'text-color': t.waterLabel, 'text-halo-color': t.labelHalo, 'text-halo-width': 1.2 } },
{ id: 'street-labels', type: 'symbol', source: 'by', 'source-layer': 'transportation_name', minzoom: 14,
layout: { 'text-field': ['coalesce', ['get', 'name:de'], ['get', 'name']], 'text-font': FONT, 'symbol-placement': 'line', 'text-size': 11 },
layout: { 'text-field': ['coalesce', ['get', 'name:de'], ['get', 'name']], 'text-font': FONT_BOLD, 'symbol-placement': 'line', 'text-size': 11 },
paint: { 'text-color': t.roadLabel, 'text-halo-color': t.labelHalo, 'text-halo-width': 1.2 } },
// POI-Namen (Kinderspielplatz, Schule, …) ab Z15 — Kollisionserkennung verhindert Überladung.
{ id: 'poi-labels', type: 'symbol', source: 'by', 'source-layer': 'poi', minzoom: 15,
layout: {
'text-field': ['coalesce', ['get', 'name:de'], ['get', 'name']],
'text-font': FONT, 'text-size': 11, 'text-max-width': 8,
'text-font': FONT_BOLD, 'text-size': 11, 'text-max-width': 8,
'text-anchor': 'top', 'text-offset': [0, 0.4], 'symbol-sort-key': ['get', 'rank'],
},
paint: { 'text-color': t.poiLabel, 'text-halo-color': t.labelHalo, 'text-halo-width': 1.2 } },
// Hausnummern ab Z17 (niedrigste Priorität).
{ id: 'housenumbers', type: 'symbol', source: 'by', 'source-layer': 'housenumber', minzoom: 17,
layout: { 'text-field': ['get', 'housenumber'], 'text-font': FONT, 'text-size': 9.5 },
layout: { 'text-field': ['get', 'housenumber'], 'text-font': FONT_BOLD, 'text-size': 9.5 },
paint: { 'text-color': t.roadLabel, 'text-halo-color': t.labelHalo, 'text-halo-width': 1 } },
],
};

View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<script src="/js/landing-init.js?v=1190"></script>
<script src="/js/landing-init.js?v=1191"></script>
<title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
<meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
<meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">

View file

@ -4,7 +4,7 @@
============================================================ */
// ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
const VER = '1190';
const VER = '1191';
const CACHE_VERSION = `by-v${VER}`;
const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten