Rewrite templates and base.css

[nttaylor]

After working with the project templates and stylesheets today there are a few changes I would like to make to the way the pages are constructed.

1. The templates for the two main pages - "index.jade" and "thankyou.jade" - duplicate many lines of code. This duplicated code could and should be relocated to the file "layout.jade", which is already extended by "index" and "thankyou".
2. The majority of the stylesheet "base.css" consists of style definitions that are not used on any page. I would like to eliminate these definitions for the sake of present and future ease of use. @trystant has given me his blessing to do this.
3. The under-the-hood html resulting from "index.jade" is more complicated (in terms of nested and cumulative styles) than is needed for a two-column layout, making development and maintenance - especially for different screen sizes - correspondingly difficult. I would like to simplify this portion of the template, using fewer total elements and style definitions, to yield something more easily manageable.

@kfogel @cecilia-donnelly

[trystant]

That's the direction I was heading in. This is code I initially retrieved from the Red Cross site for a first phase UI. This all makes good sense to me @nttaylor.

[kfogel]

I'm going to use this ticket as a de facto mailing list thread :­-), and just loop in @cecilia-donnelly manually here by mentioning her nick.

+1 to all of the above. We'd like to give the client a new demo this Friday. That means that during the day on Thursday (in my time zone), I'd like to make sure I can get a demo server set up -- James and I will take care of procuring the server and getting it into DNS and such, but Mark, can you make sure that INSTALL.md is up-to-date for a Debian 'testing' distro system? I'll just follow whatever instructions are in that file for setting it up.

I'm sure Cecilia has already gone over what look-and-feel changes the client requested. I'll enumerate from my notes here, but this probably overlaps with what Cecilia said anyway:

1. Background image should be black-and-white and fill the whole screen. It's ideal if it's somehow about someone installing a smoke alarm, though that's not strictly required. Red Cross is going to get us some photos, but in the meantime, there are some you can use at https://www.usfa.fema.gov/prevention/working_with_the_media/digital_assets/photos/smokealarms/index.html (and a collage is okay, I think, since this will be faded / b-&-w / in the background anyway.
2. Goal is for the whole site to fit on one screen, with no need to scroll down. I realize that "screen" is not a thing, but imagine a browser on a decent-sized tablet or something. Client understands that on a really small mobile screen, like a phone or a small tablet, the right/left arrangement described below will reflow to become a vertical arrangement and will inevitably require some scrolling.
3. On the left side should be a rectangular blurb of text explaining what about the smoke alarm installation campaign that this site is part of. (Above that, in phase 2, will be the language switcher: a horizontal row of links for Spanish, Chinese, Vietnamese, etc.) Again, this overlays the background image. Go ahead and make up some plausible text; that's easy to change later.
4. On the right side would be the entry form. You already have the fields. The required fields are Name, Zip (but see below), and either Phone or Email.
5. Name should be one field. Address too should be one field; we'll parse it to figure out what we need. (We haven't figured out what to do about the redundancy between an zip code entered as part of the Address field, and a zip code entered independently on the Zip Code field. The reason zip code is so important is because that's what we dispatch based on. I'm not sure we need a separate Zip Code field, even though we need the zip code information itself; I will email Jim McGowan about this question and CC you all.)
6. Down at the bottom right of the entry form is a "Submit" button.
7. The styings should be similar to those of DCSOps (see https://www.dcsops.org/, and sources should be under https://github.com/redcross . However, we don't have logins on DCSOps, so it's a little hard to see what things look like. I'll ask Jim for a login, or for screenshots, in that same email. He says the font in DCSOps is Helvetica New, FWIW.)

Okay. I realize this issue isn't the right place to dump all this; please feel free to move it out to other tickets or to .md files in the repository as needed. I was in a hurry and didn't want you to wake up to another day of work in your hemisphere without this information. Will send the mail to Jim now.

EDIT (by @cecilia-donnelly): Changed bullets to numbers in order to refer to the points above more easily.

[cecilia-donnelly]

@kfogel thanks for getting all of that in writing!

@nttaylor has already implemented several of the changes you mention in commit 334a22f. He's completed numbers 1, 2, and 3 (albeit with a plain gray background instead of a photo, for now). This ticket was specifically about cleaning up the style code, not necessarily about the style changes.

I've broken @kfogel's comment out into issues #5, #6, and #8.

[cecilia-donnelly]

Hey, @nttaylor and @trystant, I'm going to close this issue since Noel has rewritten the templates as indicated. More specific changes are in their own issues, and I don't want this one to linger forever ("styling" writ large will never really end, after all).