MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* TOC PAGE DIV */ | /* TOC PAGE DIV */ | ||
/* ------------ */ | /* ------------ */ | ||
| Line 141: | Line 139: | ||
.grid-item { | .grid-item { | ||
width: 100%; | width: 100%; | ||
min-width: 0; | |||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
| Line 160: | Line 159: | ||
text-align: left; | text-align: left; | ||
margin: 0 0 10px 0; | margin: 0 0 10px 0; | ||
overflow-wrap: break-word; | |||
word-break: normal; | |||
} | } | ||
| Line 171: | Line 172: | ||
line-height: 1.6; | line-height: 1.6; | ||
text-align: left; | text-align: left; | ||
overflow-wrap: break-word; | |||
word-break: normal; | |||
} | } | ||
/* GRID FOUR */ | /* GRID FOUR */ | ||
| Line 188: | Line 192: | ||
grid-template-rows: 110px auto 1fr; | grid-template-rows: 110px auto 1fr; | ||
align-items: start; | align-items: start; | ||
} | } | ||
.grid-four .grid-title { | .grid-four .grid-title { | ||
height: 110px; | height: 110px; | ||
display: flex; | display: flex; | ||
align-items: end; | align-items: end; | ||
font-size: 32px; | |||
font-size: | |||
} | } | ||
@media (max-width: | @media (max-width: 1450px) { | ||
.grid-four { | .grid-four { | ||
grid-template-columns: repeat(2, minmax(0, 1fr)); | grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
| Line 228: | Line 208: | ||
.grid-four .grid-item { | .grid-four .grid-item { | ||
grid-template-rows: | grid-template-rows: 96px auto 1fr; | ||
} | } | ||
.grid-four .grid-title { | .grid-four .grid-title { | ||
height: | height: 96px; | ||
font-size: 28px; | font-size: 28px; | ||
} | } | ||
} | } | ||
/* GRID THREE */ | /* GRID THREE */ | ||
| Line 249: | Line 230: | ||
.grid-three .grid-item { | .grid-three .grid-item { | ||
display: grid; | display: grid; | ||
grid-template-rows: | grid-template-rows: 96px auto 1fr; | ||
align-items: start; | align-items: start; | ||
} | } | ||
.grid-three .grid-title { | .grid-three .grid-title { | ||
height: | height: 96px; | ||
display: flex; | display: flex; | ||
align-items: end; | align-items: end; | ||
font-size: 30px; | |||
} | } | ||
@media (max-width: | .grid-three .grid-text { | ||
font-size: 1.1em; | |||
line-height: 1.6; | |||
} | |||
@media (max-width: 1200px) { | |||
.grid-three { | .grid-three { | ||
grid-template-columns: repeat(2, minmax(0, 1fr)); | grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
| Line 266: | Line 253: | ||
.grid-three .grid-item { | .grid-three .grid-item { | ||
grid-template-rows: | grid-template-rows: 88px auto 1fr; | ||
} | } | ||
.grid-three .grid-title { | .grid-three .grid-title { | ||
height: | height: 88px; | ||
font-size: | font-size: 27px; | ||
} | } | ||
} | } | ||
/* GRID TWO */ | /* GRID TWO */ | ||
| Line 282: | Line 270: | ||
gap: 28px; | gap: 28px; | ||
width: 100%; | width: 100%; | ||
align-items: start; | |||
} | } | ||
.grid-two-item { | .grid-two-item { | ||
width: 100%; | width: 100%; | ||
min-width: 0; | |||
display: grid; | |||
grid-template-rows: 90px auto; | |||
align-items: start; | |||
} | } | ||
.grid-two-title { | .grid-two-title { | ||
font-weight: bold; | font-weight: bold; | ||
font-size: | font-size: 32px; | ||
line-height: 1.1; | line-height: 1.1; | ||
text-align: left; | text-align: left; | ||
margin: 0 0 12px 0; | margin: 0 0 12px 0; | ||
height: 90px; | |||
display: flex; | |||
align-items: end; | |||
overflow-wrap: break-word; | |||
word-break: normal; | |||
} | } | ||
| Line 313: | Line 311: | ||
.grid-two-text { | .grid-two-text { | ||
text-align: left; | text-align: left; | ||
font-size: 1. | font-size: 1.08em; | ||
line-height: 1. | line-height: 1.6; | ||
overflow-wrap: break-word; | |||
word-break: normal; | |||
} | } | ||
@media (max-width: | @media (max-width: 1000px) { | ||
.grid-two { | .grid-two { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | |||
.grid-two-item { | |||
grid-template-rows: auto auto; | |||
} | |||
.grid-two-title { | |||
height: auto; | |||
font-size: 28px; | |||
} | } | ||
| Line 325: | Line 334: | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
} | |||
/* GRID ONE */ | /* GRID ONE */ | ||
| Line 344: | Line 349: | ||
.grid-one-title { | .grid-one-title { | ||
font-weight: bold; | font-weight: bold; | ||
font-size: | font-size: 36px; | ||
line-height: 1.1; | line-height: 1.1; | ||
text-align: left; | text-align: left; | ||
margin: 0 0 16px 0; | margin: 0 0 16px 0; | ||
overflow-wrap: break-word; | |||
word-break: normal; | |||
} | } | ||
| Line 369: | Line 376: | ||
font-size: 1.08em; | font-size: 1.08em; | ||
line-height: 1.6; | line-height: 1.6; | ||
overflow-wrap: break-word; | |||
word-break: normal; | |||
} | } | ||
@media (max-width: | @media (max-width: 1000px) { | ||
.grid-one-title { | |||
font-size: 30px; | |||
} | |||
.grid-one-row { | .grid-one-row { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
} | } | ||