In this screencast we largely deal with the orange “Photostar” the dominates the footer.
We make the star in a separate file in Photoshop, so we can make it the correct size the web needs, not what makes the most sense in the main Photoshop file. We make it bigger than it is on the web so than we can shrink it down and have it look super sharp on retina displays. Yep, perhaps a bandwidth concern in how it’s sending too much data to a lot of devices that don’t need it – but hey we’re already doing very good with how few images are used in this design it’s a net gain anyway and we can revisit how this is done at any time.
We finish up by applying some basic style to the link lists, floating half of them to the left and half of them to the right (with right text alignment).
Awesome as always Chris, just a suggestion regarding your image locations etc. Why not put the path in a variable and then you can swap it out when it goes live? ie
You could do this with all your file paths.
Compass actually has URL helpers just for this: http://compass-style.org/reference/compass/helpers/urls/
Fortunately I don’t reference a TON of images through CSS, it’s not too hard to manage manually. But I probably should switch to this.