Adds outlined version of loyalty symbols that a few cards use in the card text (#97)

css/mana.css

@@ -1073,6 +1073,9 @@ span.ms-half > .ms-cost {
 .ms-loyalty-start {
   font-size: 2em;
 }
+.ms-loyalty-zero::after {
+  line-height: 2.1em !important;
+}
 .ms-loyalty-0::after, .ms-loyalty-1::after, .ms-loyalty-2::after, .ms-loyalty-3::after, .ms-loyalty-4::after, .ms-loyalty-5::after, .ms-loyalty-6::after, .ms-loyalty-7::after, .ms-loyalty-8::after, .ms-loyalty-9::after, .ms-loyalty-10::after, .ms-loyalty-11::after, .ms-loyalty-12::after, .ms-loyalty-13::after, .ms-loyalty-14::after, .ms-loyalty-15::after, .ms-loyalty-16::after, .ms-loyalty-17::after, .ms-loyalty-18::after, .ms-loyalty-19::after, .ms-loyalty-20::after, .ms-loyalty-25::after, .ms-loyalty-x::after {
   color: #fff;
   display: inline-block;
@@ -1288,7 +1291,20 @@ span.ms-half > .ms-cost {
 .ms-loyalty-down.ms-loyalty-x::after {
   content: "-X";
 }
+.ms-loyalty-outline::before {
+  color: transparent;
+  -webkit-text-stroke: 0.03em #111;
+}
+.ms-loyalty-outline::after {
+  color: #111;
+}
+.ms-loyalty-outline.ms-loyalty-start {
+  font-size: 1.6em;
+}
 
+.ms-saga {
+  color: #111;
+}
 .ms-saga-1::after, .ms-saga-2::after, .ms-saga-3::after, .ms-saga-4::after, .ms-saga-5::after {
   color: #fff;
   display: inline-block;

index.html

@@ -247,7 +247,12 @@
             <i class="ms ms-loyalty-down ms-loyalty-x ms-3x"></i>
             <i class="ms ms-loyalty-zero ms-loyalty-0 ms-3x"></i>
             <i class="ms ms-loyalty-start ms-loyalty-4 ms-4x"></i>
-            &nbsp;&nbsp;
+            <i class="ms ms-loyalty-up ms-loyalty-2 ms-loyalty-outline"></i>
+            <i class="ms ms-loyalty-down ms-loyalty-1 ms-loyalty-outline"></i>
+            <i class="ms ms-loyalty-zero ms-loyalty-0 ms-loyalty-outline"></i>
+            <i class="ms ms-loyalty-start ms-loyalty-5 ms-loyalty-outline"></i>
+        </p>
+        <p class="grid">
             <i class="ms ms-saga ms-saga-1 ms-2x"></i>
             <i class="ms ms-saga ms-saga-2 ms-2x"></i>
             <i class="ms ms-saga ms-saga-3 ms-2x"></i>

less/loyalty.less

@@ -14,10 +14,13 @@
         text-align: center;
     }
 
-    // start
+    // variant alterations
     &-start {
         font-size: 2.0em; // increase the size a bit by default
     }
+    &-zero::after {
+        line-height: 2.1em !important; // slight correction
+    }
 
     // base styles for counters
     &-0::after,
@@ -132,6 +135,21 @@
         &.@{ms-prefix}-loyalty-x::after { content: "-X"; }
     }
 
+    // outline style for card text
+    &-outline {
+        &::before {
+            color: transparent;
+            -webkit-text-stroke: 0.03em #111;
+        }
+        &::after {
+            color: #111;
+        }
+        // correction for starting loyalty size
+        &.#{$ms-prefix}-loyalty-start {
+            font-size: 1.6em;
+        }
+    }
+
 }
 
 // saga loyalty

sass/_loyalty.scss

@@ -14,10 +14,13 @@
         text-align: center;
     }
 
-    // start
+    // variant alterations
     &-start {
         font-size: 2.0em; // increase the size a bit by default
     }
+    &-zero::after {
+        line-height: 2.1em !important; // slight correction
+    }
 
     // base styles for counters
     &-0::after,
@@ -137,6 +140,21 @@
             &-x::after { content: "-X"; }
         }
     }
+
+    // outline style for card text
+    &-outline {
+        &::before {
+            color: transparent;
+            -webkit-text-stroke: 0.03em #111;
+        }
+        &::after {
+            color: #111;
+        }
+        // correction for starting loyalty size
+        &.#{$ms-prefix}-loyalty-start {
+            font-size: 1.6em;
+        }
+    }
 }
 
 // saga loyalty