Vorlage:Diamant- und Perl-Clan/style.css
Zur Navigation springen
Zur Suche springen
.diamant-perl-clan {
display: grid;
grid-template-columns: 100px 1fr 1fr;
background: #FFAAAA;
border: 2px solid #9C9C9C;
border-radius: 0.5em;
padding: 2px;
gap: 2px;
text-align: center;
margin-top: 1em;
}
.diamant-perl-clan a:not(.new), .diamant-perl-clan a:not(.new):visited {
color: #000000;
}
.diamant-perl-clan div:first-child {
grid-column-end: span 3;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.5em;
font-weight: bold;
font-size: large;
padding: 8px;
background: #009ACD;
}
.diamant-perl-clan div:nth-child(3n-1) {
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.5em;
background: #009ACD;
font-weight: bold;
padding: 4px;
}
.diamant-perl-clan div:nth-child(3n), .diamant-perl-clan div:nth-child(3n+1):not(:first-child) {
display: flex;
flex-wrap: wrap;
gap: 2px;
}
.diamant-perl-clan div:nth-child(3n) > span, .diamant-perl-clan div:nth-child(3n+1):not(:first-child) > span {
display: flex;
justify-content: center;
align-items: center;
background: #FFFFFF;
border-radius: 0.5em;
padding: 4px;
gap: 5px;
flex-grow: 1;
flex-basis: 130px;
height: 50px; /*Ist drin, damit alle Elemente gleich hoch sind. Bei kleineren Displaybreiten brechen die Elemente um und sind nicht gleich groß, weil sie in zwei getrennten div-Containern sind, d. h. es gibt unweigerlich eine schiefe Darstellung ohne feste Höhe.*/
}
/*@media only screen and (max-width: 600px) {
.diamant-perl-clan {
grid-template-columns: repeat(2, 1fr);
}
.diamant-perl-clan div:first-child {
grid-column-end: span 2;
}
.diamant-perl-clan div:nth-child(3n-1) {
grid-column-end: span 2;
}
}*/
/* [[Kategorie:Vorlage:Non-Wikitext]] */