diff --git a/DESIGN.md b/DESIGN.md index deb8423..8b749a8 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -326,6 +326,56 @@ abgelöst) und `datenschutz.html`. Beide nutzen die `.prose`-Klassen. Offene Ang als `.todo`-Felder mit gestricheltem Coral-Rahmen im Fließtext, damit nichts davon versehentlich live geht, plus ein `.prose__warn`-Kasten oben auf jeder Seite. +## Social Media (2026-09-29) + +Vierte Footer-Spalte „Folgen" auf allen fünf Seiten: Facebook, Instagram, TikTok. + +**Nur Links, keine Einbettungen.** Kein Page-Plugin, kein Feed, keine Like- oder +Folgen-Schaltfläche. Solche Widgets laden fremde Skripte beim Seitenaufruf und setzen +Cookies — das würde die Bannerfreiheit kippen, auf der die Datenschutzerklärung steht. +Dieselbe Überlegung wie bei der Karte, nur mit dem angenehmeren Ergebnis: bei reinen Links +braucht es nicht einmal eine Zwei-Klick-Lösung. Gemessen nach dem Einbau: weiterhin null +Fremdanfragen, keine Cookies, kein Storage. + +**Icon plus Text, nicht Icon allein.** Eine reine Icon-Reihe zwingt zum Raten und braucht +eigene Beschriftung für Screenreader. Mit Text greift `.ftr__col a` unverändert weiter, +inklusive Zielgrößen. Jeder Link trägt zusätzlich ein verstecktes +„(öffnet in neuem Fenster)" und `rel="noopener noreferrer"`. + +**Icons erben `currentColor`,** tragen also `--ink-700` statt Markenfarben. Im Fließtext +trägt Farbe keine Information — siehe Abschnitt Farbe. Die Markenzeichen bleiben in ihrer +Form unverändert; als Verweis auf das eigene Profil ist das zulässige Nennung. + +**Die drei Ziele, alle vor dem Einbau im Browser geprüft:** + +| | Adresse | Stand 29.09.2026 | +|---|---|---| +| Facebook | `/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/` | Seite bestätigt | +| Instagram | `instagram.com/emmas_schatzkiste/` | 70 Follower, 112 Beiträge | +| TikTok | `tiktok.com/@emmasschatzkiste` | 29 Videos, 64 Follower | + +**Bei Facebook steht die dauerhafte Adresse, nicht der Share-Link.** Geliefert wurde +`facebook.com/share/19NxMjLkKT/`. Solche Links sind undurchsichtig — beim Überfahren sieht +niemand, wohin es geht —, sie hängen an einem Weiterleitungsschritt und können ungültig +werden. Im Browser aufgelöst ergibt sich die Profiladresse mit der festen ID +`61594794906587`; die steht jetzt im Footer, ohne die angehängten Tracking-Parameter +`rdid` und `share_url`. + +**Der Platzhalter-Mechanismus bleibt im CSS.** `.ftr__social[href^="URL-"]` zeichnet einen +gestrichelten Coral-Rahmen, falls je wieder eine Adresse fehlt. Erfundene Profil-Links +kommen nicht in Frage: ein Icon, das auf ein fremdes Konto führt, ist schlimmer als keins. + +### Nebenbefund: die 44px-Regel im Footer war wirkungslos + +Beim Messen aufgefallen: Fusszeilen-Links waren auf dem Handy **30px** hoch, nicht 44. +Die Mobilregel steht in `site.css` bei Zeile ~245, die Basisregel mit `min-height:30px` +im FOOTER-Abschnitt bei ~622 — gleiche Spezifität, spätere Regel gewinnt. Die weiter oben +dokumentierte Korrektur war dadurch seit Längerem außer Kraft. Behoben durch einen Block +am Dateiende; betrifft alle 13 Footer-Links, nicht nur die neuen. + +Das ist im Projekt der dritte Fall derselben Falle. Merke: Overrides für Regeln aus den +Komponentenabschnitten gehören ans **Ende** von `site.css`, nicht in den Mobile-Block oben. + ## Mobil und Touch **Überarbeitung 2026-09-24** (Kundenrückmeldung: Einstieg schwach, Header klobig, zu lang, diff --git a/README.md b/README.md index 007f0e1..c4c13c7 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,12 @@ cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173 ### Vom Kunden ausstehend +0. ~~**Die drei Social-Media-Adressen.**~~ Erledigt 2026-09-29. Facebook, Instagram und + TikTok stehen im Footer aller fünf Seiten; alle drei Ziele wurden vor dem Einbau im + Browser aufgerufen und bestätigt. Bei Facebook ist die dauerhafte Profiladresse + eingetragen, nicht der gelieferte Share-Link (Begründung in [`DESIGN.md`](DESIGN.md)). + + 3. ~~**Foto von Opa Martin.**~~ Erledigt 2026-09-24 (`assets/opa-martin.jpg`). 4. ~~**Zwei Audiodateien**~~ Erledigt 2026-09-26 (`assets/audio/`). 5. ~~**Öffnungszeiten und vollständige Anschrift.**~~ Erledigt 2026-09-25 (von Google Maps). diff --git a/assets/site.css b/assets/site.css index d731875..ec3dc98 100644 --- a/assets/site.css +++ b/assets/site.css @@ -624,6 +624,32 @@ a:hover{color:var(--sky-600)} font:400 15px/1.4 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); text-decoration:none; } .ftr__col a:hover{color:var(--sky-600); text-decoration:underline} +/* Social-Links im Footer. Ausgehende Verweise, sonst nichts: kein Page-Plugin, + kein Feed, kein Follow-Button. Solche Widgets laden fremde Skripte beim + Seitenaufruf und wuerden die Bannerfreiheit kippen, auf der die + Datenschutzerklaerung steht — dieselbe Ueberlegung wie bei der Karte. + + Icon PLUS Text, nicht Icon allein: eine reine Icon-Reihe zwingt zum Raten und + braucht Extra-Beschriftung. Mit Text greift .ftr__col a unveraendert weiter, + inklusive der 30px/44px-Zielgroessen. + Die Icons erben currentColor (--ink-700) statt Markenfarben zu tragen — im + Fliesstext traegt Farbe keine Information, siehe DESIGN.md Abschnitt Farbe. */ +.ftr__social{gap:9px} +.ftr__social svg{width:18px; height:18px; flex:none} + +/* Platzhalter, solange eine Profiladresse fehlt. Unuebersehbar, damit nichts + davon versehentlich live geht. */ +.ftr__social[href^="URL-"]{ + color:var(--coral-500); border:2px dashed var(--coral-400); + border-radius:var(--radius-xs); padding-inline:6px; font-weight:700; +} + +/* Nur fuer Screenreader. */ +.vh{ + position:absolute; width:1px; height:1px; padding:0; margin:-1px; + overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; +} + .ftr__legal{ margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid rgba(35,52,74,.12); font:var(--t-small); color:var(--ink-700); max-width:80ch; @@ -739,3 +765,14 @@ a:hover{color:var(--sky-600)} .nav a:focus-visible, .hdr__brand:focus-visible{border-radius:var(--radius-pill)} .iconbtn:focus-visible{border-radius:50%} .contact a:focus-visible, .ftr__col a:focus-visible{border-radius:var(--radius-xs)} + +/* ============================================================ TOUCH-ZIELE MOBIL + Muss ganz am Ende stehen. Die Regel im Mobile-Block weiter oben (Zeile ~245) setzt + .ftr__col a auf min-height:44px, wird aber von der Basisregel im FOOTER-Abschnitt + mit min-height:30px ueberschrieben — gleiche Spezifitaet, spaetere Regel gewinnt. + Die dokumentierte 44px-Korrektur war dadurch seit laengerem wirkungslos; gemessen + waren es auf dem Handy 30px. Hier greift sie wieder. + Betrifft alle Fusszeilen-Links, nicht nur die Social-Links. */ +@media (max-width:639.98px){ + .ftr__col a, .ftr__col span{min-height:44px; padding-block:2px} +} diff --git a/datenschutz.html b/datenschutz.html index 23f7a65..1490940 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -100,6 +100,16 @@

Der Link „Route planen" öffnet Google Maps in einem neuen Fenster. Auch dort gilt erst ab dem Klick die Datenschutzerklärung von Google.

+

4b. Social Media

+

Im Fußbereich jeder Seite finden Sie Verweise auf unsere Profile bei Facebook, + Instagram und TikTok. Das sind einfache Links. Es sind keine + Plugins, Feeds, Like- oder Folgen-Schaltflächen dieser Netzwerke eingebunden.

+

Beim Aufruf dieser Website werden deshalb keine Daten an die Netzwerke + übertragen und keine Cookies der Netzwerke gesetzt. Erst wenn Sie einen der + Links anklicken, verlässt Ihr Browser diese Website. Ab dann gelten ausschließlich + die Datenschutzbestimmungen des jeweiligen Anbieters, auf dessen Verarbeitung wir + keinen Einfluss haben.

+

5. Schriftarten

Die Schriften Fredoka und Nunito werden lokal vom eigenen Server ausgeliefert. Beim Aufruf dieser Seite wird keine Verbindung zu Google Fonts oder zu @@ -178,6 +188,14 @@

  • Datenschutz
    • +
    +

    Folgen

    + +

    Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.

    diff --git a/hilfe-verein.html b/hilfe-verein.html index a417eb3..98691d0 100644 --- a/hilfe-verein.html +++ b/hilfe-verein.html @@ -181,6 +181,14 @@
  • Datenschutz
    • +
    +

    Folgen

    + +

    Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.

    diff --git a/impressum.html b/impressum.html index 03693ee..87cde31 100644 --- a/impressum.html +++ b/impressum.html @@ -113,6 +113,14 @@
  • Datenschutz
    • +
    +

    Folgen

    + +

    Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.

    diff --git a/index.html b/index.html index 62f590d..c4beb11 100644 --- a/index.html +++ b/index.html @@ -219,6 +219,14 @@
  • Datenschutz
    • +
    +

    Folgen

    + +

    Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.

    diff --git a/shop.html b/shop.html index f07ee01..a9385b3 100644 --- a/shop.html +++ b/shop.html @@ -72,6 +72,14 @@
  • Datenschutz
    • +
    +

    Folgen

    + +

    Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.