oracc/esp2 — pull request #1 by rhorry (2013-06-18 17:27:51+00:00)
Title: Responsive design CSS

I think the responsive layout I've been playing with in this branch is now workable. There are still a few issues and things yet to do, which I've documented below. Some of the parameters were chosen by trial and error so aren't completely transparent(!) Let me know if anything doesn't make sense though...

CHANGES MADE IN RESPONSIVE LAYOUT WORKING COPY
RH 18.06.2013

Small viewport layout parameters

1 column format: margins in %s instead of ems. Apart from menu, as something goes horribly wrong with the Menu when the LH margin is changed, so I left it alone. (LH margin ??? content / images 95%; RH margin 5%)
Navigation breadcrumb set to no-display
increased height of header bar from 2.75em to 3.5em
Rm LH indent for lists

Large viewport layout parameters

2 column format: margins in %s instead of ems. Apart from menu, for same reason as above. RH margin 4%, content 74% Breakpoint set at 624px, the min width before 2 column format starts to break down and look unuseable.

Small tweaks made

Rm bold from header title
h1 is now no longer the same size as h2 (were both 1.4em; now h1 = 1.4em, h2 = 1.2em.

Not working yet and I'm stuck on...

Inline images now *always* take up 100% width (= bad!)
--Can they be made to take 'pc30' as a class, like floated images? i.e. we want images to take up 30% of the content space, aligned left. I'm stumped regarding how to do this. Steve, how did you make the floated images take this class? Just adding grid="30pc" to the tag doesn't work.

Still to do

Add new object bio pages to esp2. See how RD layout copes with linked large images, deeper nested pages etc.
Test RD layouts on a touchscreen device
Add a clean, simple style for bibliography lists (no bullets; more padding)
Responsive video (easy hack for straight HTML coded pages; not sure how ESP will handle it)
Responsive Twitter feed / Google Maps content
check and overhaul print CSS

Known issues

Image maps (for funders logos etc) don't work anymore in RD layout. Requires some serious Javascript to replace this functionality