Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
Created page with "TOC PAGE DIV: ------------: .toc-page #toc, .toc-page .toc { float: right; width: 26%; max-width: 320px; min-width: 220px; margin: 0 0 16px 24px; clear: right; font-size: 0.95em; box-sizing: border-box; } .toc-page h2, .toc-page h3, .toc-page h4 { clear: none; } .toc-page > h2:first-of-type, .toc-page > .mw-heading2:first-of-type { width: calc(74% - 24px); } @media (max-width: 700px) { .toc-page #toc, .toc-page .toc { float: none; width: auto..."
 
No edit summary
Line 41: Line 41:




/* RULES GRID RULES */
/* SHARED GRID RULES */
/* ---------------- */
/* ----------------- */
.rules-grid {
.grid-item {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
width: 100%;
text-align: center;
align-items: start;
}
 
.rules-grid-item {
width: 100%;
width: 100%;
display: flex;
display: flex;
Line 59: Line 50:
}
}


.rules-grid-title {
.grid-title {
font-variant: small-caps;
font-variant: small-caps;
font-weight: bold;
font-weight: bold;
font-size: 28px;
line-height: 1.1;
line-height: 1.1;
margin: 0 0 8px 0;
text-align: center;
text-align: center;
}
}


.rules-grid-item img {
.grid-item img {
display: block;
display: block;
width: 100%;
width: 100%;
Line 75: Line 64:
}
}


.rules-grid-text {
.grid-text {
margin-top: 8px;
margin-top: 8px;
}
@media (max-width: 700px) {
.rules-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rules-grid-title {
font-size: 24px;
}
}
}




/* MAIN GRID RULES */
/* GRID FOUR */
/* --------------- */
/* --------- */
.main-grid {
.grid-four {
display: grid;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(4, minmax(0, 1fr));
Line 101: Line 80:
}
}


.main-grid-item {
.grid-four .grid-title {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
 
.main-grid-title {
font-variant: small-caps;
font-weight: bold;
font-size: 32px;
font-size: 32px;
line-height: 1.1;
margin: 0;
margin: 0;
padding: 0 0 4px 0;
padding: 0 0 4px 0;
Line 119: Line 88:
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
overflow: hidden;
}
}


.main-grid-item img {
.grid-four .grid-item img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
border: 1px solid #777;
border: 1px solid #777;
}
.main-grid-text {
margin-top: 8px;
}
@media (max-width: 1100px) {
.main-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
}


@media (max-width: 700px) {
@media (max-width: 700px) {
.main-grid {
.grid-four {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}


.main-grid-title {
.grid-four .grid-title {
height: 88px;
height: 88px;
font-size: 28px;
font-size: 28px;
Line 154: Line 108:




/* VALENDOR GRID RULES */
/* GRID THREE */
/* ------------------- */
/* ---------- */
.val-capital {
.grid-three {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
width: 100%;
width: 100%;
margin: 0 0 32px 0;
text-align: center;
padding-top: 24px;
align-items: start;
padding-bottom: 24px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
}


.val-capital-title {
.grid-three .grid-title {
font-variant: small-caps;
font-size: 28px;
font-weight: bold;
margin: 0 0 8px 0;
font-size: 36px;
line-height: 1.1;
text-align: center;
margin: 0 0 16px 0;
}
}


.val-capital-row {
@media (max-width: 700px) {
display: grid;
.grid-three {
grid-template-columns: 260px 1fr;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
align-items: start;
 
.grid-three .grid-title {
font-size: 24px;
}
}
}


.val-duchy-grid {
 
/* GRID TWO FEATURE */
/* ---------------- */
.grid-two-feature {
display: grid;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
Line 188: Line 144:
}
}


.val-duchy-item {
.grid-two-feature-item {
width: 100%;
width: 100%;
}
}


.val-duchy-title {
.grid-two-feature-title {
font-variant: small-caps;
font-variant: small-caps;
font-weight: bold;
font-weight: bold;
Line 201: Line 157:
}
}


.val-duchy-row {
.grid-two-feature-row {
display: grid;
display: grid;
grid-template-columns: 140px 1fr;
grid-template-columns: 140px 1fr;
Line 208: Line 164:
}
}


.val-capital-image img,
.grid-two-feature-image img {
.val-duchy-image img {
display: block;
display: block;
width: 100%;
width: 100%;
Line 217: Line 172:
}
}


.val-capital-text,
.grid-two-feature-text {
.val-duchy-text {
text-align: left;
text-align: left;
}
}


@media (max-width: 700px) {
@media (max-width: 700px) {
.val-capital-row,
.grid-two-feature {
.val-duchy-row {
grid-template-columns: 1fr;
grid-template-columns: 1fr;
}
}


.val-duchy-grid {
.grid-two-feature-row {
grid-template-columns: 1fr;
grid-template-columns: 1fr;
}
}


.val-capital-text,
.grid-two-feature-text {
.val-duchy-text {
text-align: center;
text-align: center;
}
}


.val-capital-title {
.grid-two-feature-title {
font-size: 30px;
font-size: 26px;
}
}
 
 
/* GRID ONE */
/* -------- */
.grid-one {
width: 100%;
margin: 0 0 32px 0;
padding-top: 24px;
padding-bottom: 24px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
 
.grid-one-title {
font-variant: small-caps;
font-weight: bold;
font-size: 36px;
line-height: 1.1;
text-align: center;
margin: 0 0 16px 0;
}
 
.grid-one-row {
display: grid;
grid-template-columns: 260px 1fr;
gap: 20px;
align-items: start;
}
 
.grid-one-image img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
border: 1px solid #777;
}
 
.grid-one-text {
text-align: left;
}
 
@media (max-width: 700px) {
.grid-one-row {
grid-template-columns: 1fr;
}
 
.grid-one-text {
text-align: center;
}
}


.val-duchy-title {
.grid-one-title {
font-size: 26px;
font-size: 30px;
}
}
}
}