recreate style.scss with a few @media breakpoints

I've tried to split up style.css so that all of the presentational
styles are global and all of the structural styles are grouped by screen
width.

I've identified three break points so far -
  * where the title splits from two lines to one
  * where the sections nav should stop being centered
  * where the left page nav can be positioned on the left

note: project styles still look awful at lower resolutions but that's
not a regression
clear up styles for page navigation for responsivity

I was doing all sorts of weird trick to offset for the list border with
negative margins and relative positions and at certain font sizes or
zoom levels it caused a double border to appear. I think I've solved that
now in addition to making the flow more responsive.

I did have to resort to javascript to hide the empty nav bar at lower
resolutions. Maybe I can figure out a way to do this in plain CSS by
changing my layout.
clean up responsive styles for headers

I'm hesitant to call the actuall CSS clean, but size headers (titles and
dates) are nice and visually consistent
cleanup the projects page at low widths

once again I didn't take small screen sizes into account with the
projects page, so certain elements collapsed in ugly ways.
clean up styles on animation page for low resolution

unfortunately because of the way the animations repo is styled resizing
the animation-container isn't possible without intercepting the loaded
in styles or custom placing them earlier in the CSS chain. this means
that the minimum width for this page to be useable is about 420px.
pull in update to animations for flexibility

the styles for structural elements has been pulled out into a separate
stylehseet which we don't have to load, which should save us a lot of
headache
bust out the tricks to make the animation responsive

this one was tough, as the end result isn't perfect, but I'm happy with
it for now. the animations box will shrink as needed to fit within the
viewport. since the animations themselves aren't larger than 180x180
they should fit on the smallest of screens. however, at really low
resolutions the animations start to become off-center within the
container.

I'm not supe thrilled about the animation names being /below/ the
animation container when the screen isn't wide enough to support them
side-by-side, but the container has the instructions and could be missed
entirely if it's below.
replace old styles entirely with new ones

I should have just replaced style.scss with style-news.scss from the
beginning but at this point rebasing all the changes would be a mess.
increase maximum scale to 2
Merge pull request #3 from jackiekircher/responsive-design

update stylesheets to be more responsive.