Vorlage:Kachel/styles.css: Unterschied zwischen den Versionen
Die Seite wurde neu angelegt: „.wiki-kachel { display: block; width: 100%; height: 100%; } .wiki-kachel-link { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; padding: 25px; background: #f8f9fa; border: 1px solid #c8ccd1; border-radius: 12px; color: #202122; text-decoration: none; transition: transform 0.15s ease, box-shado…“ |
Keine Bearbeitungszusammenfassung |
||
| (9 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
/* Kachel-Raster */ | |||
.wiki-kacheln { | |||
display: grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 20px; | |||
margin: 25px 0; | |||
} | |||
/* Einzelne Kachel */ | |||
.wiki-kachel { | .wiki-kachel { | ||
display: block; | display: block; | ||
| Zeile 5: | Zeile 14: | ||
} | } | ||
/* Kachel-Link */ | |||
.wiki-kachel-link { | .wiki-kachel-link { | ||
box-sizing: border-box; | box-sizing: border-box; | ||
| Zeile 28: | Zeile 38: | ||
} | } | ||
/* Hover-Effekt */ | |||
.wiki-kachel-link:hover { | .wiki-kachel-link:hover { | ||
transform: translateY(-4px); | transform: translateY(-4px); | ||
| Zeile 35: | Zeile 46: | ||
} | } | ||
/* Icon */ | |||
.wiki-kachel-icon { | .wiki-kachel-icon { | ||
font-size: 45px; | font-size: 45px; | ||
| Zeile 41: | Zeile 53: | ||
} | } | ||
/* Titel */ | |||
.wiki-kachel-title { | .wiki-kachel-title { | ||
font-size: 20px; | font-size: 20px; | ||
font-weight: bold; | font-weight: bold; | ||
text-align: center; | text-align: center; | ||
} | |||
/* Tablet */ | |||
@media (max-width: 800px) { | |||
.wiki-kacheln { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
} | |||
} | |||
/* Handy */ | |||
@media (max-width: 500px) { | |||
.wiki-kacheln { | |||
grid-template-columns: 1fr; | |||
} | |||
} | |||
.artikel-des-tages { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
min-height: 160px; | |||
padding: 20px; | |||
box-sizing: border-box; | |||
text-align: center; | |||
} | |||
.artikel-des-tages-icon { | |||
font-size: 40px; | |||
line-height: 1; | |||
margin-bottom: 10px; | |||
} | |||
.artikel-des-tages-label { | |||
font-size: 14px; | |||
color: #54595d; | |||
margin-bottom: 12px; | |||
} | |||
.artikel-des-tages-titel { | |||
font-size: 21px; | |||
font-weight: bold; | |||
} | |||
.artikel-des-tages-titel a { | |||
color: #36c; | |||
text-decoration: none; | |||
} | |||
.artikel-des-tages-titel a:hover { | |||
text-decoration: underline; | |||
} | } | ||