Sure. I’ve stripped out my theme specific tweaks, and what’s left are overall improvements.
Full code:
@media print {
/* remove items N/A for print
** visual clutter etc. */
.avatar,
.topic-avatar,
.badge-category,
.badge-category-bg,
.badge-notification.clicks,
header,
div.ember-view.topic-above-post-stream-outlet.topic-above-post-stream,
div.ember-view.topic-map,
section.ember-view.post-menu-area.clearfix,
div#topic-footer-buttons,
div#suggested-topics,
div#progress-topic-wrapper,
#topic-progress-wrapper,
div.nums,
._flyout,
.ember-view.btn,
#topic-progress,
.quote-controls,
#topic-closing-info,
div.lazyYT,
.post-info.edits,
.post-action,
.saving-text,
.draft-text,
#discourse-modal,
div.read-state,
div.read-state.read,
.edit-topic,
a.reply-to-tab,
a.reply-new,
div.has-pending-posts,
div.time-gap,
#bottom,
#footer {
display: none !important;
}
/* bottom border to help separate posts */
div.row {
border-top: 1px solid #AAA;
// margin-bottom: -1px;
}
.cooked pre code { max-height: none; }
#main-outlet { padding: 0 !important; }
html,body { min-width: 0; height: auto; }
.lightbox-wrapper img { max-width: 500px !important; height: auto !important; }
.topic-body { width: auto; margin: 0; padding: 0; float: none; }
.topic-post article.boxed .select-posts { width: auto; left: auto; right: 0; }
.gap { width: auto; }
.gutter { padding: 0; }
/* restyle div#topic-title */
#topic-title {
margin: 0;
padding: 0;
}
#topic-title div div h1 {
margin: 2.5em 0 0 0;
padding: 0;
float: left;
font-weight: normal;
font-size: normal;
}
a, a:visited {
color:#DDD;
font-weight:bold;
}
/* hide OP Solved plugin stuff */
div.ember-view.topic-after-cooked-outlet.solved-panel {
display: none;
}
/* localhost - MOOT for production */
// div.ember-view.topic-category-outlet.show-topic-category-location,
// div.alert.alert-info.alert-emails-disabled,
// div.profiler-results.profiler-left.profiler-no-controls {
// display: none;
// }
}
The fastest way to see the changes is on a text comparison site like http://text-compare.com/.
###Display:none
.badge-category,
.badge-category-bg,
.badge-notification.clicks,
Got rid of the category, its color bar, and the link click annotations. Once it’s ready for print, none of these are relevant.
.post-info.edits,
.post-action,
Made this more specific; hides the number of edits but brings the date back. I think dates on posts are very relevant even on printouts. Post-action hides the “three people liked this”.
#bottom,
#footer
I know, footer and bottom sections could be printed, but it tends to add an extra page while printing. I hate that. This is my revenge for all those wasted sheets of paper over the years.
###Border tweaks
/* bottom border to help separate posts */
div.row {
border-top: 1px solid #AAA;
// margin-bottom: -1px;
}
I like the border thicker and darker, and the bottom-most one is wasted. So, I put it at the top instead, and removed the bottom margin to make it double thick. Lightened it up a bit. This is just my preference.
#topic-title div div h1 {
margin: 2.5em 0 0 0;
padding: 0;
float: left;
font-weight: normal;
font-size: normal;
}
Added some top margin for the title, looks better and prevents clashing with the browser date/title headers. Removed right margin, not sure what it was for (had no effect in my testing).
###Link style
a, a:visited {
color:#DDD;
font-weight:bold;
}
Out of respect for laser printers, I restyled the links a bit. You can’t see blue in monochrome. Blue is useless on paper anyways, just a waste of color ink. Bold font yet light grey makes it easy to tell where a link was, without being visually distracting. Works equally well for color and B&W printers.
I also commented out the localhost bits… since it said moot for production and I didn’t know what the intent was.