Vorlage:Spiele-Liste/style.css

/* 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]] */