Adds new DFC symbols from the Zendikar Rising modal spells in #54, ad…

…ds multicolor symbol and new dual-layered support #43
andrewgioia · Sep 4, 2020 · 624e007 · 624e007
1 parent 7a528a2
commit 624e007
Show file tree

Hide file tree

Showing 21 changed files with 171 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,11 @@ All notable changes to this project will be documented in this file.
 
 ## Versions 
 
+### [1.9.1] 2020-09-04 Modal DFC symbols and Multicolor/duo support
+
+* **Added:** Two new double-faced symbols for `modal-face` and `modal-back` added, from [Zendikar Rising](https://scryfall.com/card/znr/264/riverglide-pathway-lavaglide-pathway) [#54](https://github.com/andrewgioia/mana/issues/54)
+* **Added:** Multicolor symbol with dual-layer support; add `.ms-duo` and the multicolor symbol uses both glyph layers, and adding `.ms-grad` makes it look like the Arena one with a gold gradient background [#43](https://github.com/andrewgioia/mana/issues/43)
+
 ### [1.9.0] 2020-09-03 All Arena ability symbols!
 
 * **Added:** Excited to add _all_ 53 ability symbols from Arena! This was a big task as many had to be drawn from scratch! [#41](https://github.com/andrewgioia/mana/issues/41), [#53](https://github.com/andrewgioia/mana/issues/53), [#52](https://github.com/andrewgioia/mana/issues/52), and [#44](https://github.com/andrewgioia/mana/issues/44)

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Mana v1.9.0
+# Mana v1.9.1
 
 ## The Magic: the Gathering mana symbol font!
 
@@ -16,11 +16,11 @@ $> npm install mana-font
 
 Bower is still supported but given their notice to migrate away from it I recommend NPM if you're using a package manager. This project is registered as 'mana-font' with [NPM](https://docs.npmjs.com/getting-started/what-is-npm) and `mana` with [Bower](https://bower.io/#getting-started). Just install using the above commands in your project and you can edit anything as needed.
 
-You can also download the [zip file](https://github.com/andrewgioia/Mana/archive/master.zip) here at Github and use the font files and CSS files in your project as needed.
+You can also download the [zip file](https://github.com/andrewgioia/mana/archive/master.zip) here at Github and use the font files and CSS files in your project as needed.
 
 ## Using Mana in your project
 
-Each mana symbol has its own font character. Display them in a manner similar to any icon font, like [Keyrune](http://andrewgioia.github.io/Keyrune), using the `<i class="ms ms-g"></i>` element and class syntax. Class name codes are based on textual mana symbol codes (like g for Green or 3 for, well, {3}).
+Each mana symbol has its own font character. Display them in a manner similar to any icon font, like [Keyrune](https://keyrune.andrewgioia.com), using the `<i class="ms ms-g"></i>` element and class syntax. Class name codes are based on textual mana symbol codes (like g for Green or 3 for, well, {3}).
 
 To use Mana, move the web font files to your `/fonts` directory and include the `mana.min.css` stylesheet in your `<head>`:
 
@@ -46,9 +46,9 @@ To add new icons, I recommend first creating a project in IcoMoon and uploading
 
 ## Using Mana in desktop software
 
-If you'd like to use Mana as a desktop font (e.g., in a Word document) there are a few steps and things to know. First, to get it loaded on your system just download the [latest zip file](https://github.com/andrewgioia/Mana/archive/master.zip), extract it, and navigate to `Mana-master\fonts`. In there, install the `mana.ttf` font (typically by double clicking it).
+If you'd like to use Mana as a desktop font (e.g., in a Word document) there are a few steps and things to know. First, to get it loaded on your system just download the [latest zip file](https://github.com/andrewgioia/mana/archive/master.zip), extract it, and navigate to `mana-master\fonts`. In there, install the `mana.ttf` font (typically by double clicking it).
 
-Mana uses [private use characters](https://en.wikipedia.org/wiki/Private_Use_Areas) for the font glyphs so you unfortunately can't normally "type" anything in Word to see the symbols. To do so, open up the [Mana Cheatsheet](http://andrewgioia.github.io/Mana/cheatsheet.html) and copy the symbol you want, then paste it into Word (or whatever software you're using).
+Mana uses [private use characters](https://en.wikipedia.org/wiki/Private_Use_Areas) for the font glyphs so you unfortunately can't normally "type" anything in Word to see the symbols. To do so, open up the [Mana Cheatsheet](https://mana.andrewgioia.com/cheatsheet.html) and copy the symbol you want, then paste it into Word (or whatever software you're using).
 
 ## License
 

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "mana",
   "homepage": "https://github.com/andrewgioia/mana",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "authors": [
     "Andrew Gioia <[email protected]>"
   ],

diff --git a/css/mana.css b/css/mana.css
@@ -1,14 +1,14 @@
 @font-face {
   font-family: 'Mana';
-  src: url('../fonts/mana.eot?v=1.9.0');
-  src: url('../fonts/mana.eot?#iefix&v=1.9.0') format('embedded-opentype'), url('../fonts/mana.woff?v=1.9.0') format('woff'), url('../fonts/mana.ttf?v=1.9.0') format('truetype'), url('../fonts/mana.svg?v=1.9.0#mana') format('svg');
+  src: url('../fonts/mana.eot?v=1.9.1');
+  src: url('../fonts/mana.eot?#iefix&v=1.9.1') format('embedded-opentype'), url('../fonts/mana.woff?v=1.9.1') format('woff'), url('../fonts/mana.ttf?v=1.9.1') format('truetype'), url('../fonts/mana.svg?v=1.9.1#mana') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'MPlantin';
-  src: url('../fonts/mplantin.eot?v=1.9.0');
-  src: url('../fonts/mplantin.eot?#iefix&v=1.9.0') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.9.0') format('woff'), url('../fonts/mplantin.ttf?v=1.9.0') format('truetype'), url('../fonts/mplantin.svg?v=1.9.0#mplantin') format('svg');
+  src: url('../fonts/mplantin.eot?v=1.9.1');
+  src: url('../fonts/mplantin.eot?#iefix&v=1.9.1') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.9.1') format('woff'), url('../fonts/mplantin.ttf?v=1.9.1') format('truetype'), url('../fonts/mplantin.svg?v=1.9.1#mplantin') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -200,6 +200,9 @@
 .ms-vanguard::before {
   content: "\e971";
 }
+.ms-multicolor::before {
+  content: "\e985";
+}
 .ms-wu::before,
 .ms-wb::before,
 .ms-rw::after,
@@ -281,6 +284,12 @@
 .ms-dfc-enchantment::before {
   content: "\e920";
 }
+.ms-dfc-modal-face::before {
+  content: "\e983";
+}
+.ms-dfc-modal-back::before {
+  content: "\e984";
+}
 .ms-flashback::before {
   content: "\e629";
 }
@@ -1258,8 +1267,6 @@ span.ms-half > .ms-cost {
 .ms-saga-5::after {
   content: "V";
 }
-/**
- * Double faced cards */
 .ms-dfc {
   color: #111;
   border: 0.05em solid #111;
@@ -1283,3 +1290,31 @@ span.ms-half > .ms-cost {
 .ms-6x {
   font-size: 4.5em;
 }
+.ms-duo {
+  color: #fff;
+}
+.ms-duo::after {
+  color: #000;
+  content: '';
+  display: block;
+  font-size: 1em;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.ms-duo.ms-multicolor::after {
+  content: "\e986";
+}
+.ms-duo-color::before {
+  color: #000;
+}
+.ms-duo-color.ms-multicolor::after {
+  color: #cca753;
+}
+.ms-duo-color.ms-multicolor.ms-grad::after {
+  background: linear-gradient(45deg, #cca54f 0%, #e0d3bb 50%, #cca54f 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
diff --git a/css/mana.min.css b/css/mana.min.css
diff --git a/fonts/mana.eot b/fonts/mana.eot
diff --git a/fonts/mana.svg b/fonts/mana.svg
diff --git a/fonts/mana.ttf b/fonts/mana.ttf
diff --git a/fonts/mana.woff b/fonts/mana.woff
diff --git a/fonts/mana.woff2 b/fonts/mana.woff2
diff --git a/index.html b/index.html
@@ -198,7 +198,8 @@ <h3>Future Sight and other type symbols</h3>
             <i class="ms ms-phenomenon ms-2x" title="Phenomenon"></i>
             <i class="ms ms-scheme ms-2x" title="Scheme"></i>
             <i class="ms ms-conspiracy ms-2x" title="Conspiracy"></i>
-            &nbsp;&nbsp;
+            <br />
+            <i class="ms ms-multicolor ms-duo ms-duo-color ms-grad ms-2x" title="Multicolor"></i>
             <i class="ms ms-token ms-2x" title="Token"></i>
             <i class="ms ms-flashback ms-2x" title="Flashback"></i>
             <i class="ms ms-rarity ms-2x" title="Rarity"></i>
@@ -225,6 +226,9 @@ <h3>Double-faced card symbols</h3>
             <i class="ms ms-dfc ms-dfc-moon ms-2x"></i>
             <i class="ms ms-dfc ms-dfc-emrakul ms-2x"></i>
             <i class="ms ms-dfc ms-dfc-enchantment ms-2x"></i>
+            &nbsp;&nbsp;
+            <i class="ms ms-dfc-modal-face ms-2x"></i>
+            <i class="ms ms-dfc-modal-back ms-2x"></i>
         </p>
         <h3>Guild Symbols</h3>
         <p>

diff --git a/less/dfc.less b/less/dfc.less
@@ -1,9 +1,8 @@
-/**
- * Double faced cards */
+// double faced cards
 
 .@{ms-prefix}-dfc {
     color: #111;
     border: .05em solid #111;
     border-radius: 2em;
     padding: 0.025em;
-}
+}
diff --git a/less/duo.less b/less/duo.less
@@ -0,0 +1,41 @@
+.@{ms-prefix}-duo {
+
+    // base border styles
+    &::after {
+        color: #000;
+        content: '';
+        display: block;
+        font-size: 1em;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+    // set default inner to black unless we're adding color to the background
+    color: #fff;
+
+    // multicolor symbol
+    &.@{ms-prefix}-multicolor::after {
+        content: "\e986";
+    }
+
+    // colorized versions
+    &-color {
+        &::before {
+            color: #000;
+        }
+        &.@{ms-prefix}-multicolor {
+            &::after {
+                color: @ms-multicolor-flat;
+            }
+            &.@{ms-prefix}-grad::after {
+                background: @ms-multicolor-grad;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+        }
+    }
+
+}
diff --git a/less/icons.less b/less/icons.less
@@ -70,6 +70,7 @@
     &-tribal::before,
         &-multiple::before { content: "\e925"; }
     &-vanguard::before { content: "\e971"; }
+    &-multicolor::before { content: "\e985"; }
 
     // splits
     &-wu::before,
@@ -124,6 +125,8 @@
         &-emrakul::before { content: "\e90a"; }
         &-moon::before { content: "\e90b"; }
         &-enchantment::before { content: "\e920"; }
+        &-modal-face::before { content: "\e983"; }
+        &-modal-back::before { content: "\e984"; }
     }
 
     // other card elements

diff --git a/less/mana.less b/less/mana.less
@@ -5,4 +5,5 @@
 @import "cost.less";
 @import "loyalty.less";
 @import "dfc.less";
-@import "sizes.less";
+@import "sizes.less";
+@import "duo.less";
diff --git a/less/variables.less b/less/variables.less
@@ -1,5 +1,10 @@
+// base variables
 @ms-font-path: '../fonts';
-@ms-version: '1.9.0';
+@ms-version: '1.9.1';
 @ms-font-size-base: 14px;
 @ms-prefix: ms;
-@ms-serif-font: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;
+@ms-serif-font: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;
+
+// colors
+@ms-multicolor-flat: #cca753;
+@ms-multicolor-grad: linear-gradient(45deg, #cca54f 0%, #e0d3bb 50%, #cca54f 100%);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mana-font",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "Magic: the Gathering mana symbol pictographic font",
   "main": "css/mana.css",
   "repository": {

diff --git a/sass/_duo.scss b/sass/_duo.scss
@@ -0,0 +1,41 @@
+.#{$ms-prefix}-duo {
+
+    // base border styles
+    &::after {
+        color: #000;
+        content: '';
+        display: block;
+        font-size: 1em;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+    // set default inner to black unless we're adding color to the background
+    color: #fff;
+
+    // multicolor symbol
+    &.#{$ms-prefix}-multicolor::after {
+        content: "\e986";
+    }
+
+    // colorized versions
+    &-color {
+        &::before {
+            color: #000;
+        }
+        &.#{$ms-prefix}-multicolor {
+            &::after {
+                color: @ms-multicolor-flat;
+            }
+            &.#{$ms-prefix}-grad::after {
+                background: @ms-multicolor-grad;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+        }
+    }
+
+}
diff --git a/sass/_icons.scss b/sass/_icons.scss
@@ -70,6 +70,7 @@
     &-tribal::before,
         &-multiple::before { content: "\e925"; }
     &-vanguard::before { content: "\e971"; }
+    &-multicolor::before { content: "\e985"; }
 
     // splits
     &-wu::before,
@@ -124,6 +125,8 @@
         &-emrakul::before { content: "\e90a"; }
         &-moon::before { content: "\e90b"; }
         &-enchantment::before { content: "\e920"; }
+        &-modal-face::before { content: "\e983"; }
+        &-modal-back::before { content: "\e984"; }
     }
 
     // other card elements