From dcd89b391cd36155dcb8f33202e04ed6fa40cce5 Mon Sep 17 00:00:00 2001
From: Peder Bergebakken Sundt <pbsds@hotmail.com>
Date: Tue, 17 Oct 2017 18:48:23 +0200
Subject: [PATCH] Turn colored SVGS into siluettes

---
 resources/cards/card.css | 11 ++++++++++-
 resources/cards/card.vm  |  1 +
 resources/cards/svg.css  |  2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/resources/cards/card.css b/resources/cards/card.css
index 91116df..ff03bc7 100644
--- a/resources/cards/card.css
+++ b/resources/cards/card.css
@@ -84,7 +84,16 @@ article figure img{
     margin: auto auto;
 }
 article figure img.svg{
-    filter: invert(1) opacity(0.6);
+    filter: brightness(0) invert(1) opacity(0.6);
+}
+article figure div.svg {
+    display: block;
+    height: 97%;
+    width: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    filter: brightness(0) invert(1) opacity(0.6);
 }
 article figure .mdi,
 article figure .fa,
diff --git a/resources/cards/card.vm b/resources/cards/card.vm
index 2711ddd..572827c 100644
--- a/resources/cards/card.vm
+++ b/resources/cards/card.vm
@@ -24,6 +24,7 @@
         #elseif($card.figure_source == "svg")
             <!--/cards/svg-->
             <img class="svg" src="/svg/${escape_html($card.figure)}.svg">
+            <!--<div class="svg" style="background-image:url('/svg/${escape_html($card.figure)}.svg');"></div>-->
         #end
     </figure>
     #if($card.effects)
diff --git a/resources/cards/svg.css b/resources/cards/svg.css
index 4459fef..35c4ee8 100644
--- a/resources/cards/svg.css
+++ b/resources/cards/svg.css
@@ -34,7 +34,7 @@ img {
     margin: 0 auto;
     
     /*filter: invert(1) opacity(0.8);*/
-    filter: opacity(0.8);
+    filter: brightness(0) opacity(0.8);
 }
 
 body >h1,