To set up a printer-friendly framework for blog posts/pages.
Two months ago, in order to install Clapper’s image popup plugin in this blog1, I studied the source code of his blog on GitHub. In this process, I learnt the roles of
/sass\/(custom\/_)?(screen|print).scss/. (To be concise, I write a Perl regex.) Lacking time to learn CSS, I just directly copied Clapper’s CSS settings for printing.
Problems on the printed page
- Missing author and date
- Screenshots were too large and part of them flowed out of the page.
Display author and dates
Using [Firefox]’s “Inspect Element” and searching the generated HTML code for a post, I discovered that those missing parts belonged to
<pre class="meta"> tags. In Clapper’s
sass/custom/_print.scss, he didn’t display them. Before the removal of the section of CSS code that hid the author and date, I input “.meta” in the search box above the panel that showed the HTML code of the current document.
I don’t want the links for previous and next posts to appear in the printed version of a post in this blog, so I inspected the HTML code for those two links, and saw that only those two links belonged to an
<a class="base-alignment ..."> tag. Therefore, I change
Scaling down the screenshots
After I wrote the HTML and CSS code of an HTML5 slide used for a presentation, I knew something about the
max-width property in CSS.
|resize image max width height||1,2||They’re about C#.|
|resize image max width ratio||1||I haven’t learnt jQuery.|
|max-width, max-height: aspect ratio not kept||1||The image was horizontally squeezed without changing the height.|
|keep aspect ratio||7||I knew what to do from the first two answers.|
You may refer to commit 4be1bbf for details.