MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
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: | ||
/* | /* SHARED GRID RULES */ | ||
/* ---------------- */ | /* ----------------- */ | ||
. | .grid-item { | ||
width: 100%; | width: 100%; | ||
display: flex; | display: flex; | ||
| Line 59: | Line 50: | ||
} | } | ||
. | .grid-title { | ||
font-variant: small-caps; | font-variant: small-caps; | ||
font-weight: bold; | font-weight: bold; | ||
line-height: 1.1; | line-height: 1.1; | ||
text-align: center; | text-align: center; | ||
} | } | ||
. | .grid-item img { | ||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
| Line 75: | Line 64: | ||
} | } | ||
. | .grid-text { | ||
margin-top: 8px; | margin-top: 8px; | ||
} | } | ||
/* | /* GRID FOUR */ | ||
/* | /* --------- */ | ||
. | .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: | ||
} | } | ||
. | .grid-four .grid-title { | ||
. | |||
font-size: 32px; | font-size: 32px; | ||
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; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
. | .grid-four .grid-item img { | ||
border: 1px solid #777; | border: 1px solid #777; | ||
} | } | ||
@media (max-width: 700px) { | @media (max-width: 700px) { | ||
. | .grid-four { | ||
grid-template-columns: repeat(2, minmax(0, 1fr)); | grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
} | } | ||
. | .grid-four .grid-title { | ||
height: 88px; | height: 88px; | ||
font-size: 28px; | font-size: 28px; | ||
| Line 154: | Line 108: | ||
/* | /* GRID THREE */ | ||
/* | /* ---------- */ | ||
. | .grid-three { | ||
display: grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 20px; | |||
width: 100%; | width: 100%; | ||
text-align: center; | |||
align-items: start; | |||
} | } | ||
. | .grid-three .grid-title { | ||
font-size: 28px; | |||
margin: 0 0 8px 0; | |||
font-size: | |||
margin: 0 0 | |||
} | } | ||
@media (max-width: 700px) { | |||
.grid-three { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
} | |||
.grid-three .grid-title { | |||
font-size: 24px; | |||
} | |||
} | } | ||
. | |||
/* 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: | ||
} | } | ||
. | .grid-two-feature-item { | ||
width: 100%; | width: 100%; | ||
} | } | ||
. | .grid-two-feature-title { | ||
font-variant: small-caps; | font-variant: small-caps; | ||
font-weight: bold; | font-weight: bold; | ||
| Line 201: | Line 157: | ||
} | } | ||
. | .grid-two-feature-row { | ||
display: grid; | display: grid; | ||
grid-template-columns: 140px 1fr; | grid-template-columns: 140px 1fr; | ||
| Line 208: | Line 164: | ||
} | } | ||
. | .grid-two-feature-image img { | ||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
| Line 217: | Line 172: | ||
} | } | ||
. | .grid-two-feature-text { | ||
text-align: left; | text-align: left; | ||
} | } | ||
@media (max-width: 700px) { | @media (max-width: 700px) { | ||
. | .grid-two-feature { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
. | .grid-two-feature-row { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
. | .grid-two-feature-text { | ||
text-align: center; | text-align: center; | ||
} | } | ||
. | .grid-two-feature-title { | ||
font-size: | 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; | |||
} | } | ||
. | .grid-one-title { | ||
font-size: | font-size: 30px; | ||
} | } | ||
} | } | ||