v .hamburger - text zarovnáme doleva, nastavíme šířku na 600px, nastavíme výplně: 0 vpravo, 5px vpravo a 30px vlevo
header img – zmenšit na 40px
header nav:
- barva pozadí bílé,
- zrušit orámování (border-width),
- absolutní pozicování (position: absolute),
- šířka 93% (můžeme upravit),
- výška automaticky podle obsahu (hodnota auto),
- pozice 60px zhora, zleva -200px (menu „skryjeme“),
- přechod o trvání 0,5s (transition)
nav ul – zobrazení v bloku
nav ul li – šířka automaticky podle obsahu (hodnota auto)
nav ul li a – zrušit orámování
hamburger – zobrazení v bloku, nastavit výplně (vpravo 30px, 10px nahoře)
#nav_check:checked - prvek, který má id="nav_check" je „zaškrtnutý“: #nav_check:checked ~ nav – pozice zleva (3,5%)
zobrazení do šířky 600px - @media screen and (width <= 600px)
- změnit způsob zobrazení gridu ze dvou sloupců do jednoho v tomto pořadí – logo, obsah, aside, pata,
- šířka sloupce – 1fr, výška řádků: 50px, auto, 100px, 30px,
- header > div – nastavit šířku na 400px
- vše ostatní jako v předchozím bodě
Dodatek 1 - odkazy v menu „vyjíždějící“ podbarvení odkazu
- pozadí – přechod z rgba(206, 0, 88, 0.2) na rgba(206,0,88, 0.5) (linear-gradient u background-image)
- pozice obrázku na pozadí – vlevo dole (background-position)
- obrázek se nebude opakovat (background-repeat)
- velikost viditelného pozadí – plná šířka, poloviční výška (backgground-size)
- zrušit podtržení (text-decoration)
- přechod (transition) – čas 1s, vlastnost background-size
- při najetí – změna velikosti viditelného pozadí na 100% šířky i výšky
Dodatek 2 - „vyjíždějící“ podtržení u odkazů na stránce
- pozadí – přechod z rgb(206,0,88) na rgb(206,0,88)
- pozice obrázku na pozadí – vlevo dole
- obrázek se nebude opakovat
- velikost viditelného pozadí – 0 šířka, 1px výška (backgground-size)
- zrušit podtržení (text-decoration)
- přechod (transition) – čas 1s, vlastnost background-size
- při najetí – změna velikosti viditelného pozadí na 100% šířky, 1px výška
