Blog redesign part 2: olvashatóság

Az előző verzió talán legidegesítőbb jellemzője a pocsék olvashatóság volt. Teljes kijelző szélességet kitöltő sorok, megkülönböztethetetlen címsorok. Ennek most vége.

Vallomás

Bevallom, már két ünnep között orvosolni akartam ezt a problémát. Az viszont világossá vált számomra, hogy anélkül nem tudok mit csinálni, hogy előtte ne tanulnék egy kicsit a PostCSS-ről.

Az van, hogy a Ghost a {{content}} helpert egyben cseréli ki az adott post tartalmára (kivéve cím és kivonat). Emiatt nem tudtam a Tailwind classokat egyszerűen a HTML elemekhez rendelni. Mivel a Tailwind CSS első sora a Normalized CSS-sel kezdődik, ami nulláz minden alap böngésző formázást (ezzel egy közös alapot adva), minden H2 címsor, idézet és bekezdés ugyanúgy nézett ki és még margin sem volt közöttük. Konkrétan olyan csúnya volt, hogy mikor megírtam a 2020-as visszatekintő cikket, a barátnőmön kívül nem mertem megosztani senkivel.

Ma 2021 január 9, szombat van. Ezt a napot arra szántam, hogy kezdjek valamit ezzel a problémával.

PostCSS és Tailwind

Azt vettem észre, hogy legjobban fejlesztői témában videókból tudok tanulni. Szerencsére meg is találtam Adam Wathan, a Tailwind CSS keretrendszer egyik alkotójának YouTube videóját amiben pont azt mutatja be, milyen egyszerű elkezdeni a barátkozást a PostCSS-Tailwind párossal.

Na most ha valamit megtanultam a PHP-Pistike múltamból az az, hogy a fejlesztői környezetek beüzemelése és karbantartása nem triviális. Az utolsó karakterig úgy csináltam mindent ahogy a videóban Adam, mégis error hegyeket kaptam a terminálban az npm run build parancsra. Órákat túrtam a Google-t, remélve más is belefutott már ebbe, de megoldást nem találtam. Végül véletlen az oldotta meg a problémát, hogy a Tailwind oldalán feltűnt, hogy a videóban látottól eltérő a tartalma a postcss.config.js-nek. Kicseréltem, működik.

Lényeg: ahelyett, hogy CDN-ről húznám be az előre buildelt CSS-t, most már magam tudom fordítani a saját igényemre szabva.

Ezek változtak

Oldalszélesség

Ahelyett, hogy minden szöveg és kép olyan széles lenne, amilyet a kijelző megenged, most a <body> max-w-screen-md-vel 768px szélességre van korlátozva. Hogy ne legyen minden bal oldalra csúszva, mx-auto-val középre van igazítva az oldal. px-4 ad 1rem-nyi padding-ot két oldalra, ez főleg mobilon néz ki jól.

H2 címsorok

Sok tennivaló itt nem volt. Szövegméretet növeltem és félkövérré tettem.

Bekezdések

Szeretem, ha kényelmesen olvasható a szöveg, így itt is megnöveltem kicsit a betűméretet, illetve a H2-köz hasonlóan kapott 1rem-nyi margint felülre, hogy a bekezdések távolabb kerüljenek egymáshoz.

Ami még hátra van

Azt gondolom, ez volt a minimum, amit meg kellett tennem, hogy emberi fogyasztásra alkalmas legyen az oldal.

Nem foglalkoztam még a linkek megjelenésével, ahogy az idézetek és a képek formázásával sem. Ahogy ezek is sorra kerülnek majd, úgy frissítem majd ezt a cikket.