Έχουμε ένα κομμάτι mockup του Photoshop για να δουλέψουμε από εδώ καθώς συνεχίζουμε να δημιουργούμε το πρότυπο για τη μεμονωμένη σελίδα συλλογής.
Πρώτα επάνω, διαμορφώσαμε τους επόμενους και τους προηγούμενους συνδέσμους. Βρίσκονται σε απολύτως τοποθετημένο πλαίσιο στη γραμμή συλλογής, έτσι ώστε να μπορούμε να τα κεντράρουμε στη σελίδα παρά τα άλλα κουμπιά και τα πράγματα που υπάρχουν ήδη στη γραμμή. Παίρνουν την ίδια τάξη με το κουμπί Submit One, οπότε υπάρχει σταθερότητα εκεί.
Στη συνέχεια έχουμε αυτήν την πολύ λεπτή αριστερή στήλη για να λάβουμε κείμενο. Ξεκινάμε με ένα πλέγμα 1/8 7/8, αλλά το 1/8 είναι λίγο πολύ λεπτό. Το αλλάζουμε σε 1/4 3/4 αλλά αυτό είναι πάρα πολύ. Όπως και το μυθικό μωρό αρκούδα, το 1/6 5/6 ήταν σωστό.
Κάνουμε κάποια εργασία τυπογραφίας σε αυτήν τη στενή στήλη, προσθέτοντας στον τίτλο (σε ένα
φυσικά, καθώς είναι ο πιο σημαντικός τίτλος της σελίδας), η περιγραφή και άλλες ενότητες. Το μεγαλύτερο μέρος της τυπογραφίας είναι ακριβώς στη θέση του με βάση την απλή και ανθεκτική ρύθμιση της τυπογραφίας μας.
Το πλέγμα 5/6 είναι όλο για την εικόνα. Ωραίο και μεγάλο, το οποίο είναι υπέροχο. Έχει ανοιχτό γκρι φόντο, όπως ακριβώς και οι εικόνες στις αναρτήσεις ιστολογίου (π.χ.
Σκεφτόμαστε να πάρουμε λίγο φανταχτερό με το πώς διαμορφώνουμε τις ετικέτες. Κοιτάζουμε γύρω στο CodePen (εδώ είναι ένας σύνδεσμος για την ετικέτα "tags", META ALERT). Καταλήγουμε να πιστεύουμε ότι είναι υπερβολικό και τους αφήνουμε ως κανονικούς συνδέσμους.
Κάνουμε το κουμπί "πλήρους μεγέθους" να λειτουργεί με έναν από τους απλούστερους τρόπους που μπορούμε, ανοίγοντας ένα νέο παράθυρο που είναι οι διαστάσεις της εικόνας πλήρους μεγέθους και δείχνοντας την εικόνα σε αυτό. Είναι σαν ένα τροπικό κουτί από τις αρχές της δεκαετίας του 2000! Μα μου αρέσει. Είναι απλό, δεν χρειάζεται μια δέσμη κώδικα (όπως θα έκανε ένα lightbox) και είναι προφανές να αλληλεπιδράσεις. Είναι ακόμα καλύτερο, αν με ρωτήσετε.