Add print links.

sjl · Jul 4, 2010 · 8ab9a09 · 8ab9a09
1 parent ad21969
commit 8ab9a09
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 11 deletions.
diff --git a/layout/skeleton/_base.html b/layout/skeleton/_base.html
@@ -16,15 +16,10 @@
         {% endblock %}
 
         {% block css %}
-            <link rel="stylesheet"
-                  href="{{ site.url }}/media/css/aal.css"
-                  type="text/css" media="screen" charset="utf-8" />
-            <link rel="stylesheet"
-                  href="{{ site.url }}/media/css/base.css"
-                  type="text/css" media="screen" charset="utf-8" />
-            <link rel="stylesheet"
-                  href="{{ site.url }}/media/css/colorbox.css"
-                  type="text/css" media="screen" charset="utf-8" />
+            <link rel="stylesheet" href="{{ site.url }}/media/css/aal.css" type="text/css" media="screen" charset="utf-8" />
+            <link rel="stylesheet" href="{{ site.url }}/media/css/base.css" type="text/css" media="screen" charset="utf-8" />
+            <link rel="stylesheet" href="{{ site.url }}/media/css/colorbox.css" type="text/css" media="screen" charset="utf-8" />
+            <link rel="stylesheet" href="{{ site.url }}/media/css/print.css" type="text/css" media="print" charset="utf-8" />
             {% block extra_css %}{% endblock %}
         {% endblock %}
 
@@ -33,6 +28,7 @@
             <script src="/media/js/jquery.timeago.js" type="text/javascript"></script>
             <script src="/media/js/jquery.colorbox.js" type="text/javascript"></script>
             <script src="/media/js/sjl.js" type="text/javascript"></script>
+            <script src="/media/js/print.js" type="text/javascript"></script>
             <script src="http://mint.stevelosh.com/?js" type="text/javascript"></script>
 
             {% block extra_js %}{% endblock %}

diff --git a/media/css/base.less b/media/css/base.less
@@ -1,5 +1,3 @@
-/* @override http://localhost:8080/media/css/base.css */
-
 @pink: #e50053;
 @bodytext: #111111;
 
@@ -9,6 +7,7 @@ html {
 }
 body {
     font-family: "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
+    text-rendering: optimizeLegibility;
     color: @bodytext;
 }
 div#main-wrap {
@@ -338,3 +337,8 @@ div#section-tags {
         margin-right: 1em;
     }
 }
+
+/* Print link styles */
+.print-links {
+    display: none;
+}
diff --git a/media/css/print.less b/media/css/print.less
@@ -0,0 +1,77 @@
+body {
+    font: normal 10pt/1.25 HelveticaNeue, "Helvetica Neue", Arial, Helvetica, sans-serif;
+    text-rendering: optimizeLegibility;
+}
+
+#nav, #leaf-title, #comment-header, #disqus_thread, .dsq-brlink, .toc {
+    display: none;
+}
+#header {
+   font-size: 0.85em;
+   text-transform: capitalize;
+
+    a, a:active, a:visited {
+        text-decoration: none;
+        color: black;
+    }
+}
+#leaf-title {
+    display: none;
+}
+#leaf-stats {
+    a {
+        text-decoration: underline;
+        color: #c06;
+    }
+}
+#leaf-content {
+    a {
+        text-decoration: underline;
+        color: #c06;
+    }
+    ul.print-links {
+        display: block;
+        font-size: 1em;
+        list-style-type: none;
+        margin-left: 0em;
+
+        a {
+            text-decoration: none;
+        }
+    }
+    code, pre {
+        font: normal 9pt Menlo, Monaco, Consolas, "Courier New", Courier, monospace;
+    }
+    img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        border: 1.43em solid #e5e5e5;
+        padding: 1px;
+        background: black;
+    }
+    img.left, img.right {
+        border: none;
+        background: none;
+        padding: none;
+    }
+    img.left {
+         margin: 0 1.5em 1em 0;
+         float: left;
+    }
+    img.right {
+        margin: 0 0 .75em 1em;
+        float: right;
+    }
+}
+div#leaf-content.with-diagrams img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    background: none;
+    border: none;
+}
+span.amp {
+    font-family: "Palatino", "Constantia", "Palatino Linotype", serif;
+    font-style: italic;
+}
diff --git a/media/js/print.js b/media/js/print.js
@@ -0,0 +1,21 @@
+$(function() {
+    $('#leaf-content p:has(a)').add('#leaf-content ol:has(a)').add('#leaf-content ul:has(a)').each(function() {
+        var printing_links = $(this).find('a')
+                                    .not("[href^='#']")
+                                    .not(":has(img)")
+                                    .clone();
+        $(this).after(printing_links);
+
+        printing_links.wrap('<li></li>')
+                      .parent()
+                      .wrapAll('<ul class="print-links"></ul>');
+
+        printing_links.each(function() {
+            var href = $(this).attr('href');
+            if (href.match("^/")) {
+                href = 'http://stevelosh.com' + href;
+            }
+            $(this).after(': ' + href);
+        });
+    });
+});