Social-Media-Links im Footer: Facebook, Instagram, TikTok
Vierte Footer-Spalte "Folgen" auf allen fünf Seiten. Icon plus Text statt Icon allein; Icons erben currentColor statt Markenfarben, weil Farbe im Fließtext keine Information trägt. Nur einfache Links, keine Plugins, Feeds oder Folgen-Schaltflächen. Solche Widgets würden beim Seitenaufruf fremde Skripte laden und Cookies setzen und damit die Bannerfreiheit kippen, auf der die Datenschutzerklärung steht. Gemessen nach dem Einbau: weiterhin null Fremdanfragen, keine Cookies, kein Storage. Datenschutzerklärung um Abschnitt 4b ergänzt. Alle drei Ziele vor dem Einbau im Browser aufgerufen und bestätigt. Bei Facebook steht die dauerhafte Profiladresse mit der ID 61594794906587, nicht der gelieferte Share-Link: der ist undurchsichtig, hängt an einer Weiterleitung und kann ungültig werden. Nebenbefund behoben: die 44px-Regel für Fusszeilen-Links war wirkungslos, weil die Basisregel mit min-height:30px später in site.css steht. Gemessen waren es auf dem Handy 30px. Override ans Dateiende gehängt, betrifft alle 13 Links. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Andrej StevanovskiandClaude Opus 5 committed
1 parent
f6e98cdcbb
commit
5df349fc71
8 files changed
+143
No files matched your search
@@ -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,
|
||||
|
||||
@@ -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).
|
||||
|
||||
@@ -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}
|
||||
}
|
||||
@@ -100,6 +100,16 @@
|
||||
<p>Der Link „Route planen" öffnet Google Maps in einem neuen Fenster. Auch dort gilt
|
||||
erst ab dem Klick die Datenschutzerklärung von Google.</p>
|
||||
|
||||
<h2 id="social">4b. Social Media</h2>
|
||||
<p>Im Fußbereich jeder Seite finden Sie Verweise auf unsere Profile bei Facebook,
|
||||
Instagram und TikTok. Das sind <strong>einfache Links</strong>. Es sind keine
|
||||
Plugins, Feeds, Like- oder Folgen-Schaltflächen dieser Netzwerke eingebunden.</p>
|
||||
<p>Beim Aufruf dieser Website werden deshalb <strong>keine Daten an die Netzwerke
|
||||
übertragen</strong> 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.</p>
|
||||
|
||||
<h2>5. Schriftarten</h2>
|
||||
<p>Die Schriften Fredoka und Nunito werden <strong>lokal vom eigenen Server</strong>
|
||||
ausgeliefert. Beim Aufruf dieser Seite wird keine Verbindung zu Google Fonts oder zu
|
||||
@@ -178,6 +188,14 @@
|
||||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Folgen</h3>
|
||||
<ul>
|
||||
<li><a class="ftr__social" href="https://www.facebook.com/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>Facebook<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
<li><a class="ftr__social" href="https://www.instagram.com/emmas_schatzkiste/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>Instagram<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
<li><a class="ftr__social" href="https://www.tiktok.com/@emmasschatzkiste" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>TikTok<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
|
||||
@@ -181,6 +181,14 @@
|
||||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Folgen</h3>
|
||||
<ul>
|
||||
<li><a class="ftr__social" href="https://www.facebook.com/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>Facebook<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
<li><a class="ftr__social" href="https://www.instagram.com/emmas_schatzkiste/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>Instagram<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
<li><a class="ftr__social" href="https://www.tiktok.com/@emmasschatzkiste" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>TikTok<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
|
||||
@@ -113,6 +113,14 @@
|
||||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Folgen</h3>
|
||||
<ul>
|
||||
<li><a class="ftr__social" href="https://www.facebook.com/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>Facebook<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
<li><a class="ftr__social" href="https://www.instagram.com/emmas_schatzkiste/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>Instagram<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
<li><a class="ftr__social" href="https://www.tiktok.com/@emmasschatzkiste" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>TikTok<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
|
||||
@@ -219,6 +219,14 @@
|
||||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Folgen</h3>
|
||||
<ul>
|
||||
<li><a class="ftr__social" href="https://www.facebook.com/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>Facebook<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
<li><a class="ftr__social" href="https://www.instagram.com/emmas_schatzkiste/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>Instagram<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
<li><a class="ftr__social" href="https://www.tiktok.com/@emmasschatzkiste" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>TikTok<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
|
||||
@@ -72,6 +72,14 @@
|
||||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Folgen</h3>
|
||||
<ul>
|
||||
<li><a class="ftr__social" href="https://www.facebook.com/people/EmMas-Schatzkiste-Baby-und-Kinder-Secondhand-Laden/61594794906587/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>Facebook<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
<li><a class="ftr__social" href="https://www.instagram.com/emmas_schatzkiste/" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>Instagram<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
<li><a class="ftr__social" href="https://www.tiktok.com/@emmasschatzkiste" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>TikTok<span class="vh"> (öffnet in neuem Fenster)</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechne ich keine Umsatzsteuer und weise sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user