Adds Goad ability (#101), land DFC (#58), and commander type (#59). Adds initial support for level symbol (#60). Fixes internal font name.

css/mana.css

@@ -1,14 +1,14 @@
 @font-face {
   font-family: 'Mana';
-  src: url('../fonts/mana.eot?v=1.15.3');
+  src: url('../fonts/mana.eot?v=1.15.4');
-  src: url('../fonts/mana.eot?#iefix&v=1.15.3') format('embedded-opentype'), url('../fonts/mana.woff?v=1.15.3') format('woff'), url('../fonts/mana.ttf?v=1.15.3') format('truetype'), url('../fonts/mana.svg?v=1.15.3#mana') format('svg');
+  src: url('../fonts/mana.eot?#iefix&v=1.15.4') format('embedded-opentype'), url('../fonts/mana.woff?v=1.15.4') format('woff'), url('../fonts/mana.ttf?v=1.15.4') format('truetype'), url('../fonts/mana.svg?v=1.15.4#mana') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'MPlantin';
-  src: url('../fonts/mplantin.eot?v=1.15.3');
+  src: url('../fonts/mplantin.eot?v=1.15.4');
-  src: url('../fonts/mplantin.eot?#iefix&v=1.15.3') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.15.3') format('woff'), url('../fonts/mplantin.ttf?v=1.15.3') format('truetype'), url('../fonts/mplantin.svg?v=1.15.3#mplantin') format('svg');
+  src: url('../fonts/mplantin.eot?#iefix&v=1.15.4') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.15.4') format('woff'), url('../fonts/mplantin.ttf?v=1.15.4') format('truetype'), url('../fonts/mplantin.svg?v=1.15.4#mplantin') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -162,6 +162,9 @@
 .ms-artifact::before {
   content: "\e61e";
 }
+.ms-commander::before {
+  content: "\e9c6";
+}
 .ms-conspiracy::before {
   content: "\e972";
 }
@@ -298,36 +301,45 @@
 .ms-loyalty-start::before {
   content: "\e628";
 }
-.ms-dfc-night::before {
+.ms-level::before {
-  content: "\e905";
+  content: "\e9c7";
+}
+.ms-level::after {
+  content: "\e9c8";
 }
 .ms-dfc-day::before {
   content: "\e906";
 }
-.ms-dfc-ignite::before {
-  content: "\e908";
-}
-.ms-dfc-spark::before {
-  content: "\e909";
-}
 .ms-dfc-emrakul::before {
   content: "\e90a";
 }
-.ms-dfc-lesson::before {
-  content: "\e98f";
-}
-.ms-dfc-moon::before {
-  content: "\e90b";
-}
 .ms-dfc-enchantment::before {
   content: "\e920";
 }
-.ms-dfc-modal-face::before {
+.ms-dfc-ignite::before {
-  content: "\e983";
+  content: "\e908";
+}
+.ms-dfc-land::before {
+  content: "\e9c5";
+}
+.ms-dfc-lesson::before {
+  content: "\e98f";
 }
 .ms-dfc-modal-back::before {
   content: "\e984";
 }
+.ms-dfc-modal-face::before {
+  content: "\e983";
+}
+.ms-dfc-moon::before {
+  content: "\e90b";
+}
+.ms-dfc-night::before {
+  content: "\e905";
+}
+.ms-dfc-spark::before {
+  content: "\e909";
+}
 .ms-flashback::before {
   content: "\e629";
 }
@@ -657,6 +669,9 @@
 .ms-ability-foretell::before {
   content: "\e990";
 }
+.ms-ability-goad::before {
+  content: "\e9c9";
+}
 .ms-ability-haste::before {
   content: "\e953";
 }
@@ -1517,6 +1532,29 @@ span.ms-half > .ms-cost {
 .ms-saga-5::after {
   content: "V";
 }
+/**
+ * Level card levels */
+.ms-level > span {
+  font-size: 0.33em;
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: #000;
+  font-family: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;
+  width: 76%;
+  text-align: center;
+  line-height: 3.8;
+}
+.ms-level::after {
+  color: rgba(0, 0, 0, 0.25);
+  display: block;
+  font-size: 1em;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
 .ms-dfc {
   color: #111;
   border: 0.05em solid #111;

index.html

@@ -37,6 +37,11 @@
         p {
             margin: 10px 0 20px;
         }
+        p.grid {
+             display:flex;
+             flex-wrap:wrap;
+             gap: 0.5rem;
+        }
         footer {
             border-top: 1px solid #eee;
             margin: 40px 0 0;
@@ -247,11 +252,13 @@
             <i class="ms ms-saga ms-saga-2 ms-2x"></i>
             <i class="ms ms-saga ms-saga-3 ms-2x"></i>
             <i class="ms ms-saga ms-saga-4 ms-2x"></i>
+            &nbsp;&nbsp;
+            <i class="ms ms-level ms-3x"><span>1-2</span></i>
         </p>
     </div>
     <div class="right">
         <h3>Arena Ability Symbols</h3>
-        <p style="display:flex; flex-wrap:wrap; gap: 0.5rem;">
+        <p class="grid">
             <i class="ms ms-ability-activated ms-2x ms-fw" title="Activated"></i>
             <i class="ms ms-ability-adamant ms-2x ms-fw" title="Adamant"></i>
             <i class="ms ms-ability-adapt ms-2x ms-fw" title="Adapt"></i>
@@ -298,6 +305,7 @@
             <i class="ms ms-ability-flying ms-2x ms-fw" title="Flying"></i>
             <i class="ms ms-ability-for-mirrodin ms-2x ms-fw" title="For Mirrodin!"></i>
             <i class="ms ms-ability-foretell ms-2x ms-fw" title="Foretell"></i>
+            <i class="ms ms-ability-goad ms-2x ms-fw" title="Goad"></i>
             <i class="ms ms-ability-haste ms-2x ms-fw" title="Haste"></i>
             <i class="ms ms-ability-hexproof ms-2x ms-fw" title="Hexproof: Generic"></i>
             <i class="ms ms-ability-hexproof-white ms-2x ms-fw" title="Hexproof: White"></i>
@@ -347,12 +355,12 @@
             <i class="ms ms-ability-ward ms-2x ms-fw" title="Ward"></i>
         </p>
         <h3>Arena Exclusive Counters</h3>
-        <p>
+        <p class="grid">
             <i class="ms ms-counter-shield ms-2x ms-fw" title="Shield"></i>
             <i class="ms ms-counter-stun ms-2x ms-fw" title="Stun"></i>
         </p>
         <h3>Magic Online Counters</h3>
-        <p>
+        <p class="grid">
             <i class="ms ms-counter-arrow ms-2x ms-fw"></i>
             <i class="ms ms-counter-brick ms-2x ms-fw"></i>
             <i class="ms ms-counter-charge ms-2x ms-fw"></i>
@@ -383,8 +391,9 @@
             <i class="ms ms-counter-vortex ms-2x ms-fw"></i>
         </p>
         <h3>Future Sight and other type symbols</h3>
-        <p>
+        <p class="grid">
             <i class="ms ms-artifact ms-2x ms-fw" title="Artifact"></i>
+            <i class="ms ms-commander ms-2x ms-fw" title="Commander"></i>
             <i class="ms ms-creature ms-2x ms-fw" title="Creature"></i>
             <i class="ms ms-enchantment ms-2x ms-fw" title="Enchantment"></i>
             <i class="ms ms-instant ms-2x ms-fw" title="Instant"></i>
@@ -404,7 +413,7 @@
             <i class="ms ms-vanguard ms-2x ms-fw" title="Vangaurd"></i>
         </p>
         <h3>Double-faced card symbols</h3>
-        <p>
+        <p class="grid">
             <i class="ms ms-dfc ms-dfc-day ms-2x ms-fw"></i>
             <i class="ms ms-dfc ms-dfc-night ms-2x ms-fw"></i>
             <i class="ms ms-dfc ms-dfc-spark ms-2x ms-fw"></i>
@@ -413,12 +422,13 @@
             <i class="ms ms-dfc ms-dfc-emrakul ms-2x ms-fw"></i>
             <i class="ms ms-dfc ms-dfc-enchantment ms-2x ms-fw"></i>
             <i class="ms ms-dfc ms-dfc-lesson ms-2x ms-fw"></i>
+            <i class="ms ms-dfc ms-dfc-land ms-2x ms-fw"></i>
             &nbsp;&nbsp;
             <i class="ms ms-dfc-modal-face ms-2x ms-fw"></i>
             <i class="ms ms-dfc-modal-back ms-2x ms-fw"></i>
         </p>
         <h3>Guild Symbols</h3>
-        <p>
+        <p class="grid">
             <i class="ms ms-guild-azorius ms-2x ms-fw"></i>
             <i class="ms ms-guild-boros ms-2x ms-fw"></i>
             <i class="ms ms-guild-dimir ms-2x ms-fw"></i>
@@ -431,7 +441,7 @@
             <i class="ms ms-guild-simic ms-2x ms-fw"></i>
         </p>
         <h3>Clan Symbols</h3>
-        <p>
+        <p class="grid">
             <i class="ms ms-clan-abzan ms-2x ms-fw"></i>
             <i class="ms ms-clan-jeskai ms-2x ms-fw"></i>
             <i class="ms ms-clan-mardu ms-2x ms-fw"></i>
@@ -445,7 +455,7 @@
             <i class="ms ms-clan-silumgar ms-2x ms-fw"></i>
         </p>
         <h3>Strixhaven School Symbols</h3>
-        <p>
+        <p class="grid">
             <i class="ms ms-school-lorehold ms-2x ms-fw"></i>
             <i class="ms ms-school-lorehold ms-duo ms-duo-color ms-2x ms-fw"></i>
             &nbsp;

less/icons.less

@@ -54,6 +54,7 @@
 
     // card types
     &-artifact::before { content: "\e61e"; }
+    &-commander::before { content: "\e9c6"; }
     &-conspiracy::before { content: "\e972"; }
     &-creature::before { content: "\e61f"; }
     &-enchantment::before { content: "\e620"; }
@@ -143,18 +144,25 @@
         &-start::before { content: "\e628"; } // Start
     }
 
+    // levelers
+    &-level {
+        &::before { content: "\e9c7"; }
+        &::after { content: "\e9c8"; }
+    }
+
     // double-faced cards
     &-dfc {
-        &-night::before { content: "\e905"; }
         &-day::before { content: "\e906"; }
-        &-ignite::before { content: "\e908"; }
-        &-spark::before { content: "\e909"; }
         &-emrakul::before { content: "\e90a"; }
-        &-lesson::before { content: "\e98f"; }
-        &-moon::before { content: "\e90b"; }
         &-enchantment::before { content: "\e920"; }
-        &-modal-face::before { content: "\e983"; }
+        &-ignite::before { content: "\e908"; }
+        &-land::before { content: "\e9c5"; }
+        &-lesson::before { content: "\e98f"; }
         &-modal-back::before { content: "\e984"; }
+        &-modal-face::before { content: "\e983"; }
+        &-moon::before { content: "\e90b"; }
+        &-night::before { content: "\e905"; }
+        &-spark::before { content: "\e909"; }
     }
 
     // other card elements
@@ -289,6 +297,7 @@
         &-flying::before { content: "\e952"; }
         &-for-mirrodin::before { content: "\e9c1"; }
         &-foretell::before { content: "\e990"; }
+        &-goad::before { content: "\e9c9"; }
         &-haste::before { content: "\e953"; }
         &-hexproof {
             &::before { content: "\e954"; }

less/loyalty.less

@@ -160,3 +160,35 @@
     &-5::after { content: "V"; }
 
 }
+
+/**
+ * Level card levels */
+
+.@{ms-prefix}-level {
+
+    // level numbers must be in a span for now unfortunately
+    > span {
+        font-size: 0.33em;
+        position: absolute;
+        left: 0;
+        top: 0;
+        color: #000;
+        font-family: @ms-serif-font;
+        width: 76%;
+        text-align: center;
+        line-height: 3.8;
+    }
+
+    // alt border similar to duo handling
+    &::after {
+        color: rgba(0,0,0,0.25);
+        display: block;
+        font-size: 1em;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+}

sass/_icons.scss

@@ -54,6 +54,7 @@
 
     // card types
     &-artifact::before { content: "\e61e"; }
+    &-commander::before { content: "\e9c6"; }
     &-conspiracy::before { content: "\e972"; }
     &-creature::before { content: "\e61f"; }
     &-enchantment::before { content: "\e620"; }
@@ -144,18 +145,25 @@
         &-start::before { content: "\e628"; } // start
     }
 
+    // levelers
+    &-level {
+        &::before { content: "\e9c7"; }
+        &::after { content: "\e9c8"; }
+    }
+
     // double-faced cards
     &-dfc {
-        &-night::before { content: "\e905"; }
         &-day::before { content: "\e906"; }
-        &-ignite::before { content: "\e908"; }
-        &-spark::before { content: "\e909"; }
         &-emrakul::before { content: "\e90a"; }
-        &-lesson::before { content: "\e98f"; }
-        &-moon::before { content: "\e90b"; }
         &-enchantment::before { content: "\e920"; }
-        &-modal-face::before { content: "\e983"; }
+        &-ignite::before { content: "\e908"; }
+        &-land::before { content: "\e9c5"; }
+        &-lesson::before { content: "\e98f"; }
         &-modal-back::before { content: "\e984"; }
+        &-modal-face::before { content: "\e983"; }
+        &-moon::before { content: "\e90b"; }
+        &-night::before { content: "\e905"; }
+        &-spark::before { content: "\e909"; }
     }
 
     // other card elements
@@ -290,6 +298,7 @@
         &-flying::before { content: "\e952"; }
         &-for-mirrodin::before { content: "\e9c1"; }
         &-foretell::before { content: "\e990"; }
+        &-goad::before { content: "\e9c9"; }
         &-haste::before { content: "\e953"; }
         &-hexproof {
             &::before { content: "\e954"; }

sass/_loyalty.scss

@@ -162,3 +162,35 @@
     &-5::after { content: "V"; }
 
 }
+
+/**
+ * Level card levels */
+
+.#{$ms-prefix}-level {
+
+    // level numbers must be in a span for now unfortunately
+    > span {
+        font-size: 0.33em;
+        position: absolute;
+        left: 0;
+        top: 0;
+        color: #000;
+        font-family: @ms-serif-font;
+        width: 76%;
+        text-align: center;
+        line-height: 3.8;
+    }
+
+    // alt border similar to duo handling
+    &::after {
+        color: rgba(0,0,0,0.25);
+        display: block;
+        font-size: 1em;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+}

sass/_variables.scss

@@ -19,7 +19,7 @@ $ms-black: #383431;
 $ms-red: #c6553e;
 $ms-green: #3d684b;
 
-// colors
+// project colors
 $ms-multicolor-flat: #cca753;
 $ms-multicolor-grad: linear-gradient(45deg, #cca54f 0%, #e0d3bb 50%, #cca54f 100%);
 $ms-ability-grad: linear-gradient(0deg, #c8913b 0%, #ecc65a 100%);