2206
редагувань
MediaWiki:Common.css: відмінності між версіями
hero як position:absolute у container-inner — повна ширина від лівого до правого краю контейнера, висота 500
Admin (обговорення | внесок) (hero 600px, TOC sidebar опущено нижче hero) |
Admin (обговорення | внесок) (hero як position:absolute у container-inner — повна ширина від лівого до правого краю контейнера, висота 500) |
||
| Рядок 244: | Рядок 244: | ||
Page hero — повноширинний блок з заголовком на сторінках країн | Page hero — повноширинний блок з заголовком на сторінках країн | ||
============================================================ | ============================================================ | ||
Hero рендериться як position:absolute всередині .mw-page-container-inner, | |||
щоб не залежати від grid-колонок (mainMenu / pageContent). | |||
.mw-page-container-inner отримує padding-top на висоту hero, щоб | |||
контент починався під ним. | |||
Поки | Поки сірий фон. Щоб поставити зображення — заміни значення | ||
--page-hero-bg на url(...) (можна на конкретну країну). | --page-hero-bg на url(...) (можна на конкретну країну). | ||
*/ | */ | ||
| Рядок 253: | Рядок 255: | ||
--page-hero-bg: #e8e8e8; | --page-hero-bg: #e8e8e8; | ||
--page-hero-fg: #1a2240; | --page-hero-fg: #1a2240; | ||
--page-hero-height: 500px; | |||
} | } | ||
body:is(.page-🇷🇴_Румунія) .mw- | body:is(.page-🇷🇴_Румунія) .mw-page-container-inner { | ||
position: relative; | |||
padding-top: calc(var(--page-hero-height) + 24px); | |||
} | } | ||
body:is(.page-🇷🇴_Румунія) .vector-page-titlebar { | body:is(.page-🇷🇴_Румунія) .vector-page-titlebar { | ||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
width: auto; | |||
height: var(--page-hero-height); | |||
margin: 0; | |||
padding: 0 32px; | |||
background: var(--page-hero-bg); | background: var(--page-hero-bg); | ||
background-size: cover; | background-size: cover; | ||
background-position: center; | background-position: center; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
border-radius: 0; | border-radius: 0; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
z-index: 1; | |||
} | } | ||
| Рядок 297: | Рядок 295: | ||
} | } | ||
/* Mobile: | /* Mobile: коротший hero */ | ||
@media screen and (max-width: 720px) { | @media screen and (max-width: 720px) { | ||
body:is(.page-🇷🇴_Румунія) { | |||
--page-hero-height: 220px; | |||
} | |||
body:is(.page-🇷🇴_Румунія) .vector-page-titlebar { | body:is(.page-🇷🇴_Румунія) .vector-page-titlebar { | ||
padding: | padding: 0 16px; | ||
} | } | ||
body:is(.page-🇷🇴_Румунія) .vector-page-titlebar .firstHeading { | body:is(.page-🇷🇴_Румунія) .vector-page-titlebar .firstHeading { | ||
font-size: 28px; | font-size: 28px; | ||
} | } | ||
} | } | ||