Vorlage:Spiele-Liste/style.css
Zur Navigation springen
Zur Suche springen
/* Klasse der Gesamtvorlage */
.spiele__list {
box-shadow: 1px 1px 2px #989898;
margin-top: 35px;
padding: 1px;
width: 90%;
background-color: #5C82AE;
border: 3px solid #B1CDEC;
display: grid;
grid-template-columns: repeat(5, 1fr) [listEnd]; /* Achtung: Ende der letzten Spalte benamt um per Name spanen zu können */
gap: 3px;
box-sizing: border-box;
border-radius: 5px;
padding: 3px;
text-align: center;
}
/* Klasse für die Vorlagenüberschrift */
.spiele__list .heading {
color: white;
font-size: 22px;
padding: 4px 0 4px 0;
text-align: center;
grid-column: 1 / listEnd; /* Überschrift über die gesamte Breite */
}
/* Klasse für jeden einzelnen Generationstoggler */
.spiele__list .genSelect {
height: 22.5px;
font-size: 115%;
background-color: white;
border: 3px solid #B1CDEC;
display: flex;
align-items: center;
justify-content: center;
}
/* Klasse für dir Liste der Spiele innerhalb einer Generation */
.spiele__list__gen {
grid-column: 1 / listEnd; /* Volle Breite */
display: grid;
grid-template-columns: 2fr repeat(6, 1fr); /* Achtung: Das Spiele-Grid ist 6 Bereiche breit, es werden aber maximal 3 Spiele pro Reihe angezeigt! */
gap: 2px;
margin-top: 5px;
padding: 5px;
}
/* Alle Spiele innerhalb der Liste (.main sind die "Überschriften") */
.spiele__list__gen div:not(.main) {
background-color: white;
border-radius: 5px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
}
/* Hilfsklassen, welche für die Überschriften genutzt werden können, sofern es mehr als drei Spiele einer Kategorie gibt */
.spiele__list__gen .twoRows {
grid-row: span 2;
}
.spiele__list__gen .threeRows {
grid-row: span 3;
}
.spiele__list__gen .fourRows {
grid-row: span 4;
}
.spiele__list__gen .fiveRows {
grid-row: span 5;
}
/* Definitionen für Spiele, je nachdem wie viele pro Zeile angezeigt werden. Default: 3 (6er Grid => span 2) */
.spiele__list__gen div {
grid-column: span 2;
}
/* Sofern die letzte Zeile aus 2 Spielen besteht */
.spiele__list__gen .twoColumns {
grid-column: span 3;
}
/* Oder nur aus einem */
.spiele__list__gen .oneColumn {
grid-column: span 6;
}
/* Definitionen für Überschriften. Achtung: Muss unter den Spiel-Definitionen stehen, da einige Attribute überschrieben werden */
.spiele__list__gen .main {
color: black;
background-color: #B1CDEC;
font-size: 125%;
padding: 4px 2px 4px 2px;
border-radius: 5px;
grid-column: 1 / span 1; /* Sicherstellen, dass Überschriften immer in der ersten Spalte stehen */
display: flex;
align-items: center;
justify-content: center;
}
/* Breakpoint 760px: Umbrechen der Generationstoggler auf zwei Reihen */
/*Achtung: Kommentare
@media only screen and (max-width: 760px) {
.spiele__list {
/* Benamung der letzten Spalte wie oben, dadurch keine Anpassung der spans nötig *
grid-template-columns: repeat(4, 1fr) [listEnd];
}
}*/
/* Breakpoint 480px: Wechsel auf fullWidth-Layout und Darstellung von Spielen in zwei Spalten, Überschriften oben */
/*Achtung: Kommentare
@media only screen and (max-width: 480px) {
.spiele__list {
width: 100%;
}
.spiele__list__gen {
/* Zwei Spalten für die Spiele-Liste als solche *
grid-template-columns: repeat(2, 1fr);
}
.spiele__list__gen .main {
/* Überschriften über die gesamte Breite *
grid-column: span 2;
}
/* Alles was im Desktop-Layout mehr als eine Zeile haben soll zurücksetzen auf eine Zeile *
.spiele__list__gen .twoRows, .spiele__list__gen .threeRows, .spiele__list__gen .fourRows {
grid-row: span 1;
}
/* Alle Spiele nur noch in einer Spalte *
.spiele__list__gen div:not(.main) {
grid-column: span 1;
}
}*/
/* [[Kategorie:Vorlage:Non-Wikitext]] */