Adds zone symbols for hand, library, graveyard, and exile (#62)

the apostrophes in the ms-serif-font variable generates an invalid attribute
This breaks the loyalty symbols

CHANGELOG.md

@@ -10,6 +10,17 @@ All notable changes to this project will be documented in this file.
 
 ## Versions 
 
+### [1.15.4] 2023-03-08 PRs 81 and 82
+
+* **Added:** Goad ability symbol ([#101](https://github.com/andrewgioia/mana/issues/101))
+* **Added:** Land MDFC symbol ([#58](https://github.com/andrewgioia/mana/issues/58))
+* **Added:** Commander type symbol ([#59](https://github.com/andrewgioia/mana/issues/59))
+* **Added:** Loyalty level up card text symbol ([#60](https://github.com/andrewgioia/mana/issues/60))
+* **Added:** Zone icons from MTGA ([#62](https://github.com/andrewgioia/mana/issues/62))
+* **Fixed:** CSS font name now matches compiled font name ([#87](https://github.com/andrewgioia/mana/issues/87))
+* **Merged:** ([PR #81])(https://github.com/andrewgioia/mana/pull/81) by @Lisstem fixes apostrophe bug in `_variables.scss`
+* **Merged:** ([PR #82])(https://github.com/andrewgioia/mana/pull/82) by @Lisstem adds missing saga loyalty to `_loyalty.scss`
+
 ### [1.15.3] 2023-03-04 Remaining split Phyrexian classes
 
 * **Added:** All other split Phyrexian mana classes introduced recently ([#86](https://github.com/andrewgioia/mana/issues/86))
@@ -20,9 +31,9 @@ All notable changes to this project will be documented in this file.
 
 ### [1.15.1] 2023-03-03 Fabricate
 
-* **Fixed:** Fabricate has its own correct symbol now. It had previously been aliased and this got messed up in the last build.
-* **Changed:** Dungeon now has an alias as a card type (`.ms-dungeon`) ([#84](https://github.com/andrewgioia/mana/issues/84))
 * **Added:** Ticket symbol from Unfinity ([#92](https://github.com/andrewgioia/mana/issues/92))
+* **Changed:** Dungeon now has an alias as a card type (`.ms-dungeon`) ([#84](https://github.com/andrewgioia/mana/issues/84))
+* **Fixed:** Fabricate has its own correct symbol now. It had previously been aliased and this got messed up in the last build.
 
 ### [1.15.0] 2023-03-03 Backlog of Arena ability and counter symbols
 

README.md

@@ -1,4 +1,4 @@
-# Mana v1.15.3
+# Mana v1.15.4
 
 ## The Magic: the Gathering mana symbol font!
 

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "mana",
   "homepage": "https://github.com/andrewgioia/mana",
-  "version": "1.15.3",
+  "version": "1.15.4",
   "authors": [
     "Andrew Gioia <andrew@gioia.email>"
   ],

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?#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?v=1.15.4');
+  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?#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?v=1.15.4');
+  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";
 }
@@ -211,6 +214,18 @@
 .ms-multicolor::before {
   content: "\e985";
 }
+.ms-hand::before {
+  content: "\e9ca";
+}
+.ms-library::before {
+  content: "\e9cb";
+}
+.ms-graveyard::before {
+  content: "\e9cc";
+}
+.ms-exile::before {
+  content: "\e9cd";
+}
 .ms-wu::before,
 .ms-wb::before,
 .ms-rw::after,
@@ -298,36 +313,45 @@
 .ms-loyalty-start::before {
   content: "\e628";
 }
-.ms-dfc-night::before {
-  content: "\e905";
+.ms-level::before {
+  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 {
-  content: "\e983";
+.ms-dfc-ignite::before {
+  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 +681,9 @@
 .ms-ability-foretell::before {
   content: "\e990";
 }
+.ms-ability-goad::before {
+  content: "\e9c9";
+}
 .ms-ability-haste::before {
   content: "\e953";
 }
@@ -1517,6 +1544,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>
@@ -382,9 +390,10 @@
             <i class="ms ms-counter-verse ms-2x ms-fw"></i>
             <i class="ms ms-counter-vortex ms-2x ms-fw"></i>
         </p>
-        <h3>Future Sight and other type symbols</h3>
-        <p>
+        <h3>Card type and game zone symbols</h3>
+        <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>
@@ -396,15 +405,21 @@
             <i class="ms ms-phenomenon ms-2x ms-fw" title="Phenomenon"></i>
             <i class="ms ms-scheme ms-2x ms-fw" title="Scheme"></i>
             <i class="ms ms-conspiracy ms-2x ms-fw" title="Conspiracy"></i>
-            <br />
+        </p>
+        <p class="grid">
             <i class="ms ms-multicolor ms-duo ms-duo-color ms-grad ms-2x ms-fw" title="Multicolor"></i>
             <i class="ms ms-token ms-2x ms-fw" title="Token"></i>
             <i class="ms ms-flashback ms-2x ms-fw" title="Flashback"></i>
             <i class="ms ms-rarity ms-2x ms-fw" title="Rarity"></i>
             <i class="ms ms-vanguard ms-2x ms-fw" title="Vangaurd"></i>
+            &nbsp;&nbsp;
+            <i class="ms ms-hand ms-2x ms-fw" title="Hand"></i>
+            <i class="ms ms-library ms-2x ms-fw" title="Library"></i>
+            <i class="ms ms-graveyard ms-2x ms-fw" title="Graveyard"></i>
+            <i class="ms ms-exile ms-2x ms-fw" title="Exile"></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 +428,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 +447,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 +461,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"; }
@@ -72,6 +73,12 @@
     &-vanguard::before { content: "\e971"; }
     &-multicolor::before { content: "\e985"; }
 
+    // zones
+    &-hand::before { content: "\e9ca"; }
+    &-library::before { content: "\e9cb"; }
+    &-graveyard::before { content: "\e9cc"; }
+    &-exile::before { content: "\e9cd"; }
+
     // splits
     &-wu::before,
     &-wb::before,
@@ -143,18 +150,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 +303,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

@@ -136,8 +136,6 @@
 
 .@{ms-prefix}-saga {
 
-    // Defaults
-
     // Numbers
     &-1::after,
     &-2::after,
@@ -161,4 +159,36 @@
     &-4::after { content: "IV"; }
     &-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%;
+    }
+
 }

less/variables.less

@@ -1,6 +1,6 @@
 // base variables
 @ms-font-path: '../fonts';
-@ms-version: '1.15.3';
+@ms-version: '1.15.4';
 @ms-font-size-base: 14px;
 @ms-prefix: ms;
 @ms-serif-font: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mana-font",
-  "version": "1.15.3",
+  "version": "1.15.4",
   "description": "Magic: the Gathering mana symbol pictographic font",
   "main": "css/mana.css",
   "repository": {

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"; }
@@ -73,6 +74,12 @@
     &-vanguard::before { content: "\e971"; }
     &-multicolor::before { content: "\e985"; }
 
+    // zones
+    &-hand::before { content: "\e9ca"; }
+    &-library::before { content: "\e9cb"; }
+    &-graveyard::before { content: "\e9cc"; }
+    &-exile::before { content: "\e9cd"; }
+
     // splits
     &-wu::before,
     &-wb::before,
@@ -144,18 +151,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 +304,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

@@ -131,4 +131,66 @@
             &-x::after { content: "-X"; }
         }
     }
+}
+
+/**
+ * Saga loyalty */
+
+.#{$ms-prefix}-saga {
+    
+    // Numbers
+    &-1::after,
+    &-2::after,
+    &-3::after,
+    &-4::after,
+    &-5::after { // future proofing :P
+        color: #fff;
+        display: inline-block;
+        font-size: 0.6em;
+        font-family: $ms-serif-font;
+        position: absolute;
+        left: 0;
+        line-height: 1.75em;
+        width: 100%;
+        text-align: center;
+    }
+    
+    &-1::after { content: "I"; }
+    &-2::after { content: "II"; }
+    &-3::after { content: "III"; }
+    &-4::after { content: "IV"; }
+    &-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

@@ -1,9 +1,9 @@
 // base variables
 $ms-font-path: '../fonts' !default;
-$ms-version: '1.15.3' !default;
+$ms-version: '1.15.4' !default;
 $ms-font-size-base: 14px !default;
 $ms-prefix: ms !default;
-$ms-serif-font: 'MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif' !default;
+$ms-serif-font: 'MPlantin, Garamond, Palatino, \'Times New Roman\', Times, serif' !default;
 
 // mana colors
 $ms-border-black: #010101;
@@ -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%);