Improve printable view.

[guiltcards] / views / cards_print.tpl
diff --git a/views/cards_print.tpl b/views/cards_print.tpl

index 99f88b0fe3fc4484743ae06a3441d2639646ece1..2c4d76b1472088559851fdf58844e08c0f75dc6f 100644 (file)
--- a/views/cards_print.tpl
+++ b/views/cards_print.tpl
@@ -1,32 +1,28 @@
-<!DOCTYPE HTML>
-<html>
+% include('_meta_head.tpl')
  <style>
-  .card {
-      page-break-before: always;
-      box-sizing: border-box;
-      border: 30px solid #aaaaaa;
-      width: 200px;
-      height: 400px; }
+% include('_card.css')
+.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:
-  <div class="card">
-    % if card["type"] == 'guilt':
-    <h1 id="title">GUILT CARD</h1>
-    <p id="prompt">Choose at least one of these guilts as your own:</p>
-    <ul id="answers">
-    % for answer in card["answers"]:
-      <li>{{ answer }}</li>
-    % end
-    <ul/>
-    % end
-    % if card["type"] == 'action':
-    <h1 id="title">ACTION CARD<br />{{ card["title"] }}</h1>
-    % for paragraph in card["paragraphs"]:
-    <p>{{ paragraph }}</p>
-    % end
-    % end
-  </div>
+% include('_card.tpl')
  % end
-</body>
-</html>
+<body>
+% include('_meta_foot.tpl')