Hauptseite: Unterschied zwischen den Versionen
Aus fauchen.ch
Keine Bearbeitungszusammenfassung |
|||
| Zeile 1: | Zeile 1: | ||
<html> | <html> | ||
<head> | <head> | ||
| Zeile 7: | Zeile 4: | ||
.category-grid { | .category-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | ||
gap: 20px; | gap: 20px; | ||
padding: 20px; | padding: 20px; | ||
| Zeile 13: | Zeile 10: | ||
} | } | ||
/* Grundlayout für alle Karten */ | |||
.category-card { | .category-card { | ||
display: flex; | display: flex; | ||
| Zeile 20: | Zeile 18: | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-color: #fff; | background-color: #fff; | ||
background-size: auto 100%; /* | background-size: auto 100%; /* Bildhöhe voll, ggf. weiße Ränder */ | ||
width: 100%; | width: 100%; | ||
height: 200px; | height: 200px; | ||
text-align: center; | text-align: center; | ||
border-radius: 10px; | border-radius: 10px; | ||
| Zeile 29: | Zeile 27: | ||
color: #333; | color: #333; | ||
text-decoration: none; | text-decoration: none; | ||
transition: transform 0.2s ease; | |||
} | |||
/* Optional: kleine Hover-Vergrößerung */ | |||
.category-card:hover { | |||
transform: scale(1.02); | |||
} | |||
/* Spezialklasse für Bilder, die den ganzen Bereich füllen sollen */ | |||
.cover-image { | |||
background-size: cover !important; /* füllt alles, evtl. Zuschnitt */ | |||
} | } | ||
</style> | </style> | ||
| Zeile 34: | Zeile 43: | ||
<body> | <body> | ||
<!-- ANLEITUNGEN --> | |||
<div class="category-grid"> | <div class="category-grid"> | ||
| Zeile 48: | Zeile 58: | ||
</div> | </div> | ||
< | <!-- KATEGORIEN --> | ||
< | <div class="category-grid"> | ||
<a class="category-card cover-image" href="/wiki/Kategorie:Arbeit" | |||
<a class="category-card" href="/wiki/Kategorie:Arbeit" | |||
style="background-image:url('/wiki/Special:FilePath/Arbeit_cropped.jpg');"> | style="background-image:url('/wiki/Special:FilePath/Arbeit_cropped.jpg');"> | ||
<span>ARBEIT</span> | <span>ARBEIT</span> | ||
</a> | </a> | ||
<a class="category-card" href="/wiki/Kategorie:Sonstiges" | <a class="category-card cover-image" href="/wiki/Kategorie:Sonstiges" | ||
style="background-image:url('/wiki/Special:FilePath/Sonstiges_linkcard.jpg');"> | style="background-image:url('/wiki/Special:FilePath/Sonstiges_linkcard.jpg');"> | ||
<span>SONSTIGES</span> | <span>SONSTIGES</span> | ||
</a> | </a> | ||
</div> | </div> | ||
</body> | |||
</html> | </html> | ||
