Improve printable view.

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

index a649ac6c4d03388659d4e1ca18ac7f07d0f92e34..2c4d76b1472088559851fdf58844e08c0f75dc6f 100644 (file)
--- a/views/cards_print.tpl
+++ b/views/cards_print.tpl
@@ -1,24 +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">
-    <h1 class="title">{{ card["title"] }}</h1>
-    <p class="prompt">{{ card["prompt"] }}</p>
-    <ul class="answers">
-    % for answer in card["answers"]:
-      <li>{{ answer }}</li>
-    % end
-    <ul/>
-  </div>
+% include('_card.tpl')
  % end
-</body>
-</html>
+<body>
+% include('_meta_foot.tpl')