Imamo postavljeno osnovno zaglavlje galerije, ali nedostaju mali plavi ljudi koje je Erica stavila na originalnu ilustraciju. Unaprijed smo razgovarali o tome i zaključili da bi bilo prilično cool da ljudi, kad se promijeni veličina zaslona, ostanu na mjestu dok se zid galerije pomiče iza njih, pa izgleda nekako kao da s strahopoštovanjem pregledavaju galeriju.
Budući da su grafike ljudi čisto ornemantalne, korištenje oznaka za njih nije idealno. Srećom postoje dva i na svakom elementu ( ::before
i ::after
) dobivamo dva besplatna pseudo elementa . Koristimo ih za njihovo dodavanje.
U ovom videozapisu uvodimo koncept koji će i dalje biti koristan, koncept "reverso media queries". U ovom dizajnu uglavnom radimo na radnoj površini, tako da se naši medijski upiti uglavnom temelje na max-width
. Ali ako postavimo iste medijske upite na temelju min-width
, zaslon možemo ciljati samo kada je veći od određene veličine, a ne manji.
U ovoj okolnosti, grafika ljudi jednostavno ne stane na male ekrane. Stoga za njihovo učitavanje koristimo upit za reverso medije, na taj ćemo ih način učitati na velike zaslone na kojima rade, ali ne na male zaslone. To je bolje nego ih stalno učitavati i skrivati na malim ekranima.