Add print/screen differentiation in stylesheet

Now printed output looks tolerable rather than being completely
unstyled. Boxes with background colors have lighter backgrounds than
on screen, the table of contents has a smaller typeface, and the
footer content other than the timestamp is hidden. I am pretty sure
this will break the site a bit more on IE, but fuck it IE is a piece
of shit.

diff --git a/default.css b/default.css
index b76183a..47d2674 100644 (file)
--- a/default.css
+++ b/default.css
@@ -2,11 +2,18 @@
 body 
 { 
   font-family: serif;
-  background-color: #D9D9D9;
-  color: #222222; 
   max-width: 8in;
 }
 
+@media screen
+{ 
+  body
+  { 
+    background-color: #D9D9D9;
+    color: #222222;
+  }
+}
+
 .verse, .src, .image, blockquote
 {
   clear: right; /* Clear the contents box usually */
@@ -14,9 +21,6 @@ body
 
 .src
 { 
-  color: #e3e3e3;
-  background-color: #444444;
-
   margin-right: auto;
   margin-left: auto;
   width: 95%;
@@ -27,6 +31,24 @@ body
   white-space: -moz-pre-wrap;  /* Mozilla */
 }
 
+@media screen
+{ 
+  .src
+  {
+    color: #e3e3e3;
+    background-color: #444444;
+  }
+}
+
+@media print
+{ 
+  .src
+  {
+    color: #535353;
+    background-color: #888888;
+  }
+}
+
 p
 { 
   text-align: justify;
@@ -34,8 +56,6 @@ p
 
 .verse
 {
-  background-color: #BBBBBB;
-  color: #111111;
   padding: 1em;
   border: 2px solid #999999;
   width: 60%;
@@ -44,10 +64,17 @@ p
   font-size: smaller;
 }
 
+@media screen
+{ 
+  .verse
+  {
+    background-color: #BBBBBB;
+    color: #111111;
+  }
+}
+
 blockquote
 { 
-  background-color: #AAAAAA;
-  color: #111111;
   padding: 1em;
   border: 2px solid black;
   width: 80%;
@@ -55,6 +82,24 @@ blockquote
   margin-left: auto;
 }
 
+@media screen
+{ 
+  blockquote
+  {
+    background-color: #AAAAAA;
+    color: #111111;
+  }
+}
+
+@media print
+{ 
+  blockquote
+  {
+    background-color: #DDDDDD;
+    color: #000000;
+  }
+}
+
 code
 { 
   white-space: pre;
@@ -110,17 +155,45 @@ div.contents dl
   margin-bottom: 0.2em;
 }
 
+@media print
+{ 
+  div.contents
+  {
+    background-color: #CCCCCC;
+  }
+
+  div.contents dt
+  {
+    font-size: 6pt;
+  }
+}
+
 /* Images */
 table.image, p.image
 { 
   border: 2px solid #222222;
-  background-color: #999999;
   width: auto;
   padding: 0.1em;
   margin-left: auto;
   margin-right: auto;
 }
 
+@media screen
+{ 
+  table.image, p.image
+  {
+    background-color: #999999;
+  }
+}
+
+@media print
+{ 
+  table.image, p.image
+  {
+    background-color: #CCCCCC;
+  }
+}
+
 /* Force spacing between image boxes */
 table.image + table.image, p.image + p.image
 {
@@ -168,6 +241,19 @@ img.latex-inline
   letter-spacing: 0.2em;
 }
 
+@media print
+{ 
+  .rating-good
+  { 
+    .color: #000000;
+  }
+
+  .rating-bad
+  {
+    color: #CCCCCC;
+  }
+}
+
 /* Footer template */
 p.cke-footer
 {  
@@ -186,4 +272,12 @@ p.cke-timestamp
 p.cke-buttons img
 { 
   border: 0px;
+}
+
+@media print
+{ 
+  p.cke-buttons, p.cke-footer
+  {
+    display: none;
+  }
 }
\ No newline at end of file