Add tweaked design for items, draw cards and titles

resources/cards/card.css

@@ -59,6 +59,14 @@ article.effects {
         "bar bar"
         "info info";
 }
+article.item {
+    grid-template-rows: 2em 36mm 2.5em auto;
+    grid-template-areas:
+        "header"
+        "figure"
+        "bar"
+        "info";
+}
 
 article >* {
     background-color: #ddd;
@@ -105,11 +113,19 @@ article figure .material-icons.figure {
     font-size: 20mm;
     line-height: 22mm;
 }
+article.item figure .mdi,
+article.item figure .fa,
+article.item figure .material-icons.figure {
+    font-size: 38mm;
+    line-height: 40mm;
+}
 
 article ul {
     grid-area: effects;
     list-style-type: none;
     padding: 1mm 0;
+}
+article.effects ul {
     margin-left: -1.5mm;
 }
 
@@ -179,13 +195,17 @@ article main ol {
 article main ol li + li{
     margin-top: 0.5mm;
 }
+article.item main ul {
+    margin-top: 1mm;
+}
 article main big{
     font-size: 1.65em;
 }
 article main .bottom {
     width: 100%;
     position: absolute;
-    bottom: 2mm;
+    line-height: 1.1em;
+    bottom: 1mm;
     left: 0;
 }
 

resources/cards/card.vm

@@ -54,23 +54,39 @@
         <small>$escape_html($match)</small>
     </div>
 #end
+#macro(effectList $effects)
+    <ul>
+        #foreach($effect in $effects)
+            #if($effect)
+                <li>$escape_html($effect)</li>
+            #end
+        #end
+    </ul>
+#end
 
 <title>Cards</title>
 
 #foreach($card in $cards)
-<article #if($card.effects) class="effects"#end onclick="location.href='creator?filename=$escape_html($card.filename)'">
+
+#set($card_is_item = false)
+#foreach($flag in ["Consumable", "Title", "Food", "Trinket", "Crafting Material", "Collectible", "Alchemy Material", "Ammo", "Splash", "Thrown", "Draw Card"])
+    #if($card.flags.__contains__($flag)) #set($card_is_item = true) #end
+    #if($card.flags.__contains__($flag.lower())) #set($card_is_item = true) #end
+#end
+
+#if($card_is_item)
+<article #if class="item" onclick="location.href='creator?filename=$escape_html($card.filename)'">
+#elseif($card.effects)
+<article #if class="effects" onclick="location.href='creator?filename=$escape_html($card.filename)'">
+#else
+<article onclick="location.href='creator?filename=$escape_html($card.filename)'">
+#end
     <h1>$escape_html($card.title)</h1>
     <figure>
         #figure($card)
     </figure>
-    #if($card.effects)
-        <ul>
-            #foreach($effect in $card.effects)
-                #if($effect)
-                    <li>$escape_html($effect)</li>
-                #end
-            #end
-        </ul>
+    #if($card.effects && ! $card_is_item)
+        #effectList($card.effects)
     #end
     
     <section>
@@ -110,6 +126,9 @@
                 #end
             </ol>
         #end
+        #if($card.effects && $card_is_item)
+            #effectList($card.effects)
+        #end
         #if($card.flags)
             <div class="bottom">
                 <small>