Plans stylesheet preview tool

This repo contains all the standard GrinnellPlans stylesheets, and a tool to quickly compare their behavior across interfaces.

Quickstart

Generate preview files:

1. In this directory, run python preview.py (or make previews)
2. Previews are created in the previews subfolder, grouped by stylesheet.

Generate screenshots:

1. Install PhantomJS. brew install phantomjs did it for me on a Mac, using Homebrew.
2. In this directory, run phantomjs screenshots.js (or make screenshots).
3. Screenshots are created in the screenshots subfolder, grouped by stylesheet.

Generate overview page (optional):

1. Install Jinja: pip install jinja2.
2. In this directory, run python templater.py > index.html (or make page)

Your Mission

Should you choose to accept it, your mission is to descend into html/styles and edit the older stylesheets (default, oldstyle, jolly, blue, terminal, parchment) such that the postmodern interface resembles the modern interface, without changing the original appearance under modern.

Here's my workflow:

1. Do the quickstart.

2. Choose a stylesheet to work on (say terminal). Save copies of the unmodified modern interface screenshots, to keep tabs on regression:

   cd screenshots/terminal
   for file in *.modern.html.png ; do mv $file `echo $file | sed 's/\(.*\.\)png/\1orig.png/'` ; done
   

3. In sheets.json, delete lines related to sheets I'm not working on, and run make screenshots again.

4. Open some pages from previews/terminal in my web browser, and start editing css files in html/styles so they look right.

5. Habitually invoke make screenshots, using an image comparison program to keep tabs on the difference between foo.modern.html.orig.png, foo.modern.html.png, and foo.postmodern.html.png.