BAH

Makefile

@@ -9,6 +9,10 @@ all: build/test_card.html build/test_card_rendered.html $(CARDS_DESTS) cards/bui
 dev:
 	git ls-files | entr bash -c "make all"
 
+.PHONY: dev_test
+dev_test:
+	git ls-files | entr bash -c "make build/test_card_rendered.html"
+
 .PHONY: clean
 clean:
 	rm build/* cards/build/*

style.html.j2

@@ -45,6 +45,14 @@
             {% else %}
                 <img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}">
             {% endif %}
+        {% elif not figure.type %}
+            {% if figure.color == true %}
+                <img src="{{ figure.name }}" class="colored">
+            {% elif figure.color %}
+                <img src="{{ figure.name }}" class="colored" style="--figure-color: {{ figure.color }}">
+            {% else %}
+                <img src="{{ figure.name }}">
+            {% endif %}
         {% endif %}
     </div>
 {% endmacro %}
@@ -61,7 +69,7 @@
         <li>{{ property }}</li>
     {% endfor %}
     </ul></aside>
-    <summary>
+    <div class="costbar">
     {% for cost in card.costs %}
         <section>
         {% if cost.split() | length == 2 and cost.split()[0].isnumeric() %}
@@ -72,8 +80,8 @@
         {% endif %}
         </section>
     {% endfor %}
-    </summary>
-    <article>
+    </div>
+    <div class="description">
         <center><i>"{{ card.flavor }}"</i></center>
         <center>{{ card.description | markdown | safe }}</center>
         {% if card.steps %}
@@ -83,7 +91,7 @@
         {% endfor %}
         </ul>
         {% endif %}
-    </article>
+    </div>
 </div>
 
 {# <br><pre>{{ card }}</pre> #}

style.scss

@@ -89,7 +89,7 @@
             }
         }
     }
-    summary {
+    .costbar {
         grid-area: costbar;
         border-radius: 0;
         background-color: black;
@@ -108,7 +108,7 @@
             line-height: 0.9em;
         }
     }
-    article {
+    .description {
         grid-area: description;
         margin: 1mm;
         border-radius: 1mm;
@@ -145,11 +145,11 @@
 		color: #444 ;
 
 	}
-	summary {
+	.costbar {
         background-color: #555;
         color: white;
     }
-    article {
+    .description {
         background-color: #ddd;
     }
 }