Make the planner decently printable.

6 files changed, 176 insertions, 13 deletions

diff --git a/css/garden.css b/css/garden.css
index c418ae6..e05fbfa 100644
--- a/css/garden.css
+++ b/css/garden.css
@@ -462,16 +462,22 @@ tbody tr td:nth-child(n+2) {
     border-left: 2px solid #fff;
 }
 
-img.icon {
-    display: block;
+.icon {
+    display: inline-block;
     width: 1.5rem;
     height: 1.5rem;
-    margin: 0 auto;
 }
 
-img.key {
-    width: 1.5rem;
-    height: 1.5rem;
+.icon-direct-sow {
+    background-image: url("../images/direct-sow.svg");
+}
+
+.icon-start-indoors {
+    background-image: url("../images/start-indoors.svg");
+}
+
+.icon-transplant {
+    background-image: url("../images/transplant.svg");
 }
 
 a {
@@ -554,3 +560,90 @@ h2.closed::after {
     content: " ▲";
     font-size: 75%;
 }
+
+/* Printer friendly styles */
+@media print {
+    body {
+        color: #000;
+        background-color: #fff;
+        font-size: 12pt;
+        font-family: 'Linux Libertine',serif;
+        line-height: 100%;
+        text-rendering: optimizeLegibility;
+    }
+
+    h1, h2, h3 {
+        line-height: 100%;
+        margin-top: 0.25em;
+        margin-bottom: 0.25em;
+    }
+
+    #instructions p {
+        margin: 0;
+    }
+
+    .container {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .table-container {
+        page-break-before: always;
+        page-break-after: always;
+    }
+
+    .crop {
+        text-decoration-line: none;
+    }
+
+    .icon {
+        width: 1.5em;
+        height: 1.5em;
+    }
+
+    .icon-direct-sow {
+        content: url("../images/direct-sow-print.svg");
+    }
+
+    .icon-start-indoors {
+        content: url("../images/start-indoors-print.svg");
+    }
+
+    .icon-transplant {
+        content: url("../images/transplant-print.svg");
+    }
+
+    table {
+        font-size: 100%;
+    }
+
+    tbody tr:nth-child(odd) {
+        background-color: #ccc;
+    }
+
+    thead tr:nth-child(1) th {
+        font-size: 80%;
+    }
+
+    tbody tr td:nth-child(n+2) {
+        border-left: none;
+    }
+
+    th {
+        font-size: 60%;
+        padding: 0.1em;
+    }
+
+    td {
+        font-size: 80%;
+        padding: 0.1em;
+    }
+
+    h2.open::after {
+        content: none;
+    }
+
+    h2.closed::after {
+        content: none;
+    }
+}
diff --git a/images/direct-sow-print.svg b/images/direct-sow-print.svg
new file mode 100644
index 0000000..3b1efc5
--- /dev/null
+++ b/images/direct-sow-print.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

+  <g fill="#000000">

+    <path d="M495.266,0c-10.277,0-315.571,0-333.86,0c-13.373,0-25.949,5.21-35.408,14.671L25.84,114.829

+	     c-19.575,19.574-19.578,51.241,0,70.817c19.574,19.575,51.241,19.578,70.817,0l51.24-51.24

+	     c7.127,18.979,25.456,32.524,46.895,32.524h43.027c7.391,0,17.942,1.286,26.235,7.417c42.825,31.654,102.116,34.275,147.747,9.069

+	     v33.593c0,9.219,7.474,16.693,16.693,16.693h66.772c9.219,0,16.693-7.474,16.693-16.693V16.693C511.959,7.474,504.485,0,495.266,0

+	     z M411.8,142.932c-34.583,29.778-90.487,32.222-127.903,4.567c-12.352-9.13-28.286-13.955-46.079-13.955h-43.027

+	     c-9.205,0-16.693-7.488-16.693-16.693s7.489-16.693,16.693-16.693c1.777,0,131.799,0,133.544,0

+	     c9.219,0,16.693-7.474,16.693-16.693s-7.474-16.693-16.693-16.693c-3.491,0-149.84,0-153.106,0c-4.427,0-8.673,1.759-11.803,4.89

+	     l-90.377,90.377c-6.508,6.507-17.095,6.507-23.603,0c-6.527-6.528-6.528-17.074,0-23.603L149.604,38.278

+	     c3.108-3.108,7.411-4.892,11.801-4.892H411.8V142.932z M478.573,200.316h-33.386V33.386h33.386V200.316z"/>

+    <path d="M495.266,328.377h-27.908c-49.613,0-100.011,16.829-149.796,50.018c-33.556,22.372-89.587,22.36-123.125,0

+	     c-49.784-33.19-100.183-50.018-149.795-50.018H16.734c-9.219,0-16.693,7.474-16.693,16.693v150.237

+	     c0,9.219,7.474,16.693,16.693,16.693h478.533c9.219,0,16.693-7.474,16.693-16.693V345.07

+	     C511.959,335.851,504.485,328.377,495.266,328.377z M478.573,478.614H33.427V361.763h11.215

+	     c42.904,0,87.072,14.942,131.276,44.411c44.727,29.818,115.407,29.839,160.164,0c44.204-29.469,88.372-44.411,131.276-44.411

+	     h11.215V478.614z"/>

+    <circle cx="261.568" cy="250.473" r="16.693"/>

+    <circle cx="328.34" cy="250.473" r="16.693"/>

+    <circle cx="294.954" cy="317.245" r="16.693"/>

+    <circle cx="194.796" cy="250.473" r="16.693"/>

+    <circle cx="228.182" cy="317.245" r="16.693"/>

+  </g>

+</svg>

diff --git a/images/start-indoors-print.svg b/images/start-indoors-print.svg
new file mode 100644
index 0000000..72ff87a
--- /dev/null
+++ b/images/start-indoors-print.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

+  <g fill="#000000">

+    <path d="M339.978,92.491C315.105,75.671,286.066,66.783,256,66.783c-30.067,0-59.106,8.889-83.977,25.708

+	     c-7.638,5.166-9.643,15.545-4.478,23.182c5.166,7.638,15.541,9.645,23.181,4.478c19.328-13.069,41.899-19.977,65.273-19.977

+	     c23.373,0,45.944,6.908,65.273,19.977c7.639,5.166,18.018,3.16,23.182-4.478C349.621,108.034,347.616,97.655,339.978,92.491z"/>

+    <path d="M473.043,413.088V217.043C473.043,97.366,375.678,0,256,0S38.957,97.366,38.957,217.043v196.045

+	     C16.68,418.165,0,438.121,0,461.913v33.391C0,504.525,7.475,512,16.696,512h478.609c9.22,0,16.696-7.475,16.696-16.696v-33.391

+	     C512,438.121,495.32,418.165,473.043,413.088z M72.348,217.043c0-101.266,82.386-183.652,183.652-183.652

+	     s183.652,82.386,183.652,183.652v194.783H272.696v-77.913h50.087c46.03,0,83.478-37.448,83.478-83.478v-66.783

+	     c0-9.22-7.475-16.696-16.696-16.696h-66.783c-27.278,0-51.541,13.154-66.783,33.449c-15.242-20.295-39.504-33.449-66.783-33.449

+	     h-66.783c-9.22,0-16.696,7.475-16.696,16.696v66.783c0,46.03,37.448,83.478,83.478,83.478h50.087v77.913H72.348V217.043z

+	     M334.588,238.63c-6.519-6.519-17.091-6.519-23.611,0l-38.281,38.281v-26.476c0-27.618,22.469-50.087,50.087-50.087h50.087v50.087

+	     c0,27.618-22.469,50.087-50.087,50.087h-26.476l38.282-38.282C341.109,255.721,341.109,245.149,334.588,238.63z M177.411,262.24

+	     l38.282,38.282h-26.476c-27.618,0-50.087-22.469-50.087-50.087v-50.087h50.087c27.618,0,50.087,22.469,50.087,50.087v26.476

+	     l-38.282-38.282c-6.519-6.519-17.091-6.519-23.611,0C170.891,245.148,170.891,255.72,177.411,262.24z M478.609,478.609H33.391

+	     v-16.696c0-9.206,7.49-16.696,16.696-16.696c11.874,0,409.916,0,411.826,0c9.206,0,16.696,7.49,16.696,16.696V478.609z"/>

+  </g>

+</svg>

diff --git a/images/transplant-print.svg b/images/transplant-print.svg
new file mode 100644
index 0000000..08f2907
--- /dev/null
+++ b/images/transplant-print.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

+  <path fill="#000000" d="M389.053,345.242c-10.63,0-19.026-0.13-28.328,0.113c-16.759-35.379-50.087-60.006-88.403-65.605v-45.096

+	   c30.45-0.476,92.264-8.283,142.337-58.357c67.829-67.829,58.104-157.205,57.656-160.976c-0.907-7.654-6.942-13.689-14.596-14.596

+	   c-3.775-0.447-93.148-10.173-160.977,57.657c-17.537,17.539-29.881,36.516-38.55,55.082

+	   C230.487,47.251,165.036,0.609,88.889,0.609H55.537c-9.209,0-16.676,7.466-16.676,16.676v33.352

+	   c0,101.145,82.288,183.434,183.434,183.434h16.676v45.684c-38.238,5.603-71.59,30.199-88.371,65.488h-28.36

+	   c-33.437,0-64.117,13.649-86.388,38.431C16.896,404.766,5.58,432.288,5.58,457.295C5.579,489.372,24.692,512,55.537,512h400.219

+	   c31.665,0,50.663-22.768,50.663-54.305C506.419,408.519,461.406,345.242,389.053,345.242z M320.326,81.964

+	   c23.387-23.387,52.77-38.599,87.331-45.213c12.69-2.429,23.822-3.196,31.97-3.337c-0.141,8.152-0.908,19.283-3.337,31.97

+	   c-6.614,34.561-21.826,63.944-45.213,87.33c-25.228,25.227-57.13,40.558-93.442,46.275l69.858-69.858

+	   c6.512-6.512,6.512-17.07,0-23.583c-6.511-6.512-17.07-6.512-23.583,0l-69.858,69.858

+	   C279.767,139.105,295.089,107.202,320.326,81.964z M167.384,105.548c-6.511-6.512-17.07-6.512-23.583,0s-6.512,17.07,0,23.583

+	   l71.416,71.416c-79.482-3.71-143.004-69.528-143.004-149.911V33.96h16.676c80.383,0,146.201,63.523,149.911,143.004

+	   L167.384,105.548z M455.756,478.648H55.537c-12.474,0-16.607-8.397-16.607-21.353c0-16.747,8.326-36.417,21.727-51.329

+	   c11.222-12.487,31.015-27.373,61.583-27.373h39.479c7.057,0,13.35-4.441,15.713-11.091c11.824-33.264,43.256-55.613,78.214-55.613

+	   c28.233,0,54.082,14.535,69.239,37.622c-20.678,5.761-39.426,17.232-54.53,33.676c-6.23,6.783-5.781,17.332,1.002,23.562

+	   c6.784,6.23,17.333,5.781,23.562-1.002c10.23-11.138,27.348-24.75,52.612-27.272c1.055,0.141,26.541-0.106,41.522-0.106

+	   c55.939,0,84.015,50.935,84.015,79.323C473.068,473.637,466.273,478.648,455.756,478.648z"/>

+</svg>

diff --git a/index.html b/index.html
index 203b9bd..4bcccc0 100644
--- a/index.html
+++ b/index.html
@@ -64,9 +64,9 @@
         <div class="section-container">
           <h3>Key</h3>
           <ul>
-            <li><img src="images/start-indoors.svg" class="key"/> start seeds indoors</li>
-            <li><img src="images/direct-sow.svg" class="key"/> direct sow outdoors</li>
-            <li><img src="images/transplant.svg" class="key"/> transplant outdoors</li>
+            <li><span class="icon icon-start-indoors"></span> start seeds indoors</li>
+            <li><span class="icon icon-direct-sow"></span> direct sow outdoors</li>
+            <li><span class="icon icon-transplant"></span> transplant outdoors</li>
           </ul>
           <div class="table-container">
             <table id="schedule"></table>
diff --git a/js/garden.js b/js/garden.js
index 046943a..12a5fc4 100644
--- a/js/garden.js
+++ b/js/garden.js
@@ -696,10 +696,10 @@ function refreshTable(crops, season, schedule) {
 
   function createCropRow(crop, schedule) {
     function icon(name) {
-      const img = document.createElement("img");
-      img.classList.add("icon");
-      img.src = `images/${name}.svg`;
-      return img;
+      const icon = document.createElement("span");
+      icon.classList.add("icon");
+      icon.classList.add(`icon-${name}`);
+      return icon;
     }
 
     const row = document.createElement("tr");