h1 Vzorový článok môjho "WordPress-u"

H3 Prečo tento článok vznikol?

---krátke popísanie prečo, načo, o čom článok je---
V tomto článku sú komplet všetky ukažky predprogramovaných textových a obrázkových blokov, či samotných obrázkov. Aby som si to kedykoľvek mohol pozrieť a následne použiť. Kto by si to pamätal...

Táto deliaca čiara sa robí pomocou div-u: <div class="borderline"></div>. Ak ju chcem v dajakej (hlavnej) farbe, tak sa do CSS-ka, do :root-u pridá nastavenie pre premennú: "--line_color:xxx;", inak bude neutrálne šedá.

H3 Ak treba nadpisy v článkoch tak H3!

Hlavné H3 nadpisy sú vo farbe článku, menšie H4 nadpisy "čierne". H2 sa nepoužíva, bolo by pre sekcie...

Ak to vyhovuje (je potrebné), tak tu mám naštýlované aj "menu" (vpravo dolu). Ten blok sa dáva na koniec kódu, ideálne pred "footer". Je tam len #href odkaz na #returntohome element, takže menu pomocou "ul" + "li" a s potrebným ID... Farba textu je originál šedá ako text, ale občas je fajn v hlavnej farbe... To orámovanie "hamburgeru" ale nebudem mať, to je iba tu kvôli tomu že tu všetky obrázky majú orámovanie...

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam, ea magni exercitationem quis atque iusto, similique facere in consectetur debitis ad! Debitis pariatur dolor, magnam fugiat architecto expedita! Tempora, nulla.

H4 Ak treba menšie nadpisy v kapitolách.

Iné ako H3 a H4 NEPOUŽÍVAŤ! - nie sú nadefinované nateraz.
A nasleduje text... Každý kus bloku musí byť vždy obalený v p bloku! Ako je vidno p bloky majú medzi sebou už nastavené medzery.

p blok 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae commodi illo quas quae at nihil consectetur. Quas tenetur magnam impedit illo commodi, non excepturi, nulla quos consequatur soluta sed sequi.

Aj základná tabuľka je naštýlovaná... Šírka automaticky, ak je širšia tak sa zobrazuje s posuvníkom, tomuto sa pri lepších tabuľkách na mobile nevyhnem aj tak... Vždy obaliť do div-u s class "table_wrapper"! Môžem si pomocou nbsp prípadne br určiť čiastočne rozloženie obsahu.

p blok 2 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore quod tenetur, porro ad aperiam exercitationem laborum accusantium ipsam laudantium expedita nihil tempore sed ducimus beatae minima corrupti error velit neque!

Ak treba dajaký odkaz tak ten vždy je v hlavnej farbe "článku", ako aj pozadie po bokoch a hlavné nadpisy.

(A toto je text ktorý bude ako doplňujúcii občas {možno pod / nad obrázkom}, alebo k danej časti textu... class "small_block" Naštýlovaný je na śírku 90% a ako písmo 90% veľkosti a šikmé.)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, libero! Nemo exercitationem quos unde quaerat, sunt nostrum magnam, deserunt repellendus ratione molestiae quo harum temporibus qui, pariatur quisquam repudiandae maxime!

H3 nadpis na kontrolu pomerov

Nasleduje ukážka predprogramovaných blokov:
(A ako je taký "small_block" text v elemente span? Zdá s že v pohode...)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi rem atque culpa aut nam velit quaerat harum facere ad obcaecati commodi saepe tempora, iure mollitia, qui ullam ipsa nostrum quia.

H4 nadpis na kontrolu pomerov

Ak potrebujem obrázok s popisným textom tak div class flex_blok a v ňom img obrázok a tá textová časť musí byť iba jeden blok!!! Buď rovno jeden p, alebo viaceré p, ale v div-e. Je to naštýlované tak aby bol text na stred a celé to bolo širšie ako bežný text v článku. Hore aj dolu je automaticky tá deliaca čiara.

Štandardne tu môže byť iba jeden blok !!! Všetko musí byť v ňom!!! (kľudne ajviaceré p bloky)
Ak potrebujem hrubé písmo tak použijem "strong"
Obrázky majú class img_middle_l alebo img_middle_r podľa toho na ktorej strane ich potrebujem. A samozrejme buď je prvý obrázok a potom text, alebo naopak. Text je mierne "tenší"... Ak idú tieto bloky za sebou tak treba vypínať border-top...

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque dolor iure sit sint temporibus ut id hic porro repellat at?

Pomery obrázkov k textu môžem kľudne aj detailnejšie doladiť... Ak potrebujem širší, tak pridám k obrázku "style="min-width:60%" a bude širší v základe. Ak potrebujem naopak užší, menší obrázok, tak to celé naladím takto: "img class="img_small_l" style="min-width: 31%;" - teda classa malého obrázku (tá má inak width 31% a pod toto sa nedostanem!) + style s požadovaným parametrom, inak by to nezmenšilo... Občas sa mi to hodí takto upraviť...

Tu je test viacerých p blokov v tomto flex-bloku s obrázkami. Ak ich oba ešte obalím potom do div-u tak to prekvapivo funguje... Aj keď som s tým nerátal pri kódovaní...

A druhý blok p. Lepšie to vyzerá ak ten text má odstup. Dokázal by som to aj pomocou span elementov s vlastným CSS nastavením spraviť (v jednom p bloku), ale toto je jednoduchšie na kódovanie...

Obrázok tu je menší, pomocou small_r.

-p class last_info- zabezpečí takýto textový blok... - Len iná farba... Môžem ju prípadne nastaviť aby pasovala k hlavnej farbe článku...
Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.

Nie je problém použiť ul či ol zoznam, základný dizajn je ošetrený...:

• položka
• položka

Alebo ol zoznam:

1. položka
2. položka

Obrázky majú mnohé nastavenia. Ti malé sú vždy v "p" bloku spolu s textom podľa potreby... Okraj majú iba tu, pre zvýraznenie, inak sú bez okrajov. Každý sa hodí inokedy:
(ak treba, tak obalit do clearfixu... Stačí dať tomu p bloku class = "clearfix", alebo dva obrázky do divu s týmto class)

• .img_small_l – malý obrázok (náhľad, logo) vľavo
• .img_small_r - malý obrázok vpravo - práve ten je tu použitý
  (pre lepší dizajnový efekt na mobiloch sa môžu dať na začiatok aj na koniec bloku a pridať class img_replace1 a img_replace2. sú to obrázky pre bloky kde text je dôležitejší ako obrázok, preto je vhodné aby bol obrázok buď vpravo, alebo (na mobile a celej šírke) na konci textu)
• .img_middle_l – väčší náhľadový obrázok vľavo
• .img_middle_r – väčší náhľadový obrázok vpravo
  Nie je to to isté ako img half ! Pri img half sa ráta že sú tesne vedľa seba dva obrázky... A aj iné medzery keďže sú bez textu... Pre middle_r ide použiť tiež efekt "replace" ak to vyhovuje.
• .img_half_l a -img_half_r – "polovičné obrázky" – idú dva vedľa seba
• .img_fullwidth – veľké obrázky na celú šírku stránky
• .img_compare_l a .img_compare_r – porovnávacie dva obrázky, ale idú použiť aj ako väčšie náhľadové ak sa to hodí - sú na 70% stránky - tu treba ich obaliť do clear-fix-u !! ,respektíve po nich dať tento kód: <div class="clearfix"></div>
• .img_center_small - malý obrázok na stred (1/3)
• .img_center_half - väčší obrázok na stred (1/2)
• .img_origin_left - obrázok sa zobrazí na kraji (ako blok, takže samostatne!) a má špecifickú vlastnosť - veľkosť bude mať maximálne 100% svojej veľkosti - používam to na zobrazenia rôznych screenschotov (skôr výrezov z obrazovky), kde potrebujem originál veľkosť pokiaľ to ide
• .img_origin_center - ako left - originál veľkosť, ale na stred...

img_center_small

img_center_half

img_half_l + img_half_r

img_compare_l + img_compare_r

Porovnávacie obrázky môžu byť aj naopak - najskôr pravý... Podľa toho ako to lepšie vyzneje.