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: