PIXLS.US print style patch

patdavid-print-style.patch

From a89c508eb251a5a87793fad005fb17dfeba29be8 Mon Sep 17 00:00:00 2001
From: Pat David <[email protected]>
Date: Thu, 8 Dec 2016 11:17:52 -0600
Subject: [PATCH] Work on print css styles

Fix the paragraph width issue (it was likely max-width being
set that was causing a problem).

Set all elements to 80% width of the container (div.column).
Set font to 14pt (12pt seemed too small when printing tests).
---
 src/styles/print.scss | 49 +++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/styles/print.scss b/src/styles/print.scss
index 9494e57..f865753 100644
--- a/src/styles/print.scss
+++ b/src/styles/print.scss
@@ -1,11 +1,13 @@
 @media only print {
 		@page {
 				margin: 0.5in;
+                margin-bottom: 0.75in;
 		}
 
 		body {
 				background: white;
 				font-size: 12pt;
+                font-size: 14pt;
 		}
 
 		#bar, #pushMenu, #lede, .footer, .discourse, .discourse-comments {
@@ -20,23 +22,35 @@
 				float: none !important;
 				color: black;
 				background: transparent none;
+                margin: 0 auto;
 		}
 
-		p, ol, ul, li {
-				width: 100%;
-				margin: 0;
+		p, ol, ul {
+                width: 90%;
 				color: black;
 				background: transparent none;
+                max-width: inherit;
+                margin: 0.5rem auto 0.5rem;
 		}
 
+        li {
+            margin-bottom: 1.5rem;
+        }
+
+        li p {
+            margin: 0 0.5rem 1rem;
+            width: 100%;
+        }
+
 		a:link, a:visited {
 				color: gray;
 				background: transparent;
-				text-decoration: underline;
+				/* text-decoration: underline;*/
 						}
 		a:link:after, a:visited:after {
 				content: " (" attr(href) ") ";
 				font-size: 90%;
+                color: #bbb;
 									}
 		a[href^="/"]:after {
 				content: " (https://pixls.us" attr(href) ") ";
@@ -56,5 +70,32 @@
 
 		h1, h2, h3, h4, h5, h6 {
 				page-break-after: avoid;
+                width: 90%;
+                margin: 0 auto;
 		}
+
+        .article-title {
+            max-width: 90%;
+            margin: 0.5in auto 0;
+        }
+
+        #title {
+            margin: 0;
+        }
+
+        .fluid-vid iframe {
+            display: none;
+        }
+        .fluid-vid {
+            padding: 0;
+            height: 2.75rem;
+        }
+        .fluid-vid:after {
+            content: "Video not shown.";
+            width: 80%;
+            margin: 0 auto;
+            display: block;
+            border: solid 1px gray;
+            padding: 0.2rem;
+        }
 }
-- 
2.8.3