Skip to content

Instantly share code, notes, and snippets.

Last active December 23, 2015 09:09
Show Gist options
  • Save Sinetheta/6612205 to your computer and use it in GitHub Desktop.
Save Sinetheta/6612205 to your computer and use it in GitHub Desktop.
Add a footnotes style list of links at the bottom of a page. Hide with class `.printOnly`. Depending on your environment, it may be necessary to scope the target container (eg: avoid including navigation links).
/* Smashing winery
Example site for article at Smashing Magazine
by Christian Krammer,
Print style */
/* Reset quotes */
q {
quotes: none
q:before, q:after {
content: ""
/* Hide everything unneeded */
header h1, header nav, footer, img {
display: none
/* font sizes */
body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
color: #000;
h1 {
font-size: 24pt
h2 {
font-size: 14pt;
margin-top: 25px
aside h2 {
font-size: 18pt
/* Show printer-frindly logo. */
header .print {
display: block
/* If you like things a little bit easier and more semantic you can alternatively just leave the h1 of the header visible, switch off the margin and make it bigger than the rest of the headlines */
/*header nav, footer, img {display: none}
header h1 {
margin: 0;
font-size: 30pt;
/* Some browsers like to show a border around images. Switch it off */
img {
border: 0
/* Mover the header a little bit awy from the content */
header {
margin-bottom: 40px
/* Display the URL of the site so that the user knows where the printout came from */
header:after {
display: block;
content: ""
/* Additionally/optionally a little message could be displayed */
/*header:before {
display: block;
content: "Thank your for printing our content at Please check back soon for new offers about delicious wine from our winery.";
margin-bottom: 10px;
border: 1px solid #bbb;
padding: 3px 5px;
font-style: italic;
/* Separate blockquotes a little bit from the rest */
blockquote {
font-size: 13pt;
font-style: italic;
/* By default links are blue. For optimal legibility change them to black */
p a {
color: #000
/* Show the URL after each link, whereby internal links are preceeded by the site's URL */
p a:after {
content: " (" attr(href) ")";
font-size: 80%;
word-wrap: break-word;
/* External links don't get this treatment */
p a[href^="http://"]:after, p a[href^="https://"]:after {
content: " (" attr(href) ")";
/* Append the source of the citation */
q:after {
content: " (" attr(cite) ")"
/* The Sidebar is placed under the content automatically. To distinguish it from the rest a border and a gap is set before */
aside {
border-top: 1px solid #bbb;
margin-top: 30px;
display: block;
/*page-break-before: always; */ /* Moves the sidebar to new page */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment