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:
1 parent
f6e98cdcbb
commit
5df349fc71
8 files changed
+143
No files matched your search
@@ -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}
|
||||
}
|
||||
Reference in new issue
Block a user