From ac93744d9fb984487fa9ea99c30f37de338d98a3 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Thu, 23 Mar 2017 14:34:13 -0400 Subject: [PATCH] Improve print styles (#919) * Fix image caption border-radius * Fix image caption border-radius * Improve print stylesheet - Close #909 * Update CHANGELOG and history --- CHANGELOG.md | 4 + _sass/_page.scss | 2 +- _sass/_print.scss | 226 ++++++++++++++++++++++++++++++++++++++- docs/_docs/18-history.md | 6 +- docs/_sass/_page.scss | 2 +- docs/_sass/_print.scss | 226 ++++++++++++++++++++++++++++++++++++++- 6 files changed, 457 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d573d49d..f0c6b652 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ ## Unreleased +### Enhancements + +- Improve print stylesheet by increasing text contrast, removing elements that don't need to be printed, expanding URLs, and reducing amount of blank pages. [#909](https://github.com/mmistakes/minimal-mistakes/issues/909) + ### Maintenance - Remove extra word in comment. [#911](https://github.com/mmistakes/minimal-mistakes/pull/911) diff --git a/_sass/_page.scss b/_sass/_page.scss index 467e36f8..6b77b326 100644 --- a/_sass/_page.scss +++ b/_sass/_page.scss @@ -185,7 +185,7 @@ text-align: right; z-index: 5; opacity: 0.5; - border-radius: $border-radius 0 $border-radius 0; + border-radius: $border-radius 0 0 0; @include breakpoint($large) { padding: 5px 10px; diff --git a/_sass/_print.scss b/_sass/_print.scss index 04201cdd..c4992dcb 100644 --- a/_sass/_print.scss +++ b/_sass/_print.scss @@ -2,17 +2,237 @@ PRINT STYLES ========================================================================== */ +@media print { + + [hidden] { + display: none; + } + + * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + html { + font-size: 16px; + margin: 0; + padding: 0; + } + + body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background: #fff !important; + color: #000 !important; + font-size: 1rem; + line-height: 1.5; + margin: 0 auto; + text-rendering: optimizeLegibility; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: #000; + line-height: 1.2; + margin-bottom: 0.75rem; + margin-top: 0; + } + + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.75rem; + } + + h4 { + font-size: 1.5rem; + } + + h5 { + font-size: 1.25rem; + } + + h6 { + font-size: 1rem; + } + + a, + a:visited { + color: #000; + text-decoration: underline; + word-wrap: break-word; + } + + table { + border-collapse: collapse; + } + + thead { + display: table-header-group; + } + + table, + th, + td { + border-bottom: 1px solid #000; + } + + td, + th { + padding: 8px 16px; + } + + img { + border: 0; + display: block; + max-width: 100% !important; + vertical-align: middle; + } + + hr { + border: 0; + border-bottom: 2px solid #bbb; + height: 0; + margin: 2.25rem 0; + padding: 0; + } + + dt { + font-weight: bold; + } + + dd { + margin: 0; + margin-bottom: 0.75rem; + } + + abbr[title], + acronym[title] { + border: 0; + text-decoration: none; + } + + table, + blockquote, + pre, + code, + figure, + li, + hr, + ul, + ol, + a, + tr { + page-break-inside: avoid; + } + + h2, + h3, + h4, + p, + a { + orphans: 3; + widows: 3; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + page-break-after: avoid; + page-break-inside: avoid; + } + + h1 + p, + h2 + p, + h3 + p { + page-break-before: avoid; + } + + img { + page-break-after: auto; + page-break-before: auto; + page-break-inside: avoid; + } + + pre { + white-space: pre-wrap !important; + word-wrap: break-word; + } + + a[href^='http://']:after, + a[href^='https://']:after, + a[href^='ftp://']:after { + content: " (" attr(href) ")"; + font-size: 80%; + } + + abbr[title]:after, + acronym[title]:after { + content: " (" attr(title) ")"; + } + + .page-break, + .page-break-before { + page-break-before: always; + } + + .page-break-after { + page-break-after: always; + } + + .no-print { + display: none; + } + + a.no-reformat:after { + content: ''; + } + + abbr[title].no-reformat:after, + acronym[title].no-reformat:after { + content: ''; + } + + .page__hero-caption { + color: #000 !important; + background: #fff !important; + opacity: 1; + + a { + color: #000 !important; + } + } + /* Hide the following elements on print ========================================================================== */ -@media print { .masthead, .toc, .page__share, .page__related, + .pagination, .ads, - .page__footer { - display: none; + .page__footer, + .author__avatar, + .author__content, + .author__urls-wrapper, + .nav__list, + .adsbygoogle { + display: none !important; } } \ No newline at end of file diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md index 81e2593c..0851f597 100644 --- a/docs/_docs/18-history.md +++ b/docs/_docs/18-history.md @@ -4,11 +4,15 @@ permalink: /docs/history/ excerpt: "Change log of enhancements and bug fixes made to the theme." sidebar: nav: docs -modified: 2017-03-22T09:47:31-04:00 +modified: 2017-03-23T14:32:01-04:00 --- ## Unreleased +### Enhancements + +- Improve print stylesheet by increasing text contrast, removing elements that don't need to be printed, expanding URLs, and reducing amount of blank pages. [#909](https://github.com/mmistakes/minimal-mistakes/issues/909) + ### Maintenance - Remove extra word in comment. [#911](https://github.com/mmistakes/minimal-mistakes/pull/911) diff --git a/docs/_sass/_page.scss b/docs/_sass/_page.scss index 467e36f8..6b77b326 100644 --- a/docs/_sass/_page.scss +++ b/docs/_sass/_page.scss @@ -185,7 +185,7 @@ text-align: right; z-index: 5; opacity: 0.5; - border-radius: $border-radius 0 $border-radius 0; + border-radius: $border-radius 0 0 0; @include breakpoint($large) { padding: 5px 10px; diff --git a/docs/_sass/_print.scss b/docs/_sass/_print.scss index 04201cdd..c4992dcb 100644 --- a/docs/_sass/_print.scss +++ b/docs/_sass/_print.scss @@ -2,17 +2,237 @@ PRINT STYLES ========================================================================== */ +@media print { + + [hidden] { + display: none; + } + + * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + html { + font-size: 16px; + margin: 0; + padding: 0; + } + + body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + background: #fff !important; + color: #000 !important; + font-size: 1rem; + line-height: 1.5; + margin: 0 auto; + text-rendering: optimizeLegibility; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: #000; + line-height: 1.2; + margin-bottom: 0.75rem; + margin-top: 0; + } + + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2rem; + } + + h3 { + font-size: 1.75rem; + } + + h4 { + font-size: 1.5rem; + } + + h5 { + font-size: 1.25rem; + } + + h6 { + font-size: 1rem; + } + + a, + a:visited { + color: #000; + text-decoration: underline; + word-wrap: break-word; + } + + table { + border-collapse: collapse; + } + + thead { + display: table-header-group; + } + + table, + th, + td { + border-bottom: 1px solid #000; + } + + td, + th { + padding: 8px 16px; + } + + img { + border: 0; + display: block; + max-width: 100% !important; + vertical-align: middle; + } + + hr { + border: 0; + border-bottom: 2px solid #bbb; + height: 0; + margin: 2.25rem 0; + padding: 0; + } + + dt { + font-weight: bold; + } + + dd { + margin: 0; + margin-bottom: 0.75rem; + } + + abbr[title], + acronym[title] { + border: 0; + text-decoration: none; + } + + table, + blockquote, + pre, + code, + figure, + li, + hr, + ul, + ol, + a, + tr { + page-break-inside: avoid; + } + + h2, + h3, + h4, + p, + a { + orphans: 3; + widows: 3; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + page-break-after: avoid; + page-break-inside: avoid; + } + + h1 + p, + h2 + p, + h3 + p { + page-break-before: avoid; + } + + img { + page-break-after: auto; + page-break-before: auto; + page-break-inside: avoid; + } + + pre { + white-space: pre-wrap !important; + word-wrap: break-word; + } + + a[href^='http://']:after, + a[href^='https://']:after, + a[href^='ftp://']:after { + content: " (" attr(href) ")"; + font-size: 80%; + } + + abbr[title]:after, + acronym[title]:after { + content: " (" attr(title) ")"; + } + + .page-break, + .page-break-before { + page-break-before: always; + } + + .page-break-after { + page-break-after: always; + } + + .no-print { + display: none; + } + + a.no-reformat:after { + content: ''; + } + + abbr[title].no-reformat:after, + acronym[title].no-reformat:after { + content: ''; + } + + .page__hero-caption { + color: #000 !important; + background: #fff !important; + opacity: 1; + + a { + color: #000 !important; + } + } + /* Hide the following elements on print ========================================================================== */ -@media print { .masthead, .toc, .page__share, .page__related, + .pagination, .ads, - .page__footer { - display: none; + .page__footer, + .author__avatar, + .author__content, + .author__urls-wrapper, + .nav__list, + .adsbygoogle { + display: none !important; } } \ No newline at end of file