From 9fba75b4a96cc5578bf1da2e436b56c2dcfdfe7c Mon Sep 17 00:00:00 2001
From: Joe Wreschnig <joe.wreschnig@gmail.com>
Date: Wed, 27 Aug 2014 15:04:17 +0200
Subject: [PATCH] Cost icons.

---
 cards.html         |   8 +++++++-
 heroik.appcache.in |   2 +-
 heroik.css         |  49 +++++++++++++++++++++++++++++++++------------
 sword.png          | Bin 0 -> 1382 bytes
 4 files changed, 44 insertions(+), 15 deletions(-)
 create mode 100644 sword.png

diff --git a/cards.html b/cards.html
index b720e23..726d746 100644
--- a/cards.html
+++ b/cards.html
@@ -66,7 +66,13 @@
       <div class=type>Weapon, Unique</div>
       <img class=art src="epee.jpg">
       <div class=effect>
-        <div class=cost><span class=r></span><span class=r></span><span class=r></span><span class=g></span><span class=g></span></div>
+        <div class=cost>
+          <span class=r><img src=sword.png></span>
+          <span class=r><img src=sword.png></span>
+          <span class=r><img src=sword.png></span>
+          <span class=g></span>
+          <span class=g></span>
+        </div>
         Once per combat, you may re-roll a combat die showing a 1. At
         the end of each round, if you lost at least one Courage token,
         you may place a Mana token on an adventurer.
diff --git a/heroik.appcache.in b/heroik.appcache.in
index 17465a5..956aef5 100644
--- a/heroik.appcache.in
+++ b/heroik.appcache.in
@@ -29,4 +29,4 @@ phoenix.jpg
 male.png
 female.png
 card.png
-
+sword.png
diff --git a/heroik.css b/heroik.css
index 6884d5e..c969f8e 100644
--- a/heroik.css
+++ b/heroik.css
@@ -432,9 +432,9 @@ table {
     text-align: center;
     width: 77%;
     border: solid white 0.1em;
-    border-radius: 0.4em;
+    border-radius: 0.6em;
     line-height: 1.6em;
-    height: 5.5%;
+    height: 5.4%;
     font-size: 0.85em;
     left: 11.5%;
     right: 11.5%;
@@ -506,36 +506,59 @@ table {
     width: 1.5em;
     height: 1.5em;
     border-radius: 1.5em;
-    border: solid black 0.75em;
     display: inline-block;
     box-sizing: border-box;
     margin: 0.5em 0.05em;
     box-shadow: 0 0 0.05em 0.05em black;
+    background-image: url(sword.png);
+    background-size: 0.2778em 1.3em;
+    background-position: center;
+    background-repeat: no-repeat;
+    text-align: center;
 }
 
-.card .cost span:before {
+.card .cost span:before, .card .cost span:after {
     position: absolute;
-    text-align: center;
-    left: -0.75em;
-    top: -0.75em;
-    color: black;
     line-height: 1.333em;
-    opacity: 0.5;
     width: 1.5em;
     height: 1.5em;
+    display: block;
+    transform-origin: 50% 65%;
+    background-image: url(sword.png);
+    background-size: 0.2778em 1.3em;
+    background-position: center;
+    background-repeat: no-repeat;
 }
 
+.card .cost .r:before {
+    transform: rotate(30deg);
+    -webkit-transform: rotate(30deg);
+    content: '';
+}
 
-.card .cost .r:before { content: 'r'; }
-.card .cost .g:before { content: 'g'; }
+.card .cost .r img {
+    /* :( would prefer with no extra elements... */
+    transform: rotate(60deg);
+    max-width: 1.3em;
+    position: absolute;
+    max-height: 1.3em;
+    transform-origin: 50% 65%;
+    left: 0.6em;
+    top: 0.1em;
+}
+
+.card .cost .r:after {
+    transform: rotate(-30deg);
+    -webkit-transform: rotate(-30deg);
+    content: '';
+}
 
 .card .cost .r {
+    transform: rotate(-15deg);
     background-color: #e4573c;
-    border-color: #e4573c;
 }
 .card .cost .g {
     background-color: #abbc45;
-    border-color: #abbc45;
 }
 
 .card .abilities .skill:before {
diff --git a/sword.png b/sword.png
new file mode 100644
index 0000000000000000000000000000000000000000..88924a933ab3e24da20c1fc329cd6e8b97bcd8f1
GIT binary patch
literal 1382
zcmV-s1)2JZP)<h;3K|Lk000e1NJLTq000>P004Ce1^@s6yWdJe00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru-Uu5E9wf5RZpr`v1oKHm
zK~!koy_!#G9Yq|+KfCX}q?X3UrY2Tw)Y?=rr3gKUh=L%c(3^r6Pl8tuUVF1Q&z^g&
z7kg+yD&j>bh#-hn6e-dg4O(l^+SaCd@9lWVZ|HQGnVp@Pbs*%ux4ZM*-~aD#X23rx
z3XM7du!9~)4Ge+z<@>M?NorsLco29MnDnKtMfv}F3H#IzTTFmM@_hoF090uZfR|<B
zA@Ce93P_!-t{LO)9|M+vK`D?1IPAFZ9blX)jq9ORU}{`z#M74La}khzmZ58LfVWE8
zWVhqDfyB;ADes!`q?r-$Y)ahNAbWuaJQ6D4cuK0VC!3eV7<$t;#M7!&kX`a{<x$xL
zcts>psUU3urzd}{M8wll%#MiEbqdHd5@-Q<C>3NwjM^624RBIyH0TPl2K?P2eXPVt
z?-KWy2+yfS;x|(x{<K7Q6X9ulfoD=c8sLWrqgF;vtGd>c5%5U|mu}kBTYDb*9oUQn
znWPwg3j70n8<{#(PQ-6SPBO{?IWGpCk~u<LSQ*lU#$q6I2SK!oE=HvF12RvQqOMq1
ze%xX=oj|lLeh$2)0%qIlep?0|2zxoy68R1AqYtQV@&74stp#8V9LueY-vBoPu55N?
zDivf4xE09CTII)cYy3~*Z7R^f?#}_KfDa>5%swA6j0HgqObf{FR1p34Uq{@3P#mO6
z0T}@oBJO=b?yph|-$)S~x7_nYj(0V{ZQx3a#B~mc5-Bz!9AwUpsjgi3dqXnccq)f*
zSHM>R5S=KWFTv_J1Cc)!BAyL$F_2<#^_*QmbiAC6V3k>tH1f=~K+89>fl@$}s4P@l
z=5s)l{Qc(1%36}ST*Cugm1aqKT8dpIKyHgGH=d~9Spq~?OCRwYlma>5QZ1`okXqV{
z?A9TsB>R|ST>?ZI6t?cmCdx|vE=j8rhOeaOr!SjmvT&<U5Uq;YK0$P{+~1Ppib!&x
zrGd(pM1v@gl*Meav(Jd{v{I41m1F@bYc(Sqq;ljgCADU~gt{8(-(A1o5uhU8wc?Rv
zt7I@f?V+oiB|#Phq_W80rIH|ZV9}=tNbT@U4RWVcWz_5RwWsb=3S`z1H*2npkP5O#
z76xn*amht2QbFcCOy#nW2$hpo^rZ8iXy3v^j#EHfi)`z_zpenS6I|D~C~!k0QMn*m
zk{yo8ZsJ+D@7iLI+1>(l1>u#FmGMRH-)GdM;mZ;rn$XQS()(2GQI(M7n1fJ{WG$>1
zkyy4IK-=SVXaQl^!F6YVM;y*@-EeJkLFR!+9oIe+39>-+#`0l@Bit3&Rk=1XkD1tf
z_hw9w(#7x(8!FLfTD~aNIyBr{BDcNj0ttJ+zH!uw@>*&~u@<`$_HIY>8Btm5X7n&p
ziapjF|6ycZazJ#OyyURQWt;D&s!Okqu3B!Z=(aZ;1kqmeq@}7Y;7>A+l$c}8_Hj5f
z!Uw=9GLMwlQT~#o6m6d=@K-Krwu5cax~_MGCOIHx^qw$Oq?6%#3KJX})ol!X0DLEG
z<e+iiMAURO2gDq!4$moideApUQWcM;Fr2Pz<!wui#X&T=d)LG0JAtTxBqQKG?wve{
z8Uv#+Rluj>MMn%~Xs$fm1wM*R@vgYgZ@UJ3%=X!pCAN1#^~r%Vz^`;X4><^^>N@bb
oaNK1nT<4?*>19;>Pa_%VKUc;f3L4Ofi~s-t07*qoM6N<$f*n_VR{#J2

literal 0
HcmV?d00001

-- 
2.30.2