Planeswalker loyalty symbols added with counter handling; adding MPlantin for the counter font

css/mana.css

@@ -7,6 +7,13 @@
   font-weight: normal;
   font-style: normal;
 }
+@font-face {
+  font-family: 'MPlantin';
+  src: url('../fonts/mplantin.eot?v=0.1');
+  src: url('../fonts/mplantin.eot?#iefix&v=0.1') format('embedded-opentype'), url('../fonts/mplantin.woff?v=0.1') format('woff'), url('../fonts/mplantin.ttf?v=0.1') format('truetype'), url('../fonts/mplantin.svg?v=0.1#mplantin') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
 .ms {
   display: inline-block;
   font: normal normal normal 14px/1 Mana;
@@ -403,6 +410,148 @@
   top: 0.5em;
   left: 1.0em;
 }
+/**
+ * Planesalker symbols */
+.ms-loyalty-up,
+.ms-loyalty-down,
+.ms-loyalty-zero,
+.ms-loyalty-start {
+  color: #111;
+  font-size: 1.5em;
+  position: relative;
+  text-align: center;
+}
+.ms-loyalty-start {
+  font-size: 2.0em;
+}
+.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-x:after {
+  color: #fff;
+  display: inline-block;
+  font-size: 0.5em;
+  font-family: 'MPlantin, Garamond, Palatino, ' Times New Roman ', Times, serif';
+  position: absolute;
+  left: 0;
+  line-height: 1.75em;
+  width: 100%;
+  text-align: center;
+  -webkit-padding-before: 0.15em;
+}
+.ms-loyalty-0:after {
+  content: "0";
+}
+.ms-loyalty-up.ms-loyalty-1:after {
+  content: "+1";
+}
+.ms-loyalty-up.ms-loyalty-2:after {
+  content: "+2";
+}
+.ms-loyalty-up.ms-loyalty-3:after {
+  content: "+3";
+}
+.ms-loyalty-up.ms-loyalty-4:after {
+  content: "+4";
+}
+.ms-loyalty-up.ms-loyalty-5:after {
+  content: "+5";
+}
+.ms-loyalty-up.ms-loyalty-6:after {
+  content: "+6";
+}
+.ms-loyalty-up.ms-loyalty-7:after {
+  content: "+7";
+}
+.ms-loyalty-up.ms-loyalty-8:after {
+  content: "+8";
+}
+.ms-loyalty-up.ms-loyalty-9:after {
+  content: "+9";
+}
+.ms-loyalty-up.ms-loyalty-10:after {
+  content: "+10";
+}
+.ms-loyalty-up.ms-loyalty-x:after {
+  content: "+X";
+}
+.ms-loyalty-start.ms-loyalty-1:after {
+  content: "1";
+}
+.ms-loyalty-start.ms-loyalty-2:after {
+  content: "2";
+}
+.ms-loyalty-start.ms-loyalty-3:after {
+  content: "3";
+}
+.ms-loyalty-start.ms-loyalty-4:after {
+  content: "4";
+}
+.ms-loyalty-start.ms-loyalty-5:after {
+  content: "5";
+}
+.ms-loyalty-start.ms-loyalty-6:after {
+  content: "6";
+}
+.ms-loyalty-start.ms-loyalty-7:after {
+  content: "7";
+}
+.ms-loyalty-start.ms-loyalty-8:after {
+  content: "8";
+}
+.ms-loyalty-start.ms-loyalty-9:after {
+  content: "9";
+}
+.ms-loyalty-start.ms-loyalty-10:after {
+  content: "10";
+}
+.ms-loyalty-start.ms-loyalty-x:after {
+  content: "X";
+}
+.ms-loyalty-down:after {
+  line-height: 1.6em;
+}
+.ms-loyalty-down.ms-loyalty-1:after {
+  content: "-1";
+}
+.ms-loyalty-down.ms-loyalty-2:after {
+  content: "-2";
+}
+.ms-loyalty-down.ms-loyalty-3:after {
+  content: "-3";
+}
+.ms-loyalty-down.ms-loyalty-4:after {
+  content: "-4";
+}
+.ms-loyalty-down.ms-loyalty-5:after {
+  content: "-5";
+}
+.ms-loyalty-down.ms-loyalty-6:after {
+  content: "-6";
+}
+.ms-loyalty-down.ms-loyalty-7:after {
+  content: "-7";
+}
+.ms-loyalty-down.ms-loyalty-8:after {
+  content: "-8";
+}
+.ms-loyalty-down.ms-loyalty-9:after {
+  content: "-9";
+}
+.ms-loyalty-down.ms-loyalty-10:after {
+  content: "-10";
+}
+.ms-loyalty-down.ms-loyalty-x:after {
+  content: "-X";
+}
 /**
  * Larger sizes */
 .ms-2x {
@@ -586,3 +735,17 @@
 .ms-2g:before {
   content: "\e607";
 }
+/**
+ * Planeswalker symbols */
+.ms-loyalty-up:before {
+  content: "\e627";
+}
+.ms-loyalty-down:before {
+  content: "\e625";
+}
+.ms-loyalty-zero:before {
+  content: "\e626";
+}
+.ms-loyalty-start:before {
+  content: "\e628";
+}

fonts/mana.svg

@@ -44,4 +44,8 @@
 <glyph unicode="&#xe622;" d="M344.202 847.256l0.062 0.026c26.388 10.12 41.806-11.078 48.006-21.066 34.394-48.494 48.456-107.258 73.394-160.532 33.756-70.772 70.594-142.82 129.324-196.414 7.722-8.288 22.994-15.808 29.684-7.97 24.574 28.798 44.454 61.138 62.342 94.47 11.548 22.988 37.158 37.654 62.768 36.838 20.296 0.568 38.608-12.432 49.874-28.514 25.892-39.388 38.326-85.296 55.646-128.688 21.324-45.764 44.526-91.954 80.62-128.084 21.396-19.978 44.632-37.902 64.646-59.368 10.98-9.74 17.144-23.306 21.96-36.838l0.472-1.374c4.776-37.66-16.41-55.512-28.56-64.12-23.662-18.844-51.858-30.712-80.302-40.24-95.816-34.004-197.208-51.898-298.464-56.25-164.854-7.086-229.674-0.142-246.464 2.764-61.528 5.49-122.666 15.762-182.742 30.144-49.378 13.602-99.818 27.346-143.812 54.478-17.144 10.202-49.844 22.678-40.79 74.212l0.516 0.67c9.234 33.918 35.174 59.686 58.8 84.622 17.428 23.732 41.834 41.090 59.26 64.786 41.408 53.24 71.8 114.166 95.64 177.004 21.82 55.080 34.606 113.208 53.982 169.138 9.706 36.060 24.088 70.772 41.55 103.786 7.792 14.558 18.526 27.594 32.588 36.52z" />
 <glyph unicode="&#xe623;" d="M511.888 960c1.322-2.424 1.492-5.23 2.006-7.888 2.114-14.104 2.926-28.358 4.006-42.568 2.442-37.858 4.392-75.748 6.764-113.612 4.006-61.898 8.562-123.854 17.542-185.27 4.392-28.986 9.59-57.978 18.47-85.966 11.734-0.876 23.476-1.738 35.186-3.020 5.8 17.122 8.65 35.052 11.632 52.834 2.648 16.622 4.882 33.314 6.95 50.018 7.972 65.25 13.526 130.76 19.548 196.208 1.37 13.486 2.266 27.048 4.48 40.428 1.112-2.894 1.366-6.010 1.86-9.044 1.296-9.158 2.272-18.354 3.262-27.552 6.29-61.188 11.844-122.464 19.7-183.48 3.63-28.002 7.622-55.972 12.948-83.714 3.592-18.118 7.426-36.302 13.898-53.654 10.892-3.318 21.7-6.962 32.172-11.442 3.282 7.514 5.75 15.358 8.074 23.216 5.85 20.416 9.906 41.298 13.454 62.216 7.634 45.13 12.142 90.7 18.106 136.060 1.574 10.344 2.628 20.874 5.896 30.856 1.606-4.278 2.070-8.86 2.818-13.334 2.894-20.486 4.856-41.088 6.918-61.67 2.088-22.354 4.33-44.694 5.998-67.078 0.064 0.26 0.19 0.768 0.254 1.028-0.032-3.148 0.286-6.276 0.604-9.406 4.574-53.926 8.98-107.874 12.984-161.846-30.692-11.608-59.716-27.538-86.25-46.812-35.504-25.806-66.412-57.71-92.028-93.296-26.706-37.122-47.852-78.178-63.022-121.298-19.078-54.276-29.842-111.168-35.648-168.312-1.878-17.548-3.034-35.16-4.818-52.71-0.646-4.684-0.762-9.628-3.020-13.892h-1.118c-2.068 3.154-2.196 7.052-2.78 10.65-1.37 11.646-2.132 23.348-3.204 35.020-2.698 31.468-6.532 62.864-12.408 93.906-9.648 50.772-24.232 100.918-46.99 147.452-26.028 53.368-61.848 102.294-106.738 141.34-33.276 28.972-71.534 52.314-112.812 67.978 5.698 75.126 11.722 150.244 18.704 225.268 2.372 24.372 4.626 48.768 7.976 73.024 0.7 4.424 1.244 8.904 2.546 13.196 0.172-0.032 0.52-0.090 0.692-0.122 2.71-8.77 3.782-17.954 5.166-27.004 4.76-35.084 8.34-70.314 13.354-105.368 3.992-28.090 8.492-56.16 15.346-83.718 3.084-11.982 6.448-23.958 11.34-35.35 10.472 4.512 21.306 8.11 32.192 11.474 4.062 10.814 6.986 22.010 9.602 33.25 3.966 17.434 7.102 35.040 9.906 52.696 11.386 72.878 18.044 146.38 25.458 219.74 1.35 13.194 2.658 26.402 4.384 39.552 0.636 4.17 0.984 8.422 2.342 12.44 1.466-9.184 2.266-18.456 3.206-27.704 5.864-62.298 11.030-124.68 18.138-186.858 3.414-29.55 7.058-59.1 12.312-88.39 2.362-12.362 4.692-24.814 8.924-36.702 11.71 1.054 23.42 2.126 35.154 2.908 8.784 27.588 13.932 56.166 18.298 84.74 4.778 31.986 8.18 64.164 11.056 96.374 4.848 54.93 7.932 109.994 11.068 165.038 1.524 24.37 2.678 48.786 5.28 73.074 0.674 5.402 1.232 10.872 2.862 16.096z" />
 <glyph unicode="&#xe624;" d="M409 898h0.43c18.57-4.35 38.91-7.41 54.060-19.98 5.22-3.63 5.31-10.14 5.43-15.87-18.99-1.32-37.71 5.010-56.67 2.1-29.46-3.75-60.72-13.020-80.55-36.48-17.79-21.33-19.080-51.36-13.98-77.52 4.86-26.55 25.53-46.5 46.89-61.17 33.54-21.33 71.94-34.11 104.040-57.87 33.87-23.7 57.33-59.19 91.35-82.71 11.88-8.19 25.71-14.67 40.5-13.89 22.62-1.62 44.94 12.99 53.79 33.57 11.79 38.73-5.88 85.32-41.91 104.7-24.39 13.65-51.96 19.71-77.67 30.21-6.9 2.61-13.86 7.11-15.27 14.91 1.29 5.070 4.5 10.17 10.14 10.92 41.28 6.15 83.010-4.47 120.6-21.3 55.83-29.010 106.53-69.18 143.79-120.18 35.97-47.79 56.070-105.57 66.99-163.86 1.89-13.71 3.99-27.36 6.54-40.95v-88.29c-6.33-41.040-14.070-82.53-31.95-120.39-26.22-58.29-69.75-109.74-125.61-141.48-33.15-19.5-44.988-36.762-187.504-34.314v0c-16.216 4.742-21.176 10.254-23.996 20.874 4.41 14.91 21.51 19.11 34.8 22.32 14.49 3.78 33.030 4.89 40.71 19.98-4.050 17.4-21.42 26.55-36.81 32.28-23.25 8.58-48.81 7.65-73.020 4.68-35.1-6.3-67.17-26.61-103.62-25.65-44.58 0.75-86.76 20.22-122.28 46.020-25.71 18.39-45.57 43.83-60.87 71.25-10.74 19.23-33.35 61.59-20.85 117.59v0.49c6.75 35.16 19.89 71.31 47.79 95.22 18.3 13.98 39.81 25.98 63.27 27.030 8.76-0.24 19.8-1.080 24.87-9.39-0.39-3.39-2.13-5.85-5.13-7.41-11.4-7.47-25.47-12.090-33.21-24.060-14.52-19.77-15.87-45.81-12.33-69.27 5.79-28.98 26.37-53.64 51.69-68.13 20.19-11.58 41.97-20.67 64.83-25.2 20.55-4.2 41.49-5.386 62.37-6.3 20.744-0.908 38.176 2.152 56.4 1.98 25.202-0.236 51.060-2.1 74.67-12.21 31.62-13.8 60.51-36.3 77.070-67.050 6.3-11.97 7.83-25.77 14.22-37.68 14.1 2.67 20.43 17.19 24.69 29.31 10.38 28.080 1.47 58.86-10.53 84.9-18.96 39.27-56.34 66.99-97.47 79.53-39 12.54-81.48 6.72-120.060 20.82-17.94 6.3-31.77 20.19-43.65 34.5-7.35 8.82-11.34 21.030-7.17 32.19 17.58 4.38 33.96-9.24 51.6-6.78 15 3.39 25.44 17.25 28.44 31.77 6.51 22.29 0.93 47.040-13.56 65.010-19.41 24.15-47.85 38.88-76.44 49.41-32.040 12.3-66.99 17.46-96.72 35.4-32.34 20.25-60.24 49.83-72.75 86.43-12.18 31.77-12.090 66.39-10.56 99.9 3.15 31.68 17.010 61.53 35.79 86.91 12.21 16.98 29.85 28.8 47.28 39.81 20.73 13.14 68.1 31.87 127.1 23.37z" />
+<glyph unicode="&#xe625;" d="M1023.542 757.102c-597.826 80.282-1023.080 2.924-1023.084 0 0 0 76.076-228.262 51.882-456.38 176.272-119.82 459.694-198.164 459.694-198.164h-0.744c0 0 283.42 78.344 459.694 198.164h-2.162c-24.194 228.118 51.882 456.38 51.882 456.38h2.838z" />
+<glyph unicode="&#xe626;" d="M0.458 204.564c0 0 73.542 234.766-0.458 491.328 0 0 314 50.108 512 50.108 216 0 512-54.28 512-54.28-72-241.96-3.296-487.156-3.296-487.156s-314.704-54.564-508.704-54.564c-194 0-511.542 54.564-511.542 54.564z" />
+<glyph unicode="&#xe627;" d="M1023.542 138.898c-597.826-80.282-1023.080-2.924-1023.084 0 0 0 80.236 228.742 51.882 456.38-0.34 2.722 455.66 220.722 455.66 220.722h2c0 0 460.984-220.722 460.984-220.722h-2.162c-24.194-228.118 51.882-456.38 51.882-456.38h2.838z" />
+<glyph unicode="&#xe628;" d="M1.392 642.22h1021.216c0 0-52.732-73.74-67.842-169.44-15.112-95.702-0.19-171.256-0.19-171.256l-442.576-154.010-439.612 154.010c0 0 12.672 75.554 2.598 161.182-10.074 85.626-73.594 179.514-73.594 179.514zM713.87 754.952c-24.072-75.98-137.008-100.988-201.87-101.902-24.958 0.812-33.684 0.396-62.126 6.046-51.174 10.164-117.544 37.27-138.822 92.938l-2.208-0.024-307.452-109.79h1021.216l-308.738 112.732z" />
 </font></defs></svg>

index.html

@@ -117,6 +117,13 @@
         <i class="ms ms-planeswalker ms-2x"></i>
         <i class="ms ms-sorcery ms-2x"></i>
     </p>
+    <h3>Planeswalker symbols</h3>
+    <p>
+        <i class="ms ms-loyalty-up ms-loyalty-3 ms-3x"></i>
+        <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>
+    </p>
     <footer>
         Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
     </footer>

less/icons.less

@@ -85,3 +85,11 @@
 .@{prefix}-2b:before,
 .@{prefix}-2r:before,
 .@{prefix}-2g:before { content: "\e607"; } // 2
+
+/**
+ * Planeswalker symbols */
+
+ .@{prefix}-loyalty-up:before { content: "\e627"; } // Up
+ .@{prefix}-loyalty-down:before { content: "\e625"; } // Up
+ .@{prefix}-loyalty-zero:before { content: "\e626"; } // Up
+ .@{prefix}-loyalty-start:before { content: "\e628"; } // Up

less/loyalty.less

@@ -0,0 +1,87 @@
+/**
+ * Planesalker symbols */
+
+.@{prefix}-loyalty {
+
+    // All
+    &-up,
+    &-down,
+    &-zero,
+    &-start {
+        color: #111;
+        font-size: 1.5em;
+        position: relative;
+        text-align: center;
+    }
+
+    // Start
+    &-start {
+        font-size: 2.0em; // increase the size a bit by default
+    }
+
+    // Counters
+    &-0:after,
+    &-1:after,
+    &-2:after,
+    &-3:after,
+    &-4:after,
+    &-5:after,
+    &-6:after,
+    &-7:after,
+    &-8:after,
+    &-9:after,
+    &-10:after,
+    &-x:after {
+        color: #fff;
+        display: inline-block;
+        font-size: 0.5em;
+        font-family: @serif-font;
+        position: absolute;
+        left: 0;
+        line-height: 1.75em;
+        width: 100%;
+        text-align: center;
+        -webkit-padding-before: 0.15em; // fix for odd webkit line-height
+    }
+    &-0:after { content: "0"; }
+    &-up {
+        &.@{prefix}-loyalty-1:after { content: "+1"; }
+        &.@{prefix}-loyalty-2:after { content: "+2"; }
+        &.@{prefix}-loyalty-3:after { content: "+3"; }
+        &.@{prefix}-loyalty-4:after { content: "+4"; }
+        &.@{prefix}-loyalty-5:after { content: "+5"; }
+        &.@{prefix}-loyalty-6:after { content: "+6"; }
+        &.@{prefix}-loyalty-7:after { content: "+7"; }
+        &.@{prefix}-loyalty-8:after { content: "+8"; }
+        &.@{prefix}-loyalty-9:after { content: "+9"; }
+        &.@{prefix}-loyalty-10:after { content: "+10"; }
+        &.@{prefix}-loyalty-x:after { content: "+X"; }
+    }
+    &-start {
+        &.@{prefix}-loyalty-1:after { content: "1"; }
+        &.@{prefix}-loyalty-2:after { content: "2"; }
+        &.@{prefix}-loyalty-3:after { content: "3"; }
+        &.@{prefix}-loyalty-4:after { content: "4"; }
+        &.@{prefix}-loyalty-5:after { content: "5"; }
+        &.@{prefix}-loyalty-6:after { content: "6"; }
+        &.@{prefix}-loyalty-7:after { content: "7"; }
+        &.@{prefix}-loyalty-8:after { content: "8"; }
+        &.@{prefix}-loyalty-9:after { content: "9"; }
+        &.@{prefix}-loyalty-10:after { content: "10"; }
+        &.@{prefix}-loyalty-x:after { content: "X"; }
+    }
+    &-down {
+        &:after{ line-height: 1.6em; }
+        &.@{prefix}-loyalty-1:after { content: "-1"; }
+        &.@{prefix}-loyalty-2:after { content: "-2"; }
+        &.@{prefix}-loyalty-3:after { content: "-3"; }
+        &.@{prefix}-loyalty-4:after { content: "-4"; }
+        &.@{prefix}-loyalty-5:after { content: "-5"; }
+        &.@{prefix}-loyalty-6:after { content: "-6"; }
+        &.@{prefix}-loyalty-7:after { content: "-7"; }
+        &.@{prefix}-loyalty-8:after { content: "-8"; }
+        &.@{prefix}-loyalty-9:after { content: "-9"; }
+        &.@{prefix}-loyalty-10:after { content: "-10"; }
+        &.@{prefix}-loyalty-x:after { content: "-X"; }
+    }
+}

less/mana.less

@@ -2,5 +2,6 @@
 @import "path.less";
 @import "core.less";
 @import "cost.less";
+@import "loyalty.less";
 @import "sizes.less";
 @import "icons.less";

less/path.less

@@ -8,3 +8,14 @@
     font-weight: normal;
     font-style: normal;
 }
+
+@font-face {
+    font-family: 'MPlantin';
+    src:url( '@{font-path}/mplantin.eot?v=@{version}' );
+    src:url( '@{font-path}/mplantin.eot?#iefix&v=@{version}') format( 'embedded-opentype' ),
+        url( '@{font-path}/mplantin.woff?v=@{version}') format( 'woff' ),
+        url( '@{font-path}/mplantin.ttf?v=@{version}') format( 'truetype' ),
+        url( '@{font-path}/mplantin.svg?v=@{version}#mplantin') format( 'svg' );
+    font-weight: normal;
+    font-style: normal;
+}

less/variables.less

@@ -5,3 +5,4 @@
 @version: '0.1';
 @font-size-base: 14px;
 @prefix: ms;
+@serif-font: 'MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif';