Avem un pic de machetă Photoshop pentru a lucra de aici, în timp ce continuăm să construim șablonul pentru pagina individuală a galeriei.
În primul rând, am stilat linkurile Următorul și Anterior. Acestea se află într-o casetă absolut poziționată în bara galeriei, astfel încât să le putem centra pe pagină, în ciuda celorlalte butoane și lucruri care se află deja în bară. Aceștia iau aceeași clasă ca butonul Submit One, astfel încât există constanță acolo.
În continuare, avem această coloană stângă foarte subțire în care să obținem text. Începem cu o grilă 1/8 7/8, dar 1/8 este puțin prea subțire. Îl schimbăm în 1/4 3/4, dar asta este prea mult. Deci, la fel ca ursulețul fabulos, 1/6 5/6 a avut dreptate.
Facem o lucrare de tipografie în acea coloană îngustă, adăugând în titlu (într-un
etichetă, desigur, deoarece este cel mai important titlu de pe pagină), descrierea și alte secțiuni. Cea mai mare parte a tipografiei se încadrează doar în funcție de configurația noastră simplă și robustă de tipografie.
Grila 5/6 este destinată imaginii. Frumos și mare, ceea ce este minunat. Are un fundal gri deschis, la fel ca modul în care imaginile au în postările de pe blog (de ex
Ne gândim să devenim puțin fantezi cu modul în care stilăm etichetele. Ne uităm în jur la CodePen (aici este un link către eticheta „tag-uri”, META ALERT). Ajungem să credem că este excesiv și le lăsăm ca legături normale.
Facem ca butonul „full size” să funcționeze într-unul dintre cele mai simple moduri posibile, deschidem o fereastră nouă, care reprezintă dimensiunile imaginii full size și afișând imaginea din ea. Este ca o cutie modală de la începutul anilor 2000! Dar îmi place. Este simplu, nu are nevoie de o grămadă de coduri (așa cum ar fi o casetă lightbox) și este evident să interacționezi cu. Este și mai bine, dacă mă întrebi.