Reduce blank pages when printing in Chrome

Close #29
This commit is contained in:
Michael Rose 2017-09-14 15:55:25 -04:00
parent 4e715da018
commit ac18104d0b
3 changed files with 244 additions and 187 deletions

View File

@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/) The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/). and this project adheres to [Semantic Versioning](http://semver.org/).
## Unreleased
### Fixed
- `/_sass/_print.scss` to reduce blank pages when printing in Chrome. [#29](https://github.com/mmistakes/jekyll-theme-basically-basic/issues/29)
## [1.1.1] - 2017-09-06 ## [1.1.1] - 2017-09-06
### Changed ### Changed
- Change `gems` key in `_config.yml` to `plugins`. [#23](https://github.com/mmistakes/jekyll-theme-basically-basic/pull/23) - Change `gems` key in `_config.yml` to `plugins`. [#23](https://github.com/mmistakes/jekyll-theme-basically-basic/pull/23)

View File

@ -17,17 +17,20 @@
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: auto;
min-height: auto !important;
font-size: 16px; font-size: 16px;
} }
body { body {
margin: 0 auto; margin: 0;
height: auto;
background: #fff !important; background: #fff !important;
color: #000 !important; color: #000 !important;
font-size: 1rem; font-size: 1rem;
line-height: 1.5;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.5;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
@ -185,6 +188,26 @@
content: ' (' attr(title) ')'; content: ' (' attr(title) ')';
} }
.wrapper {
min-height: auto !important;
}
#main {
max-width: 100%;
}
.inner {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
}
.intro-actions .btn {
color: #fff;
background: #000;
}
.page-break, .page-break,
.page-break-before { .page-break-before {
page-break-before: always; page-break-before: always;
@ -216,11 +239,14 @@
Hide the following elements on print Hide the following elements on print
========================================================================== */ ========================================================================== */
.skip-links,
.sidebar-toggle-wrapper, .sidebar-toggle-wrapper,
.sidebar,
.title-area, .title-area,
.pager, .pager,
.site-footer, .site-footer,
.adsbygoogle { .adsbygoogle {
display: none !important; display: none !important;
height: 1px;
} }
} }

View File

@ -2,225 +2,251 @@
PRINT STYLES PRINT STYLES
========================================================================== */ ========================================================================== */
@media print { @media print {
[hidden] { [hidden] {
display: none; display: none;
} }
* { * {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 16px; height: auto;
} min-height: auto !important;
font-size: 16px;
}
body { body {
margin: 0 auto; margin: 0;
background: #fff !important; height: auto;
color: #000 !important; background: #fff !important;
font-size: 1rem; color: #000 !important;
-moz-osx-font-smoothing: grayscale; font-size: 1rem;
-webkit-font-smoothing: antialiased; line-height: 1.5;
line-height: 1.5; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
} text-rendering: optimizeLegibility;
}
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-top: 0;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
color: #000; color: #000;
line-height: 1.2; line-height: 1.2;
} }
h1 { h1 {
font-size: 2.5rem; font-size: 2.5rem;
} }
h2 { h2 {
font-size: 2rem; font-size: 2rem;
} }
h3 { h3 {
font-size: 1.75rem; font-size: 1.75rem;
} }
h4 { h4 {
font-size: 1.5rem; font-size: 1.5rem;
} }
h5 { h5 {
font-size: 1.25rem; font-size: 1.25rem;
} }
h6 { h6 {
font-size: 1rem; font-size: 1rem;
} }
a { a {
background: none; background: none;
color: #000; color: #000;
text-decoration: underline; text-decoration: underline;
word-wrap: break-word; word-wrap: break-word;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
} }
thead { thead {
display: table-header-group; display: table-header-group;
} }
table, table,
th, th,
td { td {
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
td, td,
th { th {
padding: 8px 16px; padding: 8px 16px;
} }
img { img {
display: block; display: block;
max-width: 100% !important; max-width: 100% !important;
border: 0; border: 0;
vertical-align: middle; vertical-align: middle;
} }
hr { hr {
height: 0; height: 0;
margin: 2.25rem 0; margin: 2.25rem 0;
padding: 0; padding: 0;
border: 0; border: 0;
border-bottom: 2px solid #bbb; border-bottom: 2px solid #bbb;
} }
dt { dt {
font-weight: bold; font-weight: bold;
} }
dd { dd {
margin: 0; margin: 0;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
abbr[title], abbr[title],
acronym[title] { acronym[title] {
border: 0; border: 0;
text-decoration: none; text-decoration: none;
} }
table, table,
blockquote, blockquote,
pre, pre,
code, code,
figure, figure,
li, li,
hr, hr,
ul, ul,
ol, ol,
a, a,
tr { tr {
page-break-inside: avoid; page-break-inside: avoid;
} }
h2, h2,
h3, h3,
h4, h4,
p, p,
a { a {
orphans: 3; orphans: 3;
widows: 3; widows: 3;
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
page-break-after: avoid; page-break-after: avoid;
page-break-inside: avoid; page-break-inside: avoid;
} }
h1 + p, h1 + p,
h2 + p, h2 + p,
h3 + p { h3 + p {
page-break-before: avoid; page-break-before: avoid;
} }
img { img {
page-break-after: auto; page-break-after: auto;
page-break-before: auto; page-break-before: auto;
page-break-inside: avoid; page-break-inside: avoid;
} }
pre { pre {
white-space: pre-wrap !important; white-space: pre-wrap !important;
word-wrap: break-word; word-wrap: break-word;
} }
a[href^='http://']::after, a[href^='http://']::after,
a[href^='https://']::after, a[href^='https://']::after,
a[href^='ftp://']::after { a[href^='ftp://']::after {
font-size: 80%; font-size: 80%;
content: ' (' attr(href) ')'; content: ' (' attr(href) ')';
} }
abbr[title]::after, abbr[title]::after,
acronym[title]::after { acronym[title]::after {
content: ' (' attr(title) ')'; content: ' (' attr(title) ')';
} }
.page-break, .wrapper {
.page-break-before { min-height: auto !important;
page-break-before: always; }
}
.page-break-after { #main {
page-break-after: always; max-width: 100%;
} }
.no-print { .inner {
display: none; margin: 0;
} padding: 0;
width: 100%;
max-width: 100%;
}
a.no-reformat::after { .intro-actions .btn {
content: ''; color: #fff;
} background: #000;
}
abbr[title].no-reformat::after, .page-break,
acronym[title].no-reformat::after { .page-break-before {
content: ''; page-break-before: always;
} }
.btn { .page-break-after {
background: none; page-break-after: always;
color: #000; }
}
/* .no-print {
Hide the following elements on print display: none;
========================================================================== */ }
.sidebar-toggle-wrapper, a.no-reformat::after {
.title-area, content: '';
.pager, }
.site-footer,
.adsbygoogle { abbr[title].no-reformat::after,
display: none !important; acronym[title].no-reformat::after {
} content: '';
} }
.btn {
background: none;
color: #000;
}
/*
Hide the following elements on print
========================================================================== */
.skip-links,
.sidebar-toggle-wrapper,
.sidebar,
.title-area,
.pager,
.site-footer,
.adsbygoogle {
display: none !important;
height: 1px;
}
}