MediaWiki:Common.css: Difference between revisions
From Wizards & Warlords Wiki
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* GRID RULES */ | /* MAIN GRID RULES */ | ||
. | /* --------------- */ | ||
.main-grid { | |||
display: grid; | display: grid; | ||
grid-template-columns: repeat(4, minmax(0, 1fr)); | grid-template-columns: repeat(4, minmax(0, 1fr)); | ||
| Line 9: | Line 10: | ||
} | } | ||
. | .main-grid-item { | ||
width: 100%; | width: 100%; | ||
display: flex; | display: flex; | ||
| Line 16: | Line 17: | ||
} | } | ||
. | .main-grid-title { | ||
font-variant: small-caps; | font-variant: small-caps; | ||
font-weight: bold; | font-weight: bold; | ||
| Line 32: | Line 33: | ||
} | } | ||
. | .main-grid-item img { | ||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
| Line 39: | Line 40: | ||
} | } | ||
. | .main-grid-text { | ||
margin-top: 8px; | margin-top: 8px; | ||
} | } | ||
@media (max-width: 1100px) { | @media (max-width: 1100px) { | ||
. | .main-grid { | ||
grid-template-columns: repeat(3, minmax(0, 1fr)); | grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
} | } | ||
| Line 50: | Line 51: | ||
@media (max-width: 700px) { | @media (max-width: 700px) { | ||
. | .main-grid { | ||
grid-template-columns: repeat(2, minmax(0, 1fr)); | grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
} | } | ||
. | .main-grid-title { | ||
height: 88px; | height: 88px; | ||
font-size: 28px; | font-size: 28px; | ||
} | } | ||
} | |||
/* VALENDOR GRID RULES */ | |||
/* ------------------- */ | |||
.val-grid { | |||
display: grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 20px; | |||
width: 100%; | |||
text-align: center; | |||
align-items: start; | |||
} | |||
.val-grid-item { | |||
width: 100%; | |||
} | |||
.val-grid-item img { | |||
display: block; | |||
width: 100%; | |||
height: auto; | |||
margin: 0 auto; | |||
} | |||
.val-grid-title { | |||
font-variant: small-caps; | |||
font-weight: bold; | |||
font-size: 28px; | |||
line-height: 1.1; | |||
margin: 0 0 8px 0; | |||
text-align: center; | |||
} | |||
.val-grid-text { | |||
margin-top: 8px; | |||
} | } | ||
Revision as of 04:44, 19 March 2026
/* MAIN GRID RULES */
/* --------------- */
.main-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
width: 100%;
text-align: center;
align-items: start;
}
.main-grid-item {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.main-grid-title {
font-variant: small-caps;
font-weight: bold;
font-size: 32px;
line-height: 1.1;
margin: 0;
padding: 0 0 4px 0;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
overflow: hidden;
}
.main-grid-item img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.main-grid-text {
margin-top: 8px;
}
@media (max-width: 1100px) {
.main-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.main-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.main-grid-title {
height: 88px;
font-size: 28px;
}
}
/* VALENDOR GRID RULES */
/* ------------------- */
.val-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
width: 100%;
text-align: center;
align-items: start;
}
.val-grid-item {
width: 100%;
}
.val-grid-item img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.val-grid-title {
font-variant: small-caps;
font-weight: bold;
font-size: 28px;
line-height: 1.1;
margin: 0 0 8px 0;
text-align: center;
}
.val-grid-text {
margin-top: 8px;
}
