Skip to content
This repository has been archived by the owner on Nov 10, 2020. It is now read-only.

Print stylesheet #1633

Merged
merged 8 commits into from
Jul 21, 2016
Merged

Print stylesheet #1633

merged 8 commits into from
Jul 21, 2016

Conversation

gemfarmer
Copy link
Contributor

@gemfarmer gemfarmer commented Jul 20, 2016

Fixes issue(s) #1509, #1390

😎 PREVIEW

To review:

  • open link
  • try to print
  • check out print preview on various pages

Changes proposed in this pull request:

  • makes second print.css stylesheet that styles the site when it is printed
  • I removed all exclusively interactive features of the site, except for links.
  • links: add URL as text following a link in this format Some link (www.somelink.com)
  • left-aligned most things
  • pages covered
    • all content pages
    • how it works and explore landing pages
    • state and national pages
    • home page
    • about page
  • For the most part tried to keep the default spacing, font sizes and alignment
  • The hardest part was making the page break in the correct location. The breaks that I have established are far from perfect – there are plenty of messy examples I have found – but this is a good place to start.

NOTE: I used the !important flag quite a bit. Normally I would applaud hound for catching me, but since these are supreme overrides and I don't want to mess around with finding the appropriate specificity for each instance I am trying to override, !important is more helpful than harmful IMHO.

/cc @meiqimichelle @coreycaitlin

@@ -0,0 +1,22 @@
---

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Invalid CSS after "@import 'reset'": expected "{", was ";"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is because of Jekyll syntax.

@gemfarmer gemfarmer changed the title [WIP] Print stylesheet Print stylesheet Jul 20, 2016
@@ -0,0 +1,19 @@
.chart-item,
.row-container,
tr,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Properties should be ordered page-break-before, page-break-inside

@ericronne
Copy link
Contributor

Nice! What do you think about making all text black, and reducing its size a bit?

@gemfarmer
Copy link
Contributor Author

I think those are reasonable suggestions. I also revisited the home page and some of the first pages that I changed and realized that the page is breaking in weird ways :(

@ericronne
Copy link
Contributor

Is it easy to force charts and their headers to stay grouped, so they don't get split by page breaks?

@gemfarmer
Copy link
Contributor Author

@ericronne I wasn't having an easy time of it. I'll take another stab though. It doesn't look great right now. Better than before, but not great.

@ericronne
Copy link
Contributor

If it's not easy, my vote is onward to the Next Thing.

---

// include reset
@import 'reset';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Invalid CSS after "@import 'reset'": expected "{", was ";"

@gemfarmer
Copy link
Contributor Author

💥 . @ericronne I ended up keeping things in color because my timebox for print stylesheeting ran out :/

@gemfarmer gemfarmer merged commit 0e5e477 into state-pages Jul 21, 2016
@gemfarmer gemfarmer deleted the print-stylesheet branch July 21, 2016 23:13
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants