jackiekircher/jackie_site — pull request #3 by jackiekircher (2014-09-11 23:51:36+00:00)
Title: Responsive design

I've gone with the "build it as small as possible then add extra rules for larger screens" method to add responsiveness to the site. Through experimentation and a few adjustments I determined that there were a few major points where the site 'broke' when I shrunk it down from 1024px+ to 320px. They were:

1. 720px, where the page and site navigation bars no longer felt distinct
2. 630px, where the sections nav needed to be centrally positioned so that it would sill be on page
3. 440px, where the site title no longer fits on one line and should be centered

As the site gets smaller I remove extraneous elements such as the right colored border and I allow the text to take up a wider percentage of the site. Past a certain point I also reduce the font size to make things more manageable on smaller screens.

There were also a couple of special points for the animations demo page where the floating figure started to overlap the text. This is a very specific example so these special rules are limited to just the projects stylesheet.

( This resolves #2 )