From 02efc0febfb5e1f09dcc2f3a8802e809a35e3671 Mon Sep 17 00:00:00 2001
From: Robert Maikher <robertem342@gmail.com>
Date: Mon, 1 Jan 2018 15:52:26 +0100
Subject: [PATCH] Place bottom of info box based on grid instead of absolute
 Specify line-height for bottom big elements to avoid ugly overlapping

---
 resources/cards/card.css | 10 ++++++----
 resources/cards/card.vm  |  2 ++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/resources/cards/card.css b/resources/cards/card.css
index 18d831f..ae0ba80 100644
--- a/resources/cards/card.css
+++ b/resources/cards/card.css
@@ -200,6 +200,10 @@ article main {
     grid-area: info;
     position: relative;
     font-size: 0.9em;
+    display:grid;
+    grid-template-areas:"top"
+    "bottom";
+    grid-template-rows: auto min-content;
 }
 article main ol {
     margin-top: 1mm;
@@ -214,13 +218,11 @@ article.item main ul {
 }
 article main big{
     font-size: 1.65em;
+    line-height: 1em;
 }
 article main .bottom {
-    width: 100%;
-    position: absolute;
+    grid-area: bottom;
     line-height: 1.1em;
-    bottom: 1mm;
-    left: 0;
 }
 
 center.message {
diff --git a/resources/cards/card.vm b/resources/cards/card.vm
index c3dde48..0e39270 100644
--- a/resources/cards/card.vm
+++ b/resources/cards/card.vm
@@ -142,6 +142,7 @@ transform:rotate(${fig.rotate}deg)"
     </section>
     
     <main>
+        <div class="top">
         $escape_html($card.description)
         #if($card.steps)
             <ol>
@@ -155,6 +156,7 @@ transform:rotate(${fig.rotate}deg)"
         #if($card.effects && $card_is_item)
             #effectList($card.effects)
         #end
+        </div>
         #if($card.flags)
             <div class="bottom">
                 <small>