/* ==========================================================================
desktop-extra.css — hodiny-online.cz
--------------------------------------------------------------------------
Upravy POUZE pro desktop (min-width: 768px).
Mobilni hlavicku resi header-extra.css — ta sem nepatri a naopak.
Nacitat AZ ZA style.css a header-extra.css:
Vsechna pravidla maji stejnou specificitu jako ta v sablone a vyhravaji
poradim v kaskade — proto na poradi zalezi a proto tu neni
ani jedno !important.
========================================================================== */
@media (min-width: 768px) {
:root {
/* --- puvodni hodnoty ze sablony (jen pro vypocet, nemenit) --- */
--dsk-nav-h-orig: 32px; /* #navigation { height: 32px } */
--dsk-header-top-h-orig: 98px; /* .header-top { height: 98px } */
/* --- co ladime --- */
--dsk-nav-h: 48px; /* vyska menu: 32 * 1,5 */
--dsk-nav-font: 21px; /* velikost textu: 14 * 1,5 */
/* --- dopocitane, nesahat --- */
--dsk-nav-grow: calc(var(--dsk-nav-h) - var(--dsk-nav-h-orig));
--dsk-nav-pad-y: calc((var(--dsk-nav-h) - var(--dsk-nav-font)) / 2);
--dsk-header-top-h: calc(var(--dsk-header-top-h-orig) - var(--dsk-nav-grow));
}
/* ======================================================================
1) VYSSI MENU + UMERNE VETSI TEXT
--------------------------------------------------------------------
Sablona: #navigation { height: 32px }
.navigation-in { font-size: 14px; line-height: 14px }
.navigation-in > ul > li > a { padding: 9px 20px }
Kontrola: 9 + 14 + 9 = 32 px, sedi.
Nove: 13,5 + 21 + 13,5 = 48 px.
--dsk-nav-pad-y se dopocita, takze pri zmene vysky nebo fontu
zustane text svisle na stredu sam od sebe.
====================================================================== */
#navigation {
height: var(--dsk-nav-h);
}
.navigation-in {
font-size: var(--dsk-nav-font);
line-height: var(--dsk-nav-font);
}
.navigation-in > ul > li > a {
padding-top: var(--dsk-nav-pad-y);
padding-bottom: var(--dsk-nav-pad-y);
}
/* ======================================================================
2) MEZERY MEZI LOGEM A BANNERY — kompenzace
--------------------------------------------------------------------
Mezi koncem menu a bannery neni zadna vertikalni vule:
.content-wrapper.container { padding-left: 0; padding-right: 0 }
.banners-row .banner-wrapper { margin-top: 0 } (od 768 px)
Kdyby se nekompenzovalo, bannery by se posunuly dolu o celych
16 px. Jedina vule je uvnitr .header-top, proto se o stejnou
hodnotu zkrati ta.
DUSLEDEK, ktery je potreba znat: logo je v .header-top svisle
na stredu (align-self: center), takze pri zkraceni o 16 px
vystoupa o 8 px a mezera pod nim se z 14 px zmensi na 6 px.
Bannery ale zustanou presne na miste.
Kdybyste radeji nechal hlavicku narust a bannery posunout dolu,
smazte toto jedno pravidlo.
====================================================================== */
.header-top {
height: var(--dsk-header-top-h);
}
/* ======================================================================
3) TEXT VE WELCOME BOXU NA CELOU SIRKU
--------------------------------------------------------------------
Sablona: .welcome .h1, .welcome div { max-width: 800px; margin: auto }
Pozn.: v header-extra.css uz je podobne pravidlo, ale je omezene na
:where(body.ums_homepage_cart_checkout_headings--on) a tuhle tridu
tohoto e-shopu NEMA — proto se nikdy neuplatnilo.
Zde je bez te podminky.
Text se roztahne na sirku .container, tedy 1178 px (od 1440 px
obrazovky 1418 px). To je stejna sirka, v jake je zbytek obsahu
stranky vcetne banneru.
====================================================================== */
.content-wrapper.homepage-box.welcome-wrapper .welcome .h1,
.content-wrapper.homepage-box.welcome-wrapper .welcome div {
max-width: none;
}
/* Kdybyste chtel text uplne od kraje k kraji okna (mimo .container),
odkomentujte. Na sirokem monitoru budou radky hodne dlouhe.
.content-wrapper.homepage-box.welcome-wrapper > .content-wrapper-in > .container {
width: 100%;
max-width: none;
}
*/
/* ======================================================================
4) POJISTKA PROTI PRETECENI MENU (768–1199 px)
--------------------------------------------------------------------
Pri fontu 21 px zaberou polozky
HODINY | HODINKY | INTERIEROVE DOPLNKY | SLEVY AZ -70% |
AKTUALITY A AKCE
zhruba 980 px. Do kontejneru 1178 px (od 1200 px vys) se vejdou,
ale do 972 px (992–1199 px) a 747 px (768–991 px) uz ne a Shoptet
by je presunul do rozbalovaciho "Vice".
Zmensenim vodorovneho odsazeni z 20 na 12 px se usetri 80 px.
Pokud vam presun do "Vice" nevadi, tuto sekci smazte.
====================================================================== */
@media (max-width: 1199px) {
.navigation-in > ul > li > a {
padding-left: 12px;
padding-right: 12px;
}
.navigation-in > ul > li > a:hover,
.navigation-in > ul > li.ext.exp > a {
padding-left: 13px;
padding-right: 13px;
}
.navigation-in > ul > li:first-child > a:hover,
.navigation-in > ul > li.ext.exp:first-child > a {
padding-left: 12px;
}
}
}