Hauptseite: Unterschied zwischen den Versionen
Aus fauchen.ch
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 2: | Zeile 2: | ||
<head> | <head> | ||
<style> | <style> | ||
/* Abschnitt-Layout (untereinander) */ | |||
.section { | |||
padding: 20px; | padding: 20px; | ||
background: #f5f5f5; | background: #f5f5f5; | ||
} | } | ||
.section + .section { margin-top: 12px; } | |||
.section h3 { margin: 0 0 12px 0; } | |||
/* | /* 2-Spalten-Raster innerhalb jedes Abschnitts */ | ||
.cards { | |||
display: grid; | |||
grid-template-columns: repeat(2, 1fr); /* genau zwei Spalten */ | |||
gap: 12px; | |||
} | |||
/* Grundstil Karte */ | |||
.category-card { | .category-card { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
text-decoration: none; | |||
font-weight: bold; | |||
color: #333; | |||
/* Hintergrundbild-Grundlage */ | |||
background-position: center center; | background-position: center center; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-color: #fff; | background-color: #fff; | ||
/* Größe der Karte */ | |||
height: 200px; | height: 200px; /* sichtbare Höhe; bei Bedarf anpassen */ | ||
border-radius: 10px; | border-radius: 10px; | ||
box-shadow: 0 0 5px rgba(0,0,0,0.1); | box-shadow: 0 0 5px rgba(0,0,0,0.1); | ||
} | } | ||
/* | /* Für Kategorien: Bild füllt alles (kein Rand) */ | ||
.category-card | .category-card.cover-image { | ||
background-size: cover !important; | |||
} | |||
/* Für Anleitungen: Bild nimmt volle Höhe, Breite automatisch | |||
=> ggf. weiße Ränder links/rechts */ | |||
.category-card.contain-height { | |||
background-size: auto 100% !important; | |||
} | } | ||
/* | /* Mobil: je Abschnitt auf 1 Spalte umschalten */ | ||
@media (max-width: 800px) { | |||
.cards { grid-template-columns: 1fr; } | |||
} | } | ||
</style> | </style> | ||
| Zeile 43: | Zeile 56: | ||
<body> | <body> | ||
<!-- | <!-- SEKTION: KATEGORIEN --> | ||
<div class=" | <div class="section"> | ||
<h3>Kategorien</h3> | |||
< | <div class="cards"> | ||
<a class="category-card cover-image" | |||
href="/wiki/Kategorie:Arbeit" | |||
< | style="background-image:url('/wiki/Special:FilePath/Arbeit_cropped.jpg');"> | ||
<span>ARBEIT</span> | |||
</a> | |||
<a class="category-card cover-image" | |||
href="/wiki/Kategorie:Sonstiges" | |||
style="background-image:url('/wiki/Special:FilePath/Sonstiges_linkcard.jpg');"> | |||
<span>SONSTIGES</span> | |||
</a> | |||
</div> | |||
</div> | </div> | ||
<!-- | <!-- SEKTION: ANLEITUNGEN --> | ||
<div class=" | <div class="section"> | ||
<h3>Anleitungen</h3> | |||
< | <div class="cards"> | ||
<a class="category-card contain-height" | |||
href="/wiki/Anleitung: Seite erstellen" | |||
< | style="background-image:url('/wiki/Special:FilePath/Seiterstellen.png');"> | ||
<span>Seite erstellen</span> | |||
</a> | |||
<a class="category-card contain-height" | |||
href="/wiki/Anleitung: Seite bearbeiten" | |||
style="background-image:url('/wiki/Special:FilePath/Seitebearbeiten-2.png');"> | |||
<span>Seite bearbeiten</span> | |||
</a> | |||
</div> | |||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
