From: Christian Heller <c.heller@plomlompom.de>
Date: Sun, 15 Nov 2020 18:48:22 +0000 (+0100)
Subject: Improve printable view.
X-Git-Url: https://plomlompom.com/repos/%7B%7Bprefix%7D%7D/static/%7B%7B%20web_path%20%7D%7D/%7Broute%7D?a=commitdiff_plain;h=81450a973158b0439ef47b19873d9f902529d9b3;p=guiltcards

Improve printable view.
---

diff --git a/views/_card.css b/views/_card.css
index 9e71295..0d6bc15 100644
--- a/views/_card.css
+++ b/views/_card.css
@@ -2,4 +2,11 @@
     box-sizing: border-box;
     border: 30px solid #aaaaaa;
     width: 200px;
-    height: 400px; }
+    height: 400px;
+}
+.answers {
+    list-style-type: none;
+}
+.answers li:before {
+    content: "[ ] ";
+}
diff --git a/views/_card.tpl b/views/_card.tpl
index e7533dd..36d8c82 100644
--- a/views/_card.tpl
+++ b/views/_card.tpl
@@ -4,14 +4,14 @@
   <p class="prompt">Choose at least one of these guilts as your own:</p>
   <ul class="answers">
   % for answer in card["answers"]:
-    <li>{{ answer }}</li>
+    <li class="answer">{{ answer }}</li>
   % end
   <ul/>
   % end
   % if card["type"] == 'action':
   <h1 class="title">ACTION CARD<br />{{ card["title"] }}</h1>
   % for paragraph in card["paragraphs"]:
-  <p>{{ paragraph }}</p>
+  <p class="paragraph">{{ paragraph }}</p>
   % end
   % end
 </div>
diff --git a/views/cards_print.tpl b/views/cards_print.tpl
index b7b63a1..2c4d76b 100644
--- a/views/cards_print.tpl
+++ b/views/cards_print.tpl
@@ -1,9 +1,24 @@
 % include('_meta_head.tpl')
 <style>
 % include('_card.css')
-  .card {
-      page-break-before: always;
-  }
+.card {
+    page-break-before: always;
+    width: 100vw;
+    min-height: 100vh;
+    border: 5vw solid #aaaaaa;
+}
+.title {
+    text-align: center;
+    font-size: 7vw;
+}
+.answer {
+    padding: 2vw;
+}
+.paragraph, .answer, .prompt {
+    font-size: 4vw;
+    padding-left: 4vw;
+    padding-right: 4vw;
+}
 </style>
 <body>
 % for card in cards: