Midle

Gride-area

Základní rozložení je na 6 'column' 1/6=16.6%

U gride-area je výška sloupce daná nejvyšším sloupcem v daném řádku

V našem případě máme v prvním řádku 'hamburger', 'Header' a 'LogoR'

Výška se řídí dle 'Header'

U 'gride-area' je lepší vyhnout se určování 'margin' někdy dochází k chybičkám ve výpočtu

Lze použít centrální 'gap:' nebo 'grid-column-gap:'

Hamburger

Nabídkové menu 'Hamburger' se v základním zobrazení nemusí ukazovat může se nabízet třeba až při rozlišení 800px a nižší

Přesto je lepší jej pro vyšší rozlišení deklarovat a nechat prázdné

Případná deklarace pole v nižším rozlišení je však možná

Middle

Middle tag odstavce '.middle p' je nastaveno na max 68em. Zlepšuje se tím čitelnost dlouhých řádků, které by mohly utahat očíčka moje věrná. JInak by bylo možné říci, že je to dlouhý text a oči musí jezdit na velkém monitoru od leva doprava. Je ovšem třeba kontrolovat dělení slov, které může nechávat osamocené strašáky, bubáky atd.

V middle používám odsazení odstavců

    .middle p { text-indent:  0.5em;letter-spacing: 0.10em; }
    .middle p:first-line {text-indent:  1.25em;   }/* ------------------prvni linka v odstavci -----------------------------------------*/
    .middle p:first-letter {font-size: 1.25em;} /* ------------------------prvni pismeno v odstavci-------------------- */ 
    

Left

v navigaci používám tag 'nav' a tag 'a' formátuji jako 'display:block' . Nepoužívám zavedené užívání tagů 'ul' 'li'

PNG s průhledným pozadím

u PNG s průhledným pozadím můžeme udělat stít mimo box