Objective
To set up a printer-friendly framework for blog posts/pages.
Background
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.
Solution
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 p.meta to a.base-alignment in sass/custom/_print.scss.2
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.
Google searches:
| Query string | Rank | Remarks |
|---|---|---|
| image max-width | 1 | Failed |
| 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.