From e984ffa0b1b1106151efd6f57f40e0565c39d0b1 Mon Sep 17 00:00:00 2001 From: David Thompson Date: Fri, 18 Feb 2022 09:33:51 -0500 Subject: Make the planner decently printable. --- css/garden.css | 105 ++++++++++++++++++++++++++++++++++++++--- images/direct-sow-print.svg | 27 +++++++++++ images/start-indoors-print.svg | 21 +++++++++ images/transplant-print.svg | 22 +++++++++ index.html | 6 +-- js/garden.js | 8 ++-- 6 files changed, 176 insertions(+), 13 deletions(-) create mode 100644 images/direct-sow-print.svg create mode 100644 images/start-indoors-print.svg create mode 100644 images/transplant-print.svg 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 @@ + + + + + + + + + + + + + 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 @@ + + + + + + + + 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 @@ + + + + + diff --git a/index.html b/index.html index 203b9bd..4bcccc0 100644 --- a/index.html +++ b/index.html @@ -64,9 +64,9 @@

Key

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"); -- cgit v1.2.3