The Flat template is—in my opinion—a simple and elegant WordPress template.
Still, when printing blog pages, the output contains a large amount of whitespace.
CSS Customization
Using the template customization feature of WordPress, I adjusted the CSS of the Flat template to suit my needs.
The following CSS fragment is a suggestion for producing a more concise print rendering using the Flat WordPress theme.
@media print {
.site-info, .entry-meta, .nav-links, .tags-links, a::after, #bit, .fa {
display: none;
}
#masthead .site-title, .hentry .entry-title {
font-size: 30px;
font-family: Handlee;
}
#masthead .site-title {
padding-bottom: 0px;
}
.post {
padding-top: 0px;
}
.hentry .entry-content {
padding-top: 0px;
}
h2 {
font-size: 24px;
margin-top: 5px;
}
table.easy-table {
max-width: 90%;
}
.easy-table th, .easy-table td {
padding-top: 1px;
padding-bottom: 1px;
}
}
Testing
I tested the print template live inside Firefox using the Developer Toolbar (Tools → Web Developer → Developer Toolbar) and the command media emulate print.
Chromium also offers a similar functionality in the Developer Tools (Ctrl+Shift+I) → Menu → More tools → Rendering → Emulate CSS media.