Adds documentation for all watermarks and the LotR ability symbols, moves documentation site to docs folder on this branch

CHANGELOG.md

@@ -10,9 +10,21 @@ All notable changes to this project will be documented in this file.
 
 ## Versions 
 
+### [1.16.1] 2024-10-28 Watermark documentation
+
+#### Added
+
+* Watermark for Trump Katsumai added ([#114](https://github.com/andrewgioia/mana/issues/114))
+* Documentation now updated for that massive watermark project I abandoned :( All 90+ watermarks are in and on the icons page, finally back here and getting the repo up to speed again. ([#34](https://github.com/andrewgioia/mana/issues/34))
+* Documented Improvise, Ring Bearer, Amass Orcs, and The Ring Tempts You abilities. [#107](https://github.com/andrewgioia/mana/issues/107))
+
+#### Changed
+
+* Moved the documentation to the `./docs` folder like Keyrune, no more `gh-pages` branch.
+
 ### [1.16.0] 2023-09-20 Complete set of card watermarks
 
-* **Added:** 90 watermarks added/aliased, nearing the complete set of all watermarks save for 2. ([#34](https://github.com/andrewgioia/mana/issues/34)
+* **Added:** 90 watermarks added/aliased, nearing the complete set of all watermarks save for 2. ([#34](https://github.com/andrewgioia/mana/issues/34))
 
 ### [1.15.9] 2023-09-10 WOE ability symbols, Haktos and Robber symbols, loyalty VI
 

README.md

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

bower.json

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

css/mana.css

@@ -1248,7 +1248,7 @@
   background: linear-gradient(135deg, #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#beb9b2", endColorstr="#93b483",GradientType=1 );
 }
-.ms-cost.ms-p::before, .ms-cost.ms-watermark-phyrexian::before, .ms-cost.ms-wp::before, .ms-cost.ms-up::before, .ms-cost.ms-bp::before, .ms-cost.ms-rp::before, .ms-cost.ms-gp::before, .ms-cost.ms-wup::before, .ms-cost.ms-wbp::before, .ms-cost.ms-ubp::before, .ms-cost.ms-urp::before, .ms-cost.ms-brp::before, .ms-cost.ms-bgp::before, .ms-cost.ms-rwp::before, .ms-cost.ms-rgp::before, .ms-cost.ms-gwp::before, .ms-cost.ms-gup::before {
+.ms-cost.ms-p::before, .ms-cost.ms-wp::before, .ms-cost.ms-up::before, .ms-cost.ms-bp::before, .ms-cost.ms-rp::before, .ms-cost.ms-gp::before, .ms-cost.ms-wup::before, .ms-cost.ms-wbp::before, .ms-cost.ms-ubp::before, .ms-cost.ms-urp::before, .ms-cost.ms-brp::before, .ms-cost.ms-bgp::before, .ms-cost.ms-rwp::before, .ms-cost.ms-rgp::before, .ms-cost.ms-gwp::before, .ms-cost.ms-gup::before {
   display: inline-block;
   -moz-transform: scale(1.2, 1.2);
   -webkit-transform: scale(1.2, 1.2);
@@ -1794,22 +1794,22 @@ span.ms-half > .ms-cost {
 .ms-duo.ms-multicolor::after {
   content: "\e986";
 }
-.ms-duo.ms-school-lorehold::after, .ms-duo.ms-watermark-lorehold::after {
+.ms-duo.ms-school-lorehold::after {
   content: "\e99b";
 }
-.ms-duo.ms-school-prismari::after, .ms-duo.ms-watermark-prismari::after {
+.ms-duo.ms-school-prismari::after {
   content: "\e99d";
 }
-.ms-duo.ms-school-quandrix::after, .ms-duo.ms-watermark-quandrix::after {
+.ms-duo.ms-school-quandrix::after {
   content: "\e99f";
 }
-.ms-duo.ms-school-silverquill::after, .ms-duo.ms-watermark-silverquill::after {
+.ms-duo.ms-school-silverquill::after {
   content: "\e9a1";
 }
-.ms-duo.ms-school-witherbloom::before, .ms-duo.ms-watermark-witherbloom::before {
+.ms-duo.ms-school-witherbloom::before {
   content: "\e9a3";
 }
-.ms-duo.ms-school-witherbloom::after, .ms-duo.ms-watermark-witherbloom::after {
+.ms-duo.ms-school-witherbloom::after {
   content: "\e9a4";
 }
 .ms-duo-color::before {
@@ -1823,34 +1823,34 @@ span.ms-half > .ms-cost {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-.ms-duo-color.ms-school-lorehold::before, .ms-duo-color.ms-watermark-lorehold::before {
+.ms-duo-color.ms-school-lorehold::before {
   color: #a03731;
 }
-.ms-duo-color.ms-school-lorehold::after, .ms-duo-color.ms-watermark-lorehold::after {
+.ms-duo-color.ms-school-lorehold::after {
   color: #e4e8c7;
 }
-.ms-duo-color.ms-school-prismari::before, .ms-duo-color.ms-watermark-prismari::before {
+.ms-duo-color.ms-school-prismari::before {
   color: #a23431;
 }
-.ms-duo-color.ms-school-prismari::after, .ms-duo-color.ms-watermark-prismari::after {
+.ms-duo-color.ms-school-prismari::after {
   color: #322f5c;
 }
-.ms-duo-color.ms-school-quandrix::before, .ms-duo-color.ms-watermark-quandrix::before {
+.ms-duo-color.ms-school-quandrix::before {
   color: #352e5f;
 }
-.ms-duo-color.ms-school-quandrix::after, .ms-duo-color.ms-watermark-quandrix::after {
+.ms-duo-color.ms-school-quandrix::after {
   color: #519e52;
 }
-.ms-duo-color.ms-school-silverquill::before, .ms-duo-color.ms-watermark-silverquill::before {
+.ms-duo-color.ms-school-silverquill::before {
   color: #181616;
 }
-.ms-duo-color.ms-school-silverquill::after, .ms-duo-color.ms-watermark-silverquill::after {
+.ms-duo-color.ms-school-silverquill::after {
   color: #e5e9ca;
 }
-.ms-duo-color.ms-school-witherbloom::before, .ms-duo-color.ms-watermark-witherbloom::before {
+.ms-duo-color.ms-school-witherbloom::before {
   color: #2f312d;
 }
-.ms-duo-color.ms-school-witherbloom::after, .ms-duo-color.ms-watermark-witherbloom::after {
+.ms-duo-color.ms-school-witherbloom::after {
   color: #4f9b4f;
 }
 
@@ -1969,7 +1969,7 @@ span.ms-half > .ms-cost {
 .ms-ci-wubr, .ms-ci-bruw, .ms-ci-brwu, .ms-ci-burw, .ms-ci-buwr, .ms-ci-bwru, .ms-ci-bwur, .ms-ci-rbuw, .ms-ci-rbwu, .ms-ci-rubw, .ms-ci-ruwb, .ms-ci-rwbu, .ms-ci-rwub, .ms-ci-ubrw, .ms-ci-ubwr, .ms-ci-urbw, .ms-ci-urwb, .ms-ci-uwbr, .ms-ci-uwrb, .ms-ci-wbru, .ms-ci-wbur, .ms-ci-wrbu, .ms-ci-wrub, .ms-ci-wurb, .ms-ci-yore {
   background: conic-gradient(#fff 45deg, #3b6ba0 45deg 135deg, #383431 135deg 225deg, #c6553e 225deg 315deg, #fff 315deg);
 }
-.ms-ci-wubrg, .ms-ci-rugbw, .ms-ci-rugwb, .ms-ci-ruwbg, .ms-ci-ruwgb, .ms-ci-rwbgu, .ms-ci-rwbug, .ms-ci-rwgbu, .ms-ci-rwgub, .ms-ci-rwubg, .ms-ci-rwugb, .ms-ci-ubgrw, .ms-ci-ubgwr, .ms-ci-ubrgw, .ms-ci-ubrwg, .ms-ci-ubwgr, .ms-ci-ubwrg, .ms-ci-ugbrw, .ms-ci-ugbwr, .ms-ci-ugrbw, .ms-ci-ugrwb, .ms-ci-ugwbr, .ms-ci-ugwrb, .ms-ci-urbgw, .ms-ci-urbwg, .ms-ci-urgbw, .ms-ci-urgwb, .ms-ci-urwbg, .ms-ci-urwgb, .ms-ci-uwbgr, .ms-ci-uwbrg, .ms-ci-uwgbr, .ms-ci-uwgrb, .ms-ci-uwrbg, .ms-ci-uwrgb, .ms-ci-wbgru, .ms-ci-wbgur, .ms-ci-wbrgu, .ms-ci-wbrug, .ms-ci-wbugr, .ms-ci-wburg, .ms-ci-wgbru, .ms-ci-wgbur, .ms-ci-wgrbu, .ms-ci-wgrub, .ms-ci-wgubr, .ms-ci-wgurb, .ms-ci-wrbgu, .ms-ci-wrbug, .ms-ci-wrgbu, .ms-ci-wrgub, .ms-ci-wrubg, .ms-ci-wrugb, .ms-ci-wubgr, .ms-ci-wugbr, .ms-ci-wugrb, .ms-ci-wurbg, .ms-ci-wurgb, .ms-ci-bgruw, .ms-ci-bgrwu, .ms-ci-bgurw, .ms-ci-bguwr, .ms-ci-bgwru, .ms-ci-bgwur, .ms-ci-brguw, .ms-ci-brgwu, .ms-ci-brugw, .ms-ci-bruwg, .ms-ci-brwgu, .ms-ci-brwug, .ms-ci-bugrw, .ms-ci-bugwr, .ms-ci-burgw, .ms-ci-burwg, .ms-ci-buwgr, .ms-ci-buwrg, .ms-ci-bwgru, .ms-ci-bwgur, .ms-ci-bwrgu, .ms-ci-bwrug, .ms-ci-bwugr, .ms-ci-bwurg, .ms-ci-gbruw, .ms-ci-gbrwu, .ms-ci-gburw, .ms-ci-gbuwr, .ms-ci-gbwru, .ms-ci-gbwur, .ms-ci-grbuw, .ms-ci-grbwu, .ms-ci-grubw, .ms-ci-gruwb, .ms-ci-grwbu, .ms-ci-grwub, .ms-ci-gubrw, .ms-ci-gubwr, .ms-ci-gurbw, .ms-ci-gurwb, .ms-ci-guwbr, .ms-ci-guwrb, .ms-ci-gwbru, .ms-ci-gwbur, .ms-ci-gwrbu, .ms-ci-gwrub, .ms-ci-gwubr, .ms-ci-gwurb, .ms-ci-rbguw, .ms-ci-rbgwu, .ms-ci-rbugw, .ms-ci-rbuwg, .ms-ci-rbwgu, .ms-ci-rbwug, .ms-ci-rgbuw, .ms-ci-rgbwu, .ms-ci-rgubw, .ms-ci-rguwb, .ms-ci-rgwbu, .ms-ci-rgwub, .ms-ci-rubgw, .ms-ci-rubwg, .ms-ci-5 {
+.ms-ci-wubrg, .ms-ci-bgruw, .ms-ci-bgrwu, .ms-ci-bgurw, .ms-ci-bguwr, .ms-ci-bgwru, .ms-ci-bgwur, .ms-ci-brguw, .ms-ci-brgwu, .ms-ci-brugw, .ms-ci-bruwg, .ms-ci-brwgu, .ms-ci-brwug, .ms-ci-bugrw, .ms-ci-bugwr, .ms-ci-burgw, .ms-ci-burwg, .ms-ci-buwgr, .ms-ci-buwrg, .ms-ci-bwgru, .ms-ci-bwgur, .ms-ci-bwrgu, .ms-ci-bwrug, .ms-ci-bwugr, .ms-ci-bwurg, .ms-ci-gbruw, .ms-ci-gbrwu, .ms-ci-gburw, .ms-ci-gbuwr, .ms-ci-gbwru, .ms-ci-gbwur, .ms-ci-grbuw, .ms-ci-grbwu, .ms-ci-grubw, .ms-ci-gruwb, .ms-ci-grwbu, .ms-ci-grwub, .ms-ci-gubrw, .ms-ci-gubwr, .ms-ci-gurbw, .ms-ci-gurwb, .ms-ci-guwbr, .ms-ci-guwrb, .ms-ci-gwbru, .ms-ci-gwbur, .ms-ci-gwrbu, .ms-ci-gwrub, .ms-ci-gwubr, .ms-ci-gwurb, .ms-ci-rbguw, .ms-ci-rbgwu, .ms-ci-rbugw, .ms-ci-rbuwg, .ms-ci-rbwgu, .ms-ci-rbwug, .ms-ci-rgbuw, .ms-ci-rgbwu, .ms-ci-rgubw, .ms-ci-rguwb, .ms-ci-rgwbu, .ms-ci-rgwub, .ms-ci-rubgw, .ms-ci-rubwg, .ms-ci-rugbw, .ms-ci-rugwb, .ms-ci-ruwbg, .ms-ci-ruwgb, .ms-ci-rwbgu, .ms-ci-rwbug, .ms-ci-rwgbu, .ms-ci-rwgub, .ms-ci-rwubg, .ms-ci-rwugb, .ms-ci-ubgrw, .ms-ci-ubgwr, .ms-ci-ubrgw, .ms-ci-ubrwg, .ms-ci-ubwgr, .ms-ci-ubwrg, .ms-ci-ugbrw, .ms-ci-ugbwr, .ms-ci-ugrbw, .ms-ci-ugrwb, .ms-ci-ugwbr, .ms-ci-ugwrb, .ms-ci-urbgw, .ms-ci-urbwg, .ms-ci-urgbw, .ms-ci-urgwb, .ms-ci-urwbg, .ms-ci-urwgb, .ms-ci-uwbgr, .ms-ci-uwbrg, .ms-ci-uwgbr, .ms-ci-uwgrb, .ms-ci-uwrbg, .ms-ci-uwrgb, .ms-ci-wbgru, .ms-ci-wbgur, .ms-ci-wbrgu, .ms-ci-wbrug, .ms-ci-wbugr, .ms-ci-wburg, .ms-ci-wgbru, .ms-ci-wgbur, .ms-ci-wgrbu, .ms-ci-wgrub, .ms-ci-wgubr, .ms-ci-wgurb, .ms-ci-wrbgu, .ms-ci-wrbug, .ms-ci-wrgbu, .ms-ci-wrgub, .ms-ci-wrubg, .ms-ci-wrugb, .ms-ci-wubgr, .ms-ci-wugbr, .ms-ci-wugrb, .ms-ci-wurbg, .ms-ci-wurgb, .ms-ci-5 {
   background: conic-gradient(#fff 36deg, #3b6ba0 36deg 108deg, #383431 108deg 180deg, #c6553e 180deg 252deg, #3d684b 252deg 324deg, #fff 324deg);
 }
 

docs/CNAME

@@ -0,0 +1 @@
+mana.andrewgioia.com

docs/assets/docs.css

@@ -0,0 +1,360 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i');
+@font-face {
+    font-family: 'Beleren';
+    src: url( '../fonts/beleren.eot' );
+    src: url( '../fonts/beleren.woff' ) format( 'woff' ),
+         url( '../fonts/beleren.ttf' ) format( 'truetype' ),
+         url( '../fonts/beleren.svg' ) format( 'svg' );
+    font-weight: normal;
+    font-style: normal;
+ }
+
+body {
+    background: #fff;
+    color: #333;
+    font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
+        Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 15px;
+    margin: 0;
+    padding: 0;
+}
+
+.wrapper {
+    max-width: 1080px;
+    width: 80%;
+    margin: 0 auto;
+}
+
+a {
+     color: #007185;
+     text-decoration: none;
+ }
+
+     a:hover {
+         color: #263D41;
+     }
+
+section#banner {
+    background: #b6c1b0;
+    color: #555;
+    padding: 12px 0;
+    text-align: right;
+    text-shadow: 0 1px 0 #bacec2;
+}
+
+    section#banner .item {
+        display: inline-block;
+        margin-left: 15px;
+    }
+
+    section#banner .logo {
+        color: #333;
+        float: left;
+        font-family: Beleren;
+        font-size: 18px;
+        margin-top: -2px;
+    }
+
+header {
+    background: #d3d8c1;
+    border-bottom: 1px solid #adb7a7;
+    color: #333;
+    margin: 0;
+    overflow-y: hidden;
+    padding: 25px 0 15px;
+}
+
+    header.main {
+        height: 272px;
+    }
+
+    .bigicon {
+        float: right;
+        font-size: 364px;
+        line-height: 200px;
+        margin-top: -40px;
+        text-shadow: 0 2px 0 #fff;
+    }
+
+    header .vs {
+        margin-left: 5px;
+    }
+
+p {
+    font-size: 16px;
+    line-height: 1.6em;
+    margin: 20px 0;
+}
+
+    section.icons p {
+        margin-left: 25px;
+    }
+
+ul {
+    margin: 0;
+}
+
+li {
+    margin: 0 0 10px;
+}
+
+h1 {
+    color: #444;
+    margin: 0;
+    font-family: Beleren;
+    font-size: 64px;
+    font-weight: lighter;
+    padding: 0 0 20px;
+    text-shadow: 0 1px 0 #fff;
+}
+
+    h1.sub {
+        font-size: 48px;
+        padding: 0 0 15px;
+    }
+
+h2 {
+    color: #444;
+    font-family: Beleren;
+    font-size: 30px;
+    font-weight: lighter;
+    margin: 0;
+    padding: 0 0 30px;
+    text-shadow: 0 1px 0 #fff;
+}
+
+    h2.sub {
+        font-size: 26px;
+        padding: 0 0 20px;
+    }
+
+h3 {
+    color: #444;
+    font-size: 19px;
+    font-weight: normal;
+    line-height: 1.6em;
+    padding-bottom: 20px;
+    text-align: left;
+}
+
+h4 {
+    color: #61605B;
+    font-family: Beleren;
+    font-size: 24px;
+    font-weight: lighter;
+    margin: 15px 0 5px;
+    text-align: left;
+}
+
+h5 {
+    color: #555;
+    font-size: 17px;
+    font-weight: bold;
+    margin: 15px 0 5px;
+    padding: 0;
+}
+
+main {
+    margin: 0;
+    padding: 20px 0 25px;
+}
+
+    main section.content {
+        padding: 0 0 10px;
+    }
+
+blockquote,
+code {
+    font-family: Inconsolate, 'Courier New', Courier, monospace;
+}
+
+code {
+    background: #F7EEF1;
+    color: #BB073B;
+    padding: 1px 3px;
+    border-radius: 2px;
+}
+
+blockquote {
+    background: #eee;
+    border-bottom: 1px solid #d3d8c1;
+    line-height: 1.4em;
+    padding: 20px 20px 18px;
+    margin: 20px 0 25px;
+    border-radius: 4px;
+}
+
+.button {
+    background: #008eae;
+    border-bottom: 2px solid #166075;
+    color: #fff;
+    display: inline-block;
+    font-size: 20px;
+    padding: 10px 18px 9px;
+    border-radius: 4px;
+    text-shadow: 0 1px 0 #333;
+}
+
+    .button:hover {
+        background: #00809F;
+        border-bottom-color: #155A6E;
+        color: #fff;
+    }
+
+    .button .ms {
+        margin-right: 5px;
+        position: relative;
+        top: -2px;
+    }
+
+    .button.vs {
+        background: #666;
+        border-bottom-color: #333;
+    }
+
+        .button.vs:hover {
+            background: #555;
+            border-bottom-color: #222;
+        }
+
+    .button.dl.float-right {
+        margin-top: -10px;
+    }
+
+.icons {
+    padding: 10px 0 5px;
+}
+
+.icon {
+    border-radius: 3px;
+    display: inline-block;
+    overflow: hidden;
+    width: 24.5%;
+}
+
+    .icon span {
+        display: inline-block;
+        padding: 9px 10px;
+        white-space: nowrap;
+    }
+
+    .icon:hover {
+        background: #eee;
+        position: relative;
+        margin-top: -4px;
+        margin-bottom: -5px;
+    }
+
+    .icon .ms {
+        font-size: 22px;
+        margin-right: 5px;
+        margin-top: -2px;
+        text-align: center;
+        width: 32px;
+    }
+
+        .icon:hover .ms {
+            font-size: 32px;
+            text-shadow: 0 1px 0 #fff;
+        }
+
+        .icon:hover .ms.ms-duo {
+            text-shadow: none;
+        }
+
+    .icon em {
+        color: #999;
+        font-size: 13px;
+        font-style: normal;
+    }
+
+.icons.indicators .icon .ms {
+    width: 22px;
+    margin: -2px 10px 0 5px;
+}
+
+    .icons.indicators .icon:hover .ms {
+        margin: 0 5px -1px 0;
+        width: 32px;
+        text-shadow: none;
+    }
+
+.vectors {
+    padding: 10px 0 0;
+}
+
+.utf {
+    display: inline-block;
+    width: 25%;
+    float: left;
+    padding: 6px 0;
+}
+
+    .vectors.overflow .utf {
+        overflow-x: hidden;
+        white-space: nowrap;
+    }
+
+    .utf.long {
+        width: 33%;
+    }
+
+    .utf i {
+        display: inline-block;
+        font-family: mana;
+        font-style: normal;
+        font-size: 1.25em;
+        vertical-align: top;
+        padding: 0 5px 0 0;
+        text-align: center;
+        width: 1.25em;
+    }
+
+        .utf i.long {
+            text-align: left;
+            width: auto;
+        }
+
+    .utf code {
+        background-color: #f5f5f5;
+        color: #555;
+        margin-left: 3px;
+    }
+
+.example {
+    font-size: 16px;
+    padding: 15px 0 0;
+    width: 200px;
+}
+
+    .example .each {
+        display: block;
+        padding-top: 1px;
+        padding-bottom: 7px;
+    }
+
+.explanation {
+    margin-left: 200px;
+}
+
+footer {
+    border-top: 1px solid #eee;
+    margin-top: 20px;
+    padding: 10px 0 30px;
+}
+
+.float-left {
+    float: left;
+}
+
+.float-right {
+    float: right;
+}
+
+.clear {
+    clear: both;
+}
+
+.e { color: #63A35C; }
+.a { color: #795DA3; }
+.v { color: #183691; }

docs/attributes.html

@@ -0,0 +1,295 @@
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+    <title>Attributes and Examples | Mana</title>
+    <link rel="stylesheet" href="css/mana.min.css" />
+    <link rel="stylesheet" href="css/main.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+</head>
+<body>
+
+    <section id="banner">
+        <div class="wrapper">
+            <a href="index.html" class="logo"><i class="ms ms-g" style="top:-2px;position:relative;"></i> Mana</a>
+            <a href="index.html" class="item">Home</a>
+            <a href="icons.html" class="item">Mana Icons</a>
+            <a href="attributes.html" class="item">Attributes</a>
+            <a href="https://github.com/andrewgioia/mana" class="item">GitHub Project</a>
+            <span class="item">
+                <iframe src="https://ghbtns.com/github-btn.html?user=andrewgioia&repo=mana&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px" style="margin-bottom: -4px;"></iframe>
+            </span>
+            <span class="item">
+                Created by
+                <a href="https://andrewgioia.com">Andrew Gioia</a>
+            </span>
+        </div>
+    </section>
+
+    <header>
+        <div class="wrapper">
+            <h1 class="sub">Mana &amp; Card Icons</h1>
+            <a class="dl button float-right" href="https://github.com/andrewgioia/mana/archive/master.zip">
+                <i class="ms ms-instant"></i>
+                Download
+            </a>
+            <h2 class="sub">Complete set of Magic mana and card symbol font icons</h2>
+        </div>
+    </header>
+
+    <main>
+        <div class="wrapper">
+            <section>
+                <h3><strong>Mana</strong> has some built in icon options to easily change the <strong>size and position</strong>, convert the mana symbols to the <strong>casting costs</strong>, and create planeswalker <strong>loyalty symbols</strong> with numbers. Take a look below at examples of each option with the class names to implement them.</h3>
+            </section>
+            <section class="content">
+                <h4>The Basic Icon</h4>
+                <div class="example float-left">
+                    <span class="each">
+                        <i class="ms ms-u"></i> .ms-u
+                    </span>
+                </div>
+                <div class="explanation">
+                    <p>You can place Mana icons anywhere using the CSS classname prefix <code>ms</code> (for "mana symbol") and then the mana/card symbol's <a href="icons.html">suffix</a>.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-u"</span>&gt;&lt;/<span class="e">i</span>&gt; <br />
+                    </blockquote>
+                </div>
+                <div class="clear"></div>
+            </section>
+            <section class="content">
+                <h4>Creating a Casting Cost</h4>
+                <div class="example float-left">
+                    <span class="each">
+                        <i class="ms ms-g ms-cost"></i> .ms-cost
+                    </span>
+                    <span class="each">
+                        <i class="ms ms-r ms-cost ms-shadow"></i> + .ms-shadow
+                    </span>
+                </div>
+                <div class="explanation">
+                    <p>Add the <code>.ms-cost</code> class to create a casting cost circle around the symbol. Append the <code>.ms-shadow</code> class to add a drop shadow.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-g ms-cost"</span>&gt;&lt;/<span class="e">i</span>&gt; <br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ms-cost ms-shadow"</span>&gt;&lt;/<span class="e">i</span>&gt;
+                    </blockquote>
+                </div>
+                <div class="clear"></div>
+            </section>
+            <section class="content">
+                <h4>Split Casting Costs</h4>
+                <div class="example float-left">
+                    <span class="each">
+                        <i class="ms ms-wu ms-split ms-cost"></i> .ms-wu
+                    </span>
+                    <span class="each">
+                        <i class="ms ms-2b ms-split ms-cost ms-shadow"></i> + .ms-shadow
+                    </span>
+                </div>
+                <div class="explanation">
+                    <p><strong>New:</strong> You no longer need the <code>.ms-split</code> class name, simply identifying a split or hybrid cost will now automatically handle the split styles.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-wu ms-cost"</span>&gt;&lt;/<span class="e">i</span>&gt;<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-2b ms-cost ms-shadow"</span>&gt;&lt;/<span class="e">i</span>&gt;
+                    </blockquote>
+                    <p>For backwards compatibility and full control you can still use create split and hybrid casting costs separately with the <code>.ms-split</code> class along with the 2-symbols' codes. This works for color pairs and the "2" with a color.</p>
+                </div>
+                <div class="clear"></div>
+            </section>
+            <section class="content">
+                <h4>Half Mana Casting Costs</h4>
+                <div class="example float-left">
+                    <span class="each">
+                        <i class="ms ms-w ms-half ms-cost"></i></span> .ms-half
+                    </span>
+                </div>
+                <div class="explanation">
+                    <p>Even though there's only been <a href="http://magiccards.info/uh/en/16.html"><strike>one</strike></a> <a href="https://scryfall.com/card/unh/82/monss-goblin-waiters">two</a> of these ever printed you can still create them :P Half costs <a href="https://github.com/andrewgioia/Mana/issues/6">used to require a wrapping element</a> but as of v1.4.1 they are a regular single element:</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-w ms-half ms-cost"</span>&gt;&lt;/<span class="e">i</span>&gt;<br />
+                    </blockquote>
+                </div>
+                <div class="clear"></div>
+            </section>
+            <section class="content">
+                <h4>Planeswalker Symbols</h4>
+                <div class="example float-left">
+                    <span class="each">
+                        <i class="ms ms-loyalty-up ms-loyalty-3"></i> .ms-loyalty-up
+                    </span>
+                    <span class="each">
+                        <i class="ms ms-loyalty-down ms-loyalty-2"></i> .ms-loyalty-down
+                    </span>
+                </div>
+                <div class="explanation">
+                    <p>You can create planewalker loyalty symbols for the starting value, zero, and ticking up or down. The number that appears is based on a class you add, like <code>.ms-loyalty-4</code>. Currently numbers 0-20 are supported for start, up, and down.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-loyalty-up ms-loyalty-3"</span>&gt;&lt;/<span class="e">i</span>&gt;<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-loyalty-down ms-loyalty-2"</span>&gt;&lt;/<span class="e">i</span>&gt;
+                    </blockquote>
+                </div>
+                <div class="clear"></div>
+            </section>
+            <section class="content">
+                <h4>Saga Symbols</h4>
+                <div class="example float-left">
+                    <span class="each">
+                        <i class="ms ms-saga ms-saga-1 ms-2x"></i> .ms-saga-1
+                    </span>
+                    <span class="each">
+                        <i class="ms ms-saga ms-saga-4 ms-2x"></i> .ms-saga-4
+                    </span>
+                </div>
+                <div class="explanation">
+                    <p>Saga symbols are supported natively up to V, even though only IV has ever been printed. The number that appears inside the hexagon is based on a class you add, like <code>.ms-saga-2</code>.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-saga ms-saga-1"</span>&gt;&lt;/<span class="e">i</span>&gt;<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-saga ms-saga-4"</span>&gt;&lt;/<span class="e">i</span>&gt;
+                    </blockquote>
+                </div>
+                <div class="clear"></div>
+            </section>
+            <section class="content">
+                <h4>Battle Symbols</h4>
+                <div class="example float-left">
+                    <span class="each">
+                        <i class="ms ms-defense ms-defense-1 ms-2x"></i> .ms-defense
+                    </span>
+                    <span class="each">
+                        <i class="ms ms-defense ms-defense-outline ms-defense-3 ms-2x"></i> .ms-defense-outline
+                    </span>
+                    <span class="each">
+                        <i class="ms ms-defense ms-defense-print ms-defense-5 ms-2x"></i> .ms-defense-print
+                    </span>
+                </div>
+                <div class="explanation">
+                    <p>Battle cards have a unique defense box and values are supported from 0-20 using utility classes similar to Loyalty and Sagas, in the format <code>.ms-defense-2</code>.</p>
+                    <p>There are 3 variations of the symbol that you can display. The simplest is just the black background with a white number (<code>.ms-defense</code>). An outline version has a black border with black number and white inside (<code>.ms-defense-outline</code>). Finally the full "print" version uses 3 layers and mimics the way the defense box is printed on cards; use this with <code>.ms-defense-print</code>.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-defense ms-defense-1"</span>&gt;&lt;/<span class="e">i</span>&gt;<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-defense ms-defense-outline ms-defense-3"</span>&gt;&lt;/<span class="e">i</span>&gt;<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-defense ms-defense-print ms-defense-5"</span>&gt;&lt;/<span class="e">i</span>&gt;
+                    </blockquote>
+                </div>
+                <div class="clear"></div>
+            </section>
+            <section class="content">
+                <h4>Increase the Symbol's Size</h4>
+                <div class="example float-left">
+                    <span class="each">
+                        <i class="ms ms-r ms-2x"></i> .ms-2x
+                    </span>
+                    <span class="each">
+                        <i class="ms ms-r ms-3x"></i> .ms-3x
+                    </span>
+                    <span class="each">
+                        <i class="ms ms-r ms-4x"></i> .ms-4x
+                    </span>
+                    <span class="each">
+                        <i class="ms ms-r ms-5x"></i> .ms-5x
+                    </span>
+                    <span class="each">
+                        <i class="ms ms-r ms-6x"></i> .ms-6x
+                    </span>
+                </div>
+                <div class="explanation">
+                    <p>To conveniently increase the size of a mana or card symbol you can append the classes <code>ms-2x</code>, <code>ms-3x</code>, <code>ms-4x</code>, <code>ms-4x</code>, and <code>ms-6x</code>. These classes increase the size by a factor equal to class name number.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ms-2x"</span>&gt;&lt;/<span class="e">i</span>&gt; ms-2x<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ms-3x"</span>&gt;&lt;/<span class="e">i</span>&gt; ms-3x<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ms-4x"</span>&gt;&lt;/<span class="e">i</span>&gt; ms-4x<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ms-5x"</span>&gt;&lt;/<span class="e">i</span>&gt; ms-5x<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ms-6x"</span>&gt;&lt;/<span class="e">i</span>&gt; ms-6x
+                    </blockquote>
+                </div>
+                <div class="clear"></div>
+            </section>
+            <section class="content">
+                <h4>Fixed Width</h4>
+                <div class="example float-left">
+                    <span class="each"><i class="ms ms-planeswalker ms-fw"></i> Planeswalker</span>
+                    <span class="each"><i class="ms ms-land ms-fw"></i> Land</span>
+                </div>
+                <div class="explanation">
+                    <p>Some of the card symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width to a standard size, just append the class <code>.ms-fw</code> and the symbols will have a constant width and centered icon.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-planeswalker ms-fw"</span>&gt;&lt;/<span class="e">i</span>&gt; Planeswalker symbol<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-land ms-fw"</span>&gt;&lt;/<span class="e">i</span>&gt; Land symbol
+                    </blockquote>
+                </div>
+                <div class="clear"></div>
+            </section>
+            <section class="content">
+                <h4>Dual-Layered Symbols</h4>
+                <div class="example float-left">
+                    <span class="each"><i class="ms ms-2x ms-multicolor"></i> One layer</span>
+                    <span class="each"><i class="ms ms-2x ms-multicolor ms-duo"></i> Two layers</span>
+                    <span class="each"><i class="ms ms-2x ms-multicolor ms-duo ms-duo-color ms-grad"></i> Two with color</span>
+                    <span class="each"><i class="ms ms-2x ms-school-prismari ms-duo ms-duo-color"></i> Prismari</span>
+                </div>
+                <div class="explanation">
+                    <p>The <a href="https://mtg.gamepedia.com/Multicolored">multicolor symbol</a> has 2 layers and the only way to reliably achieve this is with 2 glyphs. Add <code>.ms-duo</code> and <code>.ms-multicolor</code> will add the background layer and knock out the foreground. If you add <code>.ms-duo-color</code> and optionally <code>.ms-grad</code> it will colorize it like the official symbol.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-multicolor"</span>&gt;&lt;/<span class="e">i</span>&gt; One layer<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-multicolor ms-duo"</span>&gt;&lt;/<span class="e">i</span>&gt; Two layers<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-multicolor ms-duo ms-duo-color ms-grad"</span>&gt;&lt;/<span class="e">i</span>&gt; Complete multicolor symbol
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-school-prismari ms-duo ms-duo-color"</span>&gt;&lt;/<span class="e">i</span>&gt; Prismari colored symbol
+                    </blockquote>
+                </div>
+                <div class="clear"></div>
+            </section>
+            <section class="content">
+                <h4>Arena Abilites and MODO Counters</h4>
+                <div class="example float-left">
+                    <span class="each"><i class="ms ms-2x ms-ability-flying"></i> Evergreen ability</span>
+                    <span class="each"><i class="ms ms-2x ms-ability-adventure ms-mechanic"></i> Set-specific ability</span>
+                    <span class="each"><i class="ms ms-2x ms-counter-plus"></i> MODO counter</span>
+                </div>
+                <div class="explanation">
+                    <p>Mana has full Arena and Modo ability and counter coverage. You can apply the set-specific gold gradient that Arena uses on abilities with <code>.ms-mechanic</code>.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-ability-flying"</span>&gt;&lt;/<span class="e">i</span>&gt; Evergreen ability<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-ability-adventure ms-mechanic"</span>&gt;&lt;/<span class="e">i</span>&gt; Set-specific ability<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-counter-plus"</span>&gt;&lt;/<span class="e">i</span>&gt; MODO counter
+                    </blockquote>
+                </div>
+                <div class="clear"></div>
+            </section>
+            <section class="content">
+                <h4>Card Color Indicators</h4>
+                <div class="example float-left">
+                    <span class="each"><i class="ms ms-2x ms-ci ms-ci-1 ms-ci-g"></i> Green</span>
+                    <span class="each"><i class="ms ms-2x ms-ci ms-ci-2 ms-ci-rg"></i> Red/Green</span>
+                    <span class="each"><i class="ms ms-2x ms-ci ms-ci-3 ms-ci-gur"></i> Red/Green/Blue</span>
+                </div>
+                <div class="explanation">
+                    <p>Some cards use color indicator circles on their alternate faces to indicate that the card is still a certain color identity. Mana supports all 31 variations, though only about 10 different color combinations exist on cards currently.</p>
+                    <blockquote>
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-ci ms-ci-1 ms-ci-g"</span>&gt;&lt;/<span class="e">i</span>&gt; Green<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-ci ms-ci-2 ms-ci-rg"</span>&gt;&lt;/<span class="e">i</span>&gt; Red/Green<br />
+                        &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-ci ms-ci-3 ms-ci-gur"</span>&gt;&lt;/<span class="e">i</span>&gt; Red/Green/Blue<br />
+                    </blockquote>
+                    <p>To display these, use class <code>.ms-ci</code> and then <code>.ms-ci-X</code> where "X" is the number of colors in the identity. Then add the corresponding color class, like <code>.ms-ci-wug</code>.</p>
+                    <p>Importantly, the only SVGs used to display these are the borders, and there are 5 different border glyphs. The colors themselves are displayed using the <code>background: conic-gradient();</code> CSS attribute, which you can view the support for on <a href="https://caniuse.com/css-conic-gradients" target="blank">Can I Use</a>. TL;DR: it has almost universal practical browser support.</p>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <footer>
+        <div class="wrapper">
+            <div class="float-left">
+                <p>Made with &hearts; by <a href="https://andrewgioia.com">Andrew Gioia</a></p>
+            </div>
+            <div class="float-right" style="text-align: right;">
+                <p>
+                    All mana images and card symbols &copy; <a href="http://magicthegathering.com">Wizards of the Coast</a><br />
+                    The Mana font is licensed under the the <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a><br />
+                    Mana CSS, LESS, and Sass files are licensed under the <a href="http://opensource.org/licenses/mit-license.html">MIT License</a><br />
+                </p>
+            </div>
+            <div class="clear"></div>
+        </div>
+    </footer>
+
+</body>
+</html>

docs/cheatsheet.html

@@ -0,0 +1,361 @@
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+    <title>Icon Cheatsheet | Mana</title>
+    <link rel="stylesheet" href="css/mana.min.css" />
+    <link rel="stylesheet" href="css/main.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+</head>
+<body>
+
+    <section id="banner">
+        <div class="wrapper">
+            <a href="index.html" class="logo"><i class="ms ms-g" style="top:-2px;position:relative;"></i> Mana</a>
+            <a href="index.html" class="item">Home</a>
+            <a href="icons.html" class="item">Mana Icons</a>
+            <a href="attributes.html" class="item">Attributes</a>
+            <a href="http://github.com/andrewgioia/Mana" class="item">GitHub Project</a>
+            <span class="item">
+                <iframe src="https://ghbtns.com/github-btn.html?user=andrewgioia&repo=mana&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px" style="margin-bottom: -4px;"></iframe>
+            </span>
+            <span class="item">
+                Created by
+                <a href="http://andrewgioia.com">Andrew Gioia</a>
+            </span>
+        </div>
+    </section>
+
+    <header>
+        <div class="wrapper">
+            <h1 class="sub">Mana &amp; Card Icons</h1>
+            <a class="dl button float-right" href="https://github.com/andrewgioia/Mana/archive/master.zip">
+                <i class="ms ms-instant"></i>
+                Download
+            </a>
+            <h2 class="sub">The complete Mana copy-able reference</h2>
+        </div>
+    </header>
+
+    <main>
+        <div class="wrapper">
+            <section>
+                <h3>
+                    To use Mana on the desktop, install mana.otf, set it
+                    as the font in your application, then copy and paste the
+                    icons (not the unicode) directly from this page into
+                    your designs. The UTF8 representation is provided as
+                    a reference as well.
+                </h3>
+            </section>
+            <section class="content">
+                <h4>Icons, CSS Class, and Unicode</h4>
+                <div class="vectors">
+                    <span class="utf"><i>&#xe600;</i> ms-w <code>&amp;#xe600;</code></span>
+                    <span class="utf"><i>&#xe601;</i> ms-u <code>&amp;#xe601;</code></span>
+                    <span class="utf"><i>&#xe602;</i> ms-b <code>&amp;#xe602;</code></span>
+                    <span class="utf"><i>&#xe603;</i> ms-r <code>&amp;#xe603;</code></span>
+                    <span class="utf"><i>&#xe604;</i> ms-g <code>&amp;#xe604;</code></span>
+                    <span class="utf"><i>&#xe997;</i> ms-w-original <code>&amp;#xe997;</code></span>
+                    <span class="utf"><i>&#xe998;</i> ms-w-list <code>&amp;#xe998;</code></span>
+                    <span class="utf"><i>&#xe904;</i> ms-c <code>&amp;#xe904;</code></span>
+                    <span class="utf"><i>&#xe605;</i> ms-0 <code>&amp;#xe605;</code></span>
+                    <span class="utf"><i>&#xe606;</i> ms-1 <code>&amp;#xe606;</code></span>
+                    <span class="utf"><i>&#xe607;</i> ms-2 <code>&amp;#xe607;</code></span>
+                    <span class="utf"><i>&#xe608;</i> ms-3 <code>&amp;#xe608;</code></span>
+                    <span class="utf"><i>&#xe609;</i> ms-4 <code>&amp;#xe609;</code></span>
+                    <span class="utf"><i>&#xe60a;</i> ms-5 <code>&amp;#xe60a;</code></span>
+                    <span class="utf"><i>&#xe60b;</i> ms-6 <code>&amp;#xe60b;</code></span>
+                    <span class="utf"><i>&#xe60c;</i> ms-7 <code>&amp;#xe60c;</code></span>
+                    <span class="utf"><i>&#xe60d;</i> ms-8 <code>&amp;#xe60d;</code></span>
+                    <span class="utf"><i>&#xe60e;</i> ms-9 <code>&amp;#xe60e;</code></span>
+                    <span class="utf"><i>&#xe60f;</i> ms-10 <code>&amp;#xe60f;</code></span>
+                    <span class="utf"><i>&#xe610;</i> ms-11 <code>&amp;#xe610;</code></span>
+                    <span class="utf"><i>&#xe611;</i> ms-12 <code>&amp;#xe611;</code></span>
+                    <span class="utf"><i>&#xe612;</i> ms-13 <code>&amp;#xe612;</code></span>
+                    <span class="utf"><i>&#xe613;</i> ms-14 <code>&amp;#xe613;</code></span>
+                    <span class="utf"><i>&#xe614;</i> ms-15 <code>&amp;#xe614;</code></span>
+                    <span class="utf"><i>&#xe62a;</i> ms-16 <code>&amp;#xe62a;</code></span>
+                    <span class="utf"><i>&#xe62b;</i> ms-17 <code>&amp;#xe62b;</code></span>
+                    <span class="utf"><i>&#xe62c;</i> ms-18 <code>&amp;#xe62c;</code></span>
+                    <span class="utf"><i>&#xe62d;</i> ms-19 <code>&amp;#xe62d;</code></span>
+                    <span class="utf"><i>&#xe62e;</i> ms-20 <code>&amp;#xe62e;</code></span>
+                    <span class="utf"><i>&#xe615;</i> ms-x <code>&amp;#xe615;</code></span>
+                    <span class="utf"><i>&#xe616;</i> ms-y <code>&amp;#xe616;</code></span>
+                    <span class="utf"><i>&#xe617;</i> ms-z <code>&amp;#xe617;</code></span>
+                    <span class="utf"><i>&#xe618;</i> ms-p <code>&amp;#xe618;</code></span>
+                    <span class="utf"><i>&#xe619;</i> ms-s <code>&amp;#xe619;</code></span>
+                    <span class="utf"><i>&#xe996;</i> ms-s-mtga <code>&amp;#xe996;</code></span>
+                    <span class="utf"><i>&#xe907;</i> ms-e <code>&amp;#xe907;</code></span>
+                    <div class="clear"></div>
+                </div>
+                <div class="vectors">
+                    <span class="utf"><i>&#xe902;</i> ms-1-2 <code>&amp;#xe902;</code></span>
+                    <span class="utf"><i>&#xe929;</i> ms-acorn <code>&amp;#xe929;</code></span>
+                    <span class="utf"><i>&#xe923;</i> ms-artist-brush <code>&amp;#xe923;</code></span>
+                    <span class="utf"><i>&#xe924;</i> ms-artist-nib <code>&amp;#xe924;</code></span>
+                    <span class="utf"><i>&#xe61d;</i> ms-chaos <code>&amp;#xe61d;</code></span>
+                    <span class="utf"><i>&#xe9d7;</i> ms-defense <code>&amp;#xe9d7;</code></span>
+                    <span class="utf"><i>&#xe9d8;</i> ms-defense-outline <code>&amp;#xe9d8;</code></span>
+                    <span class="utf"><i>&#xe903;</i> ms-infinity <code>&amp;#xe903;</code></span>
+                    <span class="utf"><i>&#xe9c7;</i> ms-level <code>&amp;#xe9c7;</code></span>
+                    <span class="utf"><i>&#xe9c8;</i> ms-level-border <code>&amp;#xe9c8;</code></span>
+                    <span class="utf"><i>&#xe627;</i> ms-loyalty-up <code>&amp;#xe627;</code></span>
+                    <span class="utf"><i>&#xe625;</i> ms-loyalty-down <code>&amp;#xe625;</code></span>
+                    <span class="utf"><i>&#xe626;</i> ms-loyalty-zero <code>&amp;#xe626;</code></span>
+                    <span class="utf"><i>&#xe628;</i> ms-loyalty-start <code>&amp;#xe628;</code></span>
+                    <span class="utf"><i>&#xe985;</i> ms-multicolor <code>&amp;#xe985;</code></span>
+                    <span class="utf"><i>&#xe921;</i> ms-power <code>&amp;#xe921;</code></span>
+                    <span class="utf"><i>&#xe92a;</i> ms-saga <code>&amp;#xe92a;</code></span>
+                    <span class="utf"><i>&#xe61a;</i> ms-tap <code>&amp;#xe61a;</code></span>
+                    <span class="utf"><i>&#xe61c;</i> ms-tap-alt <code>&amp;#xe61c;</code></span>
+                    <span class="utf"><i>&#xe922;</i> ms-toughness <code>&amp;#xe922;</code></span>
+                    <span class="utf"><i>&#xe61b;</i> ms-untap <code>&amp;#xe61b;</code></span>
+                    <span class="utf"><i>&#xe98a;</i> ms-ci-1 <code>&amp;#xe98a;</code></span>
+                    <span class="utf"><i>&#xe98b;</i> ms-ci-2 <code>&amp;#xe98b;</code></span>
+                    <span class="utf"><i>&#xe98c;</i> ms-ci-3 <code>&amp;#xe98c;</code></span>
+                    <span class="utf"><i>&#xe98d;</i> ms-ci-4 <code>&amp;#xe98d;</code></span>
+                    <span class="utf"><i>&#xe98e;</i> ms-ci-5 <code>&amp;#xe98e;</code></span>
+                    <div class="clear"></div>
+                </div>
+                <div class="vectors">
+                    <span class="utf"><i style="width:auto;">&#xe900;</i> ms-100 <code>&amp;#xe900;</code></span>
+                    <span class="utf long"><i class="long">&#xe901;</i> ms-1000000 <code>&amp;#xe901;</code></span>
+                    <div class="clear"></div>
+                </div>
+                <div class="vectors overflow">
+                    <span class="utf"><i>&#xe61e;</i> ms-artifact <code>&amp;#xe61e;</code></span>
+                    <span class="utf"><i>&#xe9d1;</i> ms-battle <code>&amp;#xe9d1;</code></span>
+                    <span class="utf"><i>&#xe9d2;</i> ms-battle-siege <code>&amp;#xe9d2;</code></span>
+                    <span class="utf"><i>&#xe972;</i> ms-conspiracy <code>&amp;#xe972;</code></span>
+                    <span class="utf"><i>&#xe61f;</i> ms-creature <code>&amp;#xe61f;</code></span>
+                    <span class="utf"><i>&#xe620;</i> ms-enchantment <code>&amp;#xe620;</code></span>
+                    <span class="utf"><i>&#xe629;</i> ms-flashback <code>&amp;#xe629;</code></span>
+                    <span class="utf"><i>&#xe621;</i> ms-instant <code>&amp;#xe621;</code></span>
+                    <span class="utf"><i>&#xe622;</i> ms-land <code>&amp;#xe622;</code></span>
+                    <span class="utf"><i>&#xe925;</i> ms-multiple <code>&amp;#xe925;</code></span>
+                    <span class="utf"><i>&#xe96e;</i> ms-phenomenon <code>&amp;#xe96e;</code></span>
+                    <span class="utf"><i>&#xe96f;</i> ms-plane <code>&amp;#xe96f;</code></span>
+                    <span class="utf"><i>&#xe623;</i> ms-planeswalker <code>&amp;#xe623;</code></span>
+                    <span class="utf"><i>&#xe96c;</i> ms-rarity <code>&amp;#xe96c;</code></span>
+                    <span class="utf"><i>&#xe970;</i> ms-scheme <code>&amp;#xe970;</code></span>
+                    <span class="utf"><i>&#xe624;</i> ms-sorcery <code>&amp;#xe624;</code></span>
+                    <span class="utf"><i>&#xe972;</i> ms-token <code>&amp;#xe96d;</code></span>
+                    <span class="utf"><i>&#xe925;</i> ms-tribal <code>&amp;#xe925;</code></span>
+                    <span class="utf"><i>&#xe971;</i> ms-vanguard <code>&amp;#xe971;</code></span>
+                    <div class="clear"></div>
+                </div>
+                <div class="vectors overflow">
+                    <span class="utf"><i>&#xe905;</i> ms-dfc-night <code>&amp;#xe905;</code></span>
+                    <span class="utf"><i>&#xe906;</i> ms-dfc-day <code>&amp;#xe906;</code></span>
+                    <span class="utf"><i>&#xe909;</i> ms-dfc-spark <code>&amp;#xe909;</code></span>
+                    <span class="utf"><i>&#xe908;</i> ms-dfc-ignite <code>&amp;#xe908;</code></span>
+                    <span class="utf"><i>&#xe90b;</i> ms-dfc-moon <code>&amp;#xe90b;</code></span>
+                    <span class="utf"><i>&#xe90a;</i> ms-dfc-emrakul <code>&amp;#xe90a;</code></span>
+                    <span class="utf"><i>&#xe920;</i> ms-dfc-enchantment <code>&amp;#xe920;</code></span>
+                    <span class="utf"><i>&#xe98f;</i> ms-dfc-lesson <code>&amp;#xe98f;</code></span>
+                    <span class="utf"><i>&#xe9d3;</i> ms-dfc-front <code>&amp;#xe9d3;</code></span>
+                    <span class="utf"><i>&#xe9d4;</i> ms-dfc-back <code>&amp;#xe9d4;</code></span>
+                    <span class="utf"><i>&#xe9d5;</i> ms-dfc-meld <code>&amp;#xe9d5;</code></span>
+                    <span class="utf"><i>&#xe9d6;</i> ms-dfc-facedown <code>&amp;#xe9d6;</code></span>
+                    <span class="utf"><i>&#xe983;</i> ms-dfc-modal-face <code>&amp;#xe983;</code></span>
+                    <span class="utf"><i>&#xe984;</i> ms-dfc-modal-back <code>&amp;#xe984;</code></span>
+
+                    <div class="clear"></div>
+                </div>
+                <div class="vectors overflow">
+                    <span class="utf"><i>&#xe90c;</i> ms-guild-azorius <code>&amp;#xe90c;</code></span>
+                    <span class="utf"><i>&#xe90d;</i> ms-guild-boros <code>&amp;#xe90d;</code></span>
+                    <span class="utf"><i>&#xe90e;</i> ms-guild-dimir <code>&amp;#xe90e;</code></span>
+                    <span class="utf"><i>&#xe90f;</i> ms-guild-golgari <code>&amp;#xe90f;</code></span>
+                    <span class="utf"><i>&#xe910;</i> ms-guild-gruul <code>&amp;#xe910;</code></span>
+                    <span class="utf"><i>&#xe911;</i> ms-guild-izzet <code>&amp;#xe911;</code></span>
+                    <span class="utf"><i>&#xe912;</i> ms-guild-orzhov <code>&amp;#xe912;</code></span>
+                    <span class="utf"><i>&#xe913;</i> ms-guild-rakdos <code>&amp;#xe913;</code></span>
+                    <span class="utf"><i>&#xe914;</i> ms-guild-selesnya <code>&amp;#xe914;</code></span>
+                    <span class="utf"><i>&#xe915;</i> ms-guild-simic <code>&amp;#xe915;</code></span>
+                    <span class="utf"><i>&#xe916;</i> ms-clan-abzan <code>&amp;#xe916;</code></span>
+                    <span class="utf"><i>&#xe917;</i> ms-clan-jeskai <code>&amp;#xe917;</code></span>
+                    <span class="utf"><i>&#xe918;</i> ms-clan-mardu <code>&amp;#xe918;</code></span>
+                    <span class="utf"><i>&#xe919;</i> ms-clan-sultai <code>&amp;#xe919;</code></span>
+                    <span class="utf"><i>&#xe91a;</i> ms-clan-temur <code>&amp;#xe91a;</code></span>
+                    <span class="utf"><i>&#xe91b;</i> ms-clan-atarka <code>&amp;#xe91b;</code></span>
+                    <span class="utf"><i>&#xe91c;</i> ms-clan-dromoka <code>&amp;#xe91c;</code></span>
+                    <span class="utf"><i>&#xe91d;</i> ms-clan-ojutai <code>&amp;#xe91d;</code></span>
+                    <span class="utf"><i>&#xe91e;</i> ms-clan-kolaghan <code>&amp;#xe91e;</code></span>
+                    <span class="utf"><i>&#xe91f;</i> ms-clan-silumgar <code>&amp;#xe91f;</code></span>
+                    <span class="utf"><i>&#xe926;</i> ms-polis-setessa <code>&amp;#xe926;</code></span>
+                    <span class="utf"><i>&#xe927;</i> ms-polis-akros <code>&amp;#xe927;</code></span>
+                    <span class="utf"><i>&#xe928;</i> ms-polis-meletis <code>&amp;#xe928;</code></span>
+                    <span class="utf"><i>&#xe99a;</i> ms-school-lorehold <code>&amp;#xe99a;</code></span>
+                    <span class="utf"><i>&#xe99a;</i> ms-school-prismari <code>&amp;#xe99c;</code></span>
+                    <span class="utf"><i>&#xe99a;</i> ms-school-quandrix <code>&amp;#xe99e;</code></span>
+                    <span class="utf"><i>&#xe99a;</i> ms-school-silverquill <code>&amp;#xe9a0;</code></span>
+                    <span class="utf"><i>&#xe99a;</i> ms-school-witherbloom <code>&amp;#xe9a2;</code></span>
+                    <div class="clear"></div>
+                </div>
+                <div class="vectors overflow">
+                    <span class="utf"><i>&#xe947;</i> ms-ability-activated <code>&amp;#xe947;</code></span>
+                    <span class="utf"><i>&#xe974;</i> ms-ability-adamant <code>&amp;#xe974;</code></span>
+                    <span class="utf"><i>&#xe975;</i> ms-ability-adapt <code>&amp;#xe975;</code></span>
+                    <span class="utf"><i>&#xe976;</i> ms-ability-addendum <code>&amp;#xe976;</code></span>
+                    <span class="utf"><i>&#xe948;</i> ms-ability-adventure <code>&amp;#xe948;</code></span>
+                    <span class="utf"><i>&#xe977;</i> ms-ability-afflict <code>&amp;#xe977;</code></span>
+                    <span class="utf"><i>&#xe978;</i> ms-ability-afterlife <code>&amp;#xe978;</code></span>
+                    <span class="utf"><i>&#xe979;</i> ms-ability-aftermath <code>&amp;#xe979;</code></span>
+                    <span class="utf"><i>&#xe9b5;</i> ms-ability-alliance <code>&amp;#xe9b5;</code></span>
+                    <span class="utf"><i>&#xe97a;</i> ms-ability-amass <code>&amp;#xe97a;</code></span>
+                    <span class="utf"><i>&#xe94a;</i> ms-ability-ascend <code>&amp;#xe94a;</code></span>
+                    <span class="utf"><i>&#xe9d9;</i> ms-ability-backup <code>&amp;#xe9d9;</code></span>
+                    <span class="utf"><i>&#xe9e2;</i> ms-ability-bargain <code>&amp;#xe9e2;</code></span>
+                    <span class="utf"><i>&#xe9b4;</i> ms-ability-blitz <code>&amp;#xe9b4;</code></span>
+                    <span class="utf"><i>&#xe991;</i> ms-ability-boast <code>&amp;#xe991;</code></span>
+                    <span class="utf"><i>&#xe9b7;</i> ms-ability-casualty <code>&amp;#xe9b7;</code></span>
+                    <span class="utf"><i>&#xe9e3;</i> ms-ability-celebration <code>&amp;#xe9e3;</code></span>
+                    <span class="utf"><i>&#xe9a6;</i> ms-ability-changeling <code>&amp;#xe9a6;</code></span>
+                    <span class="utf"><i>&#xe9b1;</i> ms-ability-channel <code>&amp;#xe9b1;</code></span>
+                    <span class="utf"><i>&#xe9ad;</i> ms-ability-cleave <code>&amp;#xe9ad;</code></span>
+                    <span class="utf"><i>&#xe97b;</i> ms-ability-companion <code>&amp;#xe97b;</code></span>
+                    <span class="utf"><i>&#xe97c;</i> ms-ability-constellation <code>&amp;#xe97c;</code></span>
+                    <span class="utf"><i>&#xe9da;</i> ms-ability-convoke <code>&amp;#xe9da;</code></span>
+                    <span class="utf"><i>&#xe949;</i> ms-ability-convoke-original <code>&amp;#xe949;</code></span>
+                    <span class="utf"><i>&#xe9c0;</i> ms-ability-corrupted <code>&amp;#xe9c0;</code></span>
+                    <span class="utf"><i>&#xe9aa;</i> ms-ability-coven <code>&amp;#xe9aa;</code></span>
+                    <span class="utf"><i>&#xe999;</i> ms-ability-d20 <code>&amp;#xe999;</code></span>
+                    <span class="utf"><i>&#xe9a8;</i> ms-ability-day-night <code>&amp;#xe9a8;</code></span>
+                    <span class="utf"><i>&#xe9a9;</i> ms-ability-daybound-nightbound <code>&amp;#xe9a9;</code></span>
+                    <span class="utf"><i>&#xe94b;</i> ms-ability-deathtouch <code>&amp;#xe94b;</code></span>
+                    <span class="utf"><i>&#xe9ac;</i> ms-ability-decayed <code>&amp;#xe9ac;</code></span>
+                    <span class="utf"><i>&#xe94c;</i> ms-ability-defender <code>&amp;#xe94c;</code></span>
+                    <span class="utf"><i>&#xe97d;</i> ms-ability-devotion <code>&amp;#xe97d;</code></span>
+                    <span class="utf"><i>&#xe9ae;</i> ms-ability-disturb <code>&amp;#xe9ae;</code></span>
+                    <span class="utf"><i>&#xe9a7;</i> ms-ability-domain <code>&amp;#xe9a7;</code></span>
+                    <span class="utf"><i>&#xe94d;</i> ms-ability-double-strike <code>&amp;#xe94d;</code></span>
+                    <span class="utf"><i>&#xe995;</i> ms-ability-dungeon <code>&amp;#xe995;</code></span>
+                    <span class="utf"><i>&#xe97e;</i> ms-ability-embalm <code>&amp;#xe97e;</code></span>
+                    <span class="utf"><i>&#xe9ba;</i> ms-ability-enlist <code>&amp;#xe9ba;</code></span>
+                    <span class="utf"><i>&#xe9dc;</i> ms-ability-enrage <code>&amp;#xe9dc;</code></span>
+                    <span class="utf"><i>&#xe94e;</i> ms-ability-enrage-original <code>&amp;#xe94e;</code></span>
+                    <span class="utf"><i>&#xe969;</i> ms-ability-escape <code>&amp;#xe969;</code></span>
+                    <span class="utf"><i>&#xe97f;</i> ms-ability-eternalize <code>&amp;#xe97f;</code></span>
+                    <span class="utf"><i>&#xe9af;</i> ms-ability-exploit <code>&amp;#xe9af;</code></span>
+                    <span class="utf"><i>&#xe94f;</i> ms-ability-explore <code>&amp;#xe94f;</code></span>
+                    <span class="utf"><i>&#xe950;</i> ms-ability-first-strike <code>&amp;#xe950;</code></span>
+                    <span class="utf"><i>&#xe951;</i> ms-ability-flash <code>&amp;#xe951;</code></span>
+                    <span class="utf"><i>&#xe952;</i> ms-ability-flying <code>&amp;#xe952;</code></span>
+                    <span class="utf"><i>&#xe9c1;</i> ms-ability-for-mirrodin <code>&amp;#xe9c1;</code></span>
+                    <span class="utf"><i>&#xe990;</i> ms-ability-foretell <code>&amp;#xe990;</code></span>
+                    <span class="utf"><i>&#xe9e4;</i> ms-ability-haktos-the-unscarred <code>&amp;#xe9e4;</code></span>
+                    <span class="utf"><i>&#xe953;</i> ms-ability-haste <code>&amp;#xe953;</code></span>
+                    <span class="utf"><i>&#xe954;</i> ms-ability-hexproof <code>&amp;#xe954;</code></span>
+                    <span class="utf"><i>&#xe955;</i> ms-ability-hexproof-black <code>&amp;#xe955;</code></span>
+                    <span class="utf"><i>&#xe956;</i> ms-ability-hexproof-blue <code>&amp;#xe956;</code></span>
+                    <span class="utf"><i>&#xe957;</i> ms-ability-hexproof-green <code>&amp;#xe957;</code></span>
+                    <span class="utf"><i>&#xe958;</i> ms-ability-hexproof-red <code>&amp;#xe958;</code></span>
+                    <span class="utf"><i>&#xe959;</i> ms-ability-hexproof-white <code>&amp;#xe959;</code></span>
+                    <span class="utf"><i>&#xe9b8;</i> ms-ability-hideaway <code>&amp;#xe9b8;</code></span>
+                    <span class="utf"><i>&#xe9db;</i> ms-ability-incubate <code>&amp;#xe9db;</code></span>
+                    <span class="utf"><i>&#xe95a;</i> ms-ability-indestructible <code>&amp;#xe95a;</code></span>
+                    <span class="utf"><i>&#xe9ab;</i> ms-ability-investigate <code>&amp;#xe9ab;</code></span>
+                    <span class="utf"><i>&#xe95b;</i> ms-ability-jumpstart <code>&amp;#xe95b;</code></span>
+                    <span class="utf"><i>&#xe989;</i> ms-ability-kicker <code>&amp;#xe989;</code></span>
+                    <span class="utf"><i>&#xe988;</i> ms-ability-landfall <code>&amp;#xe988;</code></span>
+                    <span class="utf"><i>&#xe994;</i> ms-ability-learn <code>&amp;#xe994;</code></span>
+                    <span class="utf"><i>&#xe95c;</i> ms-ability-lifelink <code>&amp;#xe95c;</code></span>
+                    <span class="utf"><i>&#xe993;</i> ms-ability-magecraft <code>&amp;#xe993;</code></span>
+                    <span class="utf"><i>&#xe9bd;</i> ms-ability-meld <code>&amp;#xe9bd;</code></span>
+                    <span class="utf"><i>&#xe95d;</i> ms-ability-menace <code>&amp;#xe95d;</code></span>
+                    <span class="utf"><i>&#xe95e;</i> ms-ability-mentor <code>&amp;#xe95e;</code></span>
+                    <span class="utf"><i>&#xe980;</i> ms-ability-mutate <code>&amp;#xe980;</code></span>
+                    <span class="utf"><i>&#xe9b2;</i> ms-ability-ninjutsu <code>&amp;#xe9b2;</code></span>
+                    <span class="utf"><i>&#xe9b6;</i> ms-ability-obscura <code>&amp;#xe9b6;</code></span>
+                    <span class="utf"><i>&#xe987;</i> ms-ability-party <code>&amp;#xe987;</code></span>
+                    <span class="utf"><i>&#xe618;</i> ms-ability-phyrexian <code>&amp;#xe618;</code></span>
+                    <span class="utf"><i>&#xe981;</i> ms-ability-proliferate <code>&amp;#xe981;</code></span>
+                    <span class="utf"><i>&#xe9be;</i> ms-ability-prototype <code>&amp;#xe9be;</code></span>
+                    <span class="utf"><i>&#xe982;</i> ms-ability-prowess <code>&amp;#xe982;</code></span>
+                    <span class="utf"><i>&#xe95f;</i> ms-ability-raid <code>&amp;#xe95f;</code></span>
+                    <span class="utf"><i>&#xe960;</i> ms-ability-reach <code>&amp;#xe960;</code></span>
+                    <span class="utf"><i>&#xe9b9;</i> ms-ability-read-ahead <code>&amp;#xe9b9;</code></span>
+                    <span class="utf"><i>&#xe9b3;</i> ms-ability-reconfigure <code>&amp;#xe9b3;</code></span>
+                    <span class="utf"><i>&#xe961;</i> ms-ability-revolt <code>&amp;#xe961;</code></span>
+                    <span class="utf"><i>&#xe973;</i> ms-ability-riot <code>&amp;#xe973;</code></span>
+                    <span class="utf"><i>&#xe9e5;</i> ms-ability-robber-of-the-rich <code>&amp;#xe9e5;</code></span>
+                    <span class="utf"><i>&#xe9e6;</i> ms-ability-role-cursed <code>&amp;#xe9e6;</code></span>
+                    <span class="utf"><i>&#xe9e7;</i> ms-ability-role-monster <code>&amp;#xe9e7;</code></span>
+                    <span class="utf"><i>&#xe9e8;</i> ms-ability-role-royal <code>&amp;#xe9e8;</code></span>
+                    <span class="utf"><i>&#xe9e9;</i> ms-ability-role-sorceror <code>&amp;#xe9e9;</code></span>
+                    <span class="utf"><i>&#xe9ea;</i> ms-ability-role-wicked <code>&amp;#xe9ea;</code></span>
+                    <span class="utf"><i>&#xe9eb;</i> ms-ability-role-young-hero <code>&amp;#xe9eb;</code></span>
+                    <span class="utf"><i>&#xe9bb;</i> ms-ability-specialize <code>&amp;#xe9bb;</code></span>
+                    <span class="utf"><i>&#xe96b;</i> ms-ability-spectacle <code>&amp;#xe96b;</code></span>
+                    <span class="utf"><i>&#xe962;</i> ms-ability-static <code>&amp;#xe962;</code></span>
+                    <span class="utf"><i>&#xe96a;</i> ms-ability-summoning-sickness <code>&amp;#xe96a;</code></span>
+                    <span class="utf"><i>&#xe963;</i> ms-ability-surveil <code>&amp;#xe963;</code></span>
+                    <span class="utf"><i>&#xe9bf;</i> ms-ability-toxic <code>&amp;#xe9bf;</code></span>
+                    <span class="utf"><i>&#xe9b0;</i> ms-ability-training <code>&amp;#xe9b0;</code></span>
+                    <span class="utf"><i>&#xe964;</i> ms-ability-trample <code>&amp;#xe964;</code></span>
+                    <span class="utf"><i>&#xe965;</i> ms-ability-transform <code>&amp;#xe965;</code></span>
+                    <span class="utf"><i>&#xe966;</i> ms-ability-triggered <code>&amp;#xe966;</code></span>
+                    <span class="utf"><i>&#xe9bc;</i> ms-ability-unearth <code>&amp;#xe9bc;</code></span>
+                    <span class="utf"><i>&#xe967;</i> ms-ability-undergrowth <code>&amp;#xe967;</code></span>
+                    <span class="utf"><i>&#xe968;</i> ms-ability-vigilance <code>&amp;#xe968;</code></span>
+                    <span class="utf"><i>&#xe992;</i> ms-ability-ward <code>&amp;#xe992;</code></span>
+                    <div class="clear"></div>
+                </div>
+                <div class="vectors overflow">
+                    <span class="utf"><i>&#xe92b;</i> ms-counter-arrow <code>&amp;#xe92b;</code></span>
+                    <span class="utf"><i>&#xe92c;</i> ms-counter-brick <code>&amp;#xe92c;</code></span>
+                    <span class="utf"><i>&#xe92d;</i> ms-counter-charge <code>&amp;#xe92d;</code></span>
+                    <span class="utf"><i>&#xe9dd;</i> ms-counter-damage <code>&amp;#xe9dd;</code></span>
+                    <span class="utf"><i>&#xe92e;</i> ms-counter-devotion <code>&amp;#xe92e;</code></span>
+                    <span class="utf"><i>&#xe92f;</i> ms-counter-doom <code>&amp;#xe92f;</code></span>
+                    <span class="utf"><i>&#xe930;</i> ms-counter-echo <code>&amp;#xe930;</code></span>
+                    <span class="utf"><i>&#xe931;</i> ms-counter-flame <code>&amp;#xe931;</code></span>
+                    <span class="utf"><i>&#xe932;</i> ms-counter-flood <code>&amp;#xe932;</code></span>
+                    <span class="utf"><i>&#xe933;</i> ms-counter-fungus <code>&amp;#xe933;</code></span>
+                    <span class="utf"><i>&#xe934;</i> ms-counter-gold <code>&amp;#xe934;</code></span>
+                    <span class="utf"><i>&#xe935;</i> ms-counter-ki <code>&amp;#xe935;</code></span>
+                    <span class="utf"><i>&#xe936;</i> ms-counter-lore <code>&amp;#xe936;</code></span>
+                    <span class="utf"><i>&#xe937;</i> ms-counter-loyalty <code>&amp;#xe937;</code></span>
+                    <span class="utf"><i>&#xe938;</i> ms-counter-mining <code>&amp;#xe938;</code></span>
+                    <span class="utf"><i>&#xe939;</i> ms-counter-minus <code>&amp;#xe939;</code></span>
+                    <span class="utf"><i>&#xe943;</i> ms-counter-minus-uneven <code>&amp;#xe943;</code></span>
+                    <span class="utf"><i>&#xe93a;</i> ms-counter-muster <code>&amp;#xe93a;</code></span>
+                    <span class="utf"><i>&#xe93b;</i> ms-counter-paw <code>&amp;#xe93b;</code></span>
+                    <span class="utf"><i>&#xe93c;</i> ms-counter-pin <code>&amp;#xe93c;</code></span>
+                    <span class="utf"><i>&#xe93d;</i> ms-counter-plus <code>&amp;#xe93d;</code></span>
+                    <span class="utf"><i>&#xe944;</i> ms-counter-plus-uneven <code>&amp;#xe944;</code></span>
+                    <span class="utf"><i>&#xe93e;</i> ms-counter-scream <code>&amp;#xe93e;</code></span>
+                    <span class="utf"><i>&#xe9c3;</i> ms-counter-shield <code>&amp;#xe9c3;</code></span>
+                    <span class="utf"><i>&#xe93f;</i> ms-counter-skeleton <code>&amp;#xe93f;</code></span>
+                    <span class="utf"><i>&#xe940;</i> ms-counter-skull <code>&amp;#xe940;</code></span>
+                    <span class="utf"><i>&#xe9c2;</i> ms-counter-stun <code>&amp;#xe9c2;</code></span>
+                    <span class="utf"><i>&#xe941;</i> ms-counter-slime <code>&amp;#xe941;</code></span>
+                    <span class="utf"><i>&#xe942;</i> ms-counter-time <code>&amp;#xe942;</code></span>
+                    <span class="utf"><i>&#xe945;</i> ms-counter-verse <code>&amp;#xe945;</code></span>
+                    <span class="utf"><i>&#xe9ec;</i> ms-counter-void <code>&amp;#xe9ec;</code></span>
+                    <span class="utf"><i>&#xe946;</i> ms-counter-vortex <code>&amp;#xe946;</code></span>
+                    <div class="clear"></div>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <footer>
+        <div class="wrapper">
+            <div class="float-left">
+                <p>Made with &hearts; by <a href="https://andrewgioia.com">Andrew Gioia</a></p>
+            </div>
+            <div class="float-right" style="text-align: right;">
+                <p>
+                    All mana images and card symbols &copy; <a href="http://magicthegathering.com">Wizards of the Coast</a><br />
+                    The Mana font is licensed under the the <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a><br />
+                    Mana CSS, LESS, and Sass files are licensed under the <a href="http://opensource.org/licenses/mit-license.html">MIT License</a><br />
+                </p>
+            </div>
+            <div class="clear"></div>
+        </div>
+    </footer>
+
+</body>
+</html>

docs/index.html

@@ -0,0 +1,107 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
+    <title>Mana | Andrew Gioia</title>
+    <link rel="stylesheet" href="assets/mana.min.css" />
+    <link rel="stylesheet" href="assets/docs.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+</head>
+<body>
+
+    <section id="banner">
+        <div class="wrapper">
+            <a href="index.html" class="item">Home</a>
+            <a href="icons.html" class="item">Mana Icons</a>
+            <a href="attributes.html" class="item">Attributes</a>
+            <a href="https://github.com/andrewgioia/Mana" class="item">GitHub Project</a>
+            <span class="item">
+                <iframe src="https://ghbtns.com/github-btn.html?user=andrewgioia&repo=mana&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px" style="margin-bottom: -4px;"></iframe>
+            </span>
+            <span class="item">
+                Created by
+                <a href="http://andrewgioia.com">Andrew Gioia</a>
+            </span>
+        </div>
+    </section>
+
+    <header class="main">
+        <div class="wrapper">
+            <div class="bigicon">
+                <i class="ms ms-g"></i>
+            </div>
+            <h1>Mana</h1>
+            <h2>Magic: the Gathering card symbol font</h2>
+            <div class="actions">
+                <a class="dl button" href="https://github.com/andrewgioia/mana/archive/master.zip">
+                    <i class="ms ms-instant"></i>
+                    Download
+                </a>
+                <a class="vs button" href="icons.html">
+                    <i class="ms ms-tap"></i>
+                    View Mana Icons
+                </a>
+            </div>
+            <p>
+                Current version 1.15.9 includes all known mana and card symbols up to Wilds of Eldraine.
+            </p>
+        </div>
+    </header>
+
+    <main>
+        <div class="wrapper">
+            <section>
+                <h3><strong>Mana is a complete set of scalable vector icons for Magic mana (and other card) symbols.</strong> Drop them into your application, website, or custom cards (like this <i class="ms ms-cost ms-g"></i>) and control their size, color, drop shadow, or any dimension just as you would with text!</h3>
+            </section>
+            <section class="content">
+                <h4>Using Mana</h4>
+                <p>Each mana/card symbol has its own font character. Display them in a manner similar to <a href="https://fontawesome.io">Font Awesome</a> using the <code>&lt;i class="ms ..."&gt;&lt;/i&gt;</code> element. There are class names for each mana color (w, u, b, r, g, c) and for the various symbols that appear on cards (like tap). See the <a href="icons.html">full list</a> of available symbols.</p>
+                <p>To use Mana, move the font files to your /fonts directory and include the <code>mana.css</code> stylesheet in your <code>&lt;head&gt;</code>:</p>
+                <blockquote>
+                    &lt;<span class="e">link</span> <span class="a">href</span>=<span class="v">"css/mana.css"</span> <span class="a">rel</span>=<span class="v">"stylesheet"</span> <span class="a">type</span>=<span class="v">"text/css"</span> /&gt;
+                </blockquote>
+                <p><strong>New!</strong> You can also now use Mana via CDN thanks to the amazing <a href="https://jsdelivr.com">jsDelivr</a> project! You can include the latest version in your project (and note the name is "mana-font"):</p>
+                <blockquote>
+                    &lt;<span class="e">link</span> <span class="a">href</span>=<span class="v">"//cdn.jsdelivr.net/npm/mana-font@latest/css/mana.css"</span> <span class="a">rel</span>=<span class="v">"stylesheet"</span> <span class="a">type</span>=<span class="v">"text/css"</span> /&gt;
+                </blockquote>
+                <p>Insert set symbol icons by using the <code>.ms</code> class and then the mana/symbol code class(es), such as <code>.ms-u</code> for blue mana: <i class="ms ms-u"></i></p>
+                <blockquote>
+                    &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-u"</span>&gt;&lt;/<span class="e">i</span>&gt;
+                </blockquote>
+            </section>
+            <section class="content">
+                <h4>Editing the Source</h4>
+                <p>Feel free to edit the source files and compile Mana to fit your needs. All SVG glyphs are compiled into font files using the wonderful <a href="https://icomoon.io">IcoMoon</a> app. For styling, both LESS and Sass are included.</p>
+            </section>
+            <section class="content">
+                <h4>License</h4>
+                <p>Please review the following licenses for each component of Mana:</p>
+                <ul>
+                    <li>All mana and card symbol images are copyright Wizards of the Coast (<a href="https://magicthegathering.com">http://magicthegathering.com</a>)</li>
+                    <li>The Mana font is licensed under the the SIL OFL 1.1 (<a href="https://scripts.sil.org/OFL">http://scripts.sil.org/OFL</a>)</li>
+                    <li>Mana CSS, LESS, and Sass files are licensed under the MIT License (<a href="https://opensource.org/licenses/mit-license.html">http://opensource.org/licenses/mit-license.html</a>)</li>
+                </ul>
+                <p>Attribution is <strong>greatly appreciated</strong> but not required!</p>
+            </section>
+        </div>
+    </main>
+
+    <footer>
+        <div class="wrapper">
+            <div class="float-left">
+                <p>Made with &hearts; by <a href="https://andrewgioia.com">Andrew Gioia</a></p>
+            </div>
+            <div class="float-right" style="text-align: right;">
+                <p>
+                    All mana images and card symbols &copy; <a href="https://magicthegathering.com">Wizards of the Coast</a><br />
+                    The Mana font is licensed under the the <a href="https://scripts.sil.org/OFL">SIL OFL 1.1</a><br />
+                    Mana CSS, LESS, and Sass files are licensed under the <a href="https://opensource.org/licenses/mit-license.html">MIT License</a><br />
+                </p>
+            </div>
+            <div class="clear"></div>
+        </div>
+    </footer>
+
+</body>
+</html>

package-lock.json

@@ -0,0 +1,487 @@
+{
+  "name": "mana-font",
+  "version": "1.16.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "mana-font",
+      "version": "1.16.0",
+      "license": "MIT",
+      "devDependencies": {
+        "sass": "^1.80.4"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz",
+      "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.4.1",
+        "@parcel/watcher-darwin-arm64": "2.4.1",
+        "@parcel/watcher-darwin-x64": "2.4.1",
+        "@parcel/watcher-freebsd-x64": "2.4.1",
+        "@parcel/watcher-linux-arm-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-musl": "2.4.1",
+        "@parcel/watcher-linux-x64-glibc": "2.4.1",
+        "@parcel/watcher-linux-x64-musl": "2.4.1",
+        "@parcel/watcher-win32-arm64": "2.4.1",
+        "@parcel/watcher-win32-ia32": "2.4.1",
+        "@parcel/watcher-win32-x64": "2.4.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz",
+      "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz",
+      "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz",
+      "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz",
+      "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz",
+      "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz",
+      "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz",
+      "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz",
+      "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz",
+      "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz",
+      "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz",
+      "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz",
+      "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.80.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.4.tgz",
+      "integrity": "sha512-rhMQ2tSF5CsuuspvC94nPM9rToiAFw2h3JTrLlgmNw1MH79v8Cr3DH6KF6o6r+8oofY3iYVPUf66KzC8yuVN1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@parcel/watcher": "^2.4.1",
+        "chokidar": "^4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    }
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mana-font",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "description": "Magic: the Gathering mana symbol pictographic font",
   "main": "css/mana.css",
   "repository": {
@@ -22,12 +22,15 @@
     "sass": "sass sass/mana.scss css/mana.css --style=expanded",
     "sassmin": "sass sass/mana.scss css/mana.min.css --style compressed",
     "rename": "for f in `find fonts/*`; do mv -v \"$f\" \"`echo $f | tr '[A-Z]' '[a-z]'`\"; done",
-    "build": "npm run -s sass && npm run -s sassmin"
+    "build": "rsync -avzh ./fonts/mana* ./docs/fonts/ && npm run -s sass && npm run -s sassmin && rsync -avzh css/mana.min* ./docs/assets/"
   },
   "author": "Andrew Gioia <andrew@gioia.email>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/andrewgioia/mana/issues"
   },
-  "homepage": "https://mana.andrewgioia.com"
+  "homepage": "https://mana.andrewgioia.com",
+  "devDependencies": {
+    "sass": "^1.80.4"
+  }
 }

sass/_aliases.scss

@@ -1,5 +1,9 @@
+@use "variables";
+@use "colors";
+@use "icons";
+
 // color indicator convenience classes
-.#{$ms-prefix}-ci {
+.#{variables.$ms-prefix}-ci {
 
     // 4 color
     &-ubgr,
@@ -25,7 +29,7 @@
     &-rgub,
     &-rubg,
     &-rugb {
-        @extend .#{$ms-prefix}-ci-ubrg;
+        @extend .#{variables.$ms-prefix}-ci-ubrg;
     }
 
     &-bgrw,
@@ -51,7 +55,7 @@
     &-wgrb,
     &-wrbg,
     &-wrgb {
-        @extend .#{$ms-prefix}-ci-brgw;
+        @extend .#{variables.$ms-prefix}-ci-brgw;
     }
 
     &-gruw,
@@ -77,7 +81,7 @@
     &-wrug,
     &-wugr,
     &-wurg {
-        @extend .#{$ms-prefix}-ci-rgwu;
+        @extend .#{variables.$ms-prefix}-ci-rgwu;
     }
 
     &-bguw,
@@ -103,7 +107,7 @@
     &-wgub,
     &-wubg,
     &-wugb {
-        @extend .#{$ms-prefix}-ci-gwub;
+        @extend .#{variables.$ms-prefix}-ci-gwub;
     }
 
     &-bruw,
@@ -129,7 +133,7 @@
     &-wrbu,
     &-wrub,
     &-wurb {
-        @extend .#{$ms-prefix}-ci-wubr;
+        @extend .#{variables.$ms-prefix}-ci-wubr;
     }
 
     // 5 color
@@ -195,7 +199,7 @@
     &-rgwub,
     &-rubgw,
     &-rubwg {
-        @extend .#{$ms-prefix}-ci-wubrg;
+        @extend .#{variables.$ms-prefix}-ci-wubrg;
     }
     // breaking this up, editor was showing a warning with so many in a row
     &-rugbw,
@@ -255,38 +259,38 @@
     &-wugrb,
     &-wurbg,
     &-wurgb {
-        @extend .#{$ms-prefix}-ci-wubrg;
+        @extend .#{variables.$ms-prefix}-ci-wubrg;
     }
 }
 
 // watermark aliases
-.#{$ms-prefix}-watermark {
+.#{variables.$ms-prefix}-watermark {
-    &-abzan { @extend .#{$ms-prefix}-clan-abzan; }
+    &-abzan { @extend .#{variables.$ms-prefix}-clan-abzan; }
-    &-atarka { @extend .#{$ms-prefix}-clan-atarka; }
+    &-atarka { @extend .#{variables.$ms-prefix}-clan-atarka; }
-    &-azorius { @extend .#{$ms-prefix}-guild-azorius; }
+    &-azorius { @extend .#{variables.$ms-prefix}-guild-azorius; }
-    &-boros { @extend .#{$ms-prefix}-guild-boros; }
+    &-boros { @extend .#{variables.$ms-prefix}-guild-boros; }
-    &-dimir { @extend .#{$ms-prefix}-guild-dimir; }
+    &-dimir { @extend .#{variables.$ms-prefix}-guild-dimir; }
-    &-dromoka { @extend .#{$ms-prefix}-clan-dromoka; }
+    &-dromoka { @extend .#{variables.$ms-prefix}-clan-dromoka; }
-    &-foretell { @extend .#{$ms-prefix}-ability-foretell; }
+    &-foretell { @extend .#{variables.$ms-prefix}-ability-foretell; }
-    &-golgari { @extend .#{$ms-prefix}-guild-golgari; }
+    &-golgari { @extend .#{variables.$ms-prefix}-guild-golgari; }
-    &-gruul { @extend .#{$ms-prefix}-guild-gruul; }
+    &-gruul { @extend .#{variables.$ms-prefix}-guild-gruul; }
-    &-izzet { @extend .#{$ms-prefix}-guild-izzet; }
+    &-izzet { @extend .#{variables.$ms-prefix}-guild-izzet; }
-    &-jeskai { @extend .#{$ms-prefix}-clan-jeskai; }
+    &-jeskai { @extend .#{variables.$ms-prefix}-clan-jeskai; }
-    &-kolaghan { @extend .#{$ms-prefix}-clan-kolaghan; }
+    &-kolaghan { @extend .#{variables.$ms-prefix}-clan-kolaghan; }
-    &-lorehold { @extend .#{$ms-prefix}-school-lorehold; }
+    &-lorehold { @extend .#{variables.$ms-prefix}-school-lorehold; }
-    &-mardu { @extend .#{$ms-prefix}-clan-mardu; }
+    &-mardu { @extend .#{variables.$ms-prefix}-clan-mardu; }
-    &-ojutai { @extend .#{$ms-prefix}-clan-ojutai; }
+    &-ojutai { @extend .#{variables.$ms-prefix}-clan-ojutai; }
-    &-orzhov { @extend .#{$ms-prefix}-guild-orzhov; }
+    &-orzhov { @extend .#{variables.$ms-prefix}-guild-orzhov; }
-    &-phyrexian { @extend .#{$ms-prefix}-p; }
+    &-phyrexian { @extend .#{variables.$ms-prefix}-p; }
-    &-planeswalker { @extend .#{$ms-prefix}-planeswalker; }
+    &-planeswalker { @extend .#{variables.$ms-prefix}-planeswalker; }
-    &-prismari { @extend .#{$ms-prefix}-school-prismari; }
+    &-prismari { @extend .#{variables.$ms-prefix}-school-prismari; }
-    &-quandrix { @extend .#{$ms-prefix}-school-quandrix; }
+    &-quandrix { @extend .#{variables.$ms-prefix}-school-quandrix; }
-    &-rakdos { @extend .#{$ms-prefix}-guild-rakdos; }
+    &-rakdos { @extend .#{variables.$ms-prefix}-guild-rakdos; }
-    &-selesnya { @extend .#{$ms-prefix}-guild-selesnya; }
+    &-selesnya { @extend .#{variables.$ms-prefix}-guild-selesnya; }
-    &-silumgar { @extend .#{$ms-prefix}-clan-silumgar; }
+    &-silumgar { @extend .#{variables.$ms-prefix}-clan-silumgar; }
-    &-silverquill { @extend .#{$ms-prefix}-school-silverquill; }
+    &-silverquill { @extend .#{variables.$ms-prefix}-school-silverquill; }
-    &-simic { @extend .#{$ms-prefix}-guild-simic; }
+    &-simic { @extend .#{variables.$ms-prefix}-guild-simic; }
-    &-sultai { @extend .#{$ms-prefix}-clan-sultai; }
+    &-sultai { @extend .#{variables.$ms-prefix}-clan-sultai; }
-    &-temur { @extend .#{$ms-prefix}-clan-temur; }
+    &-temur { @extend .#{variables.$ms-prefix}-clan-temur; }
-    &-witherbloom { @extend .#{$ms-prefix}-school-witherbloom; }
+    &-witherbloom { @extend .#{variables.$ms-prefix}-school-witherbloom; }
 }

sass/_colors.scss

@@ -1,6 +1,8 @@
+@use "variables";
+
 // color indicator circles
 
-.#{$ms-prefix}-ci {
+.#{variables.$ms-prefix}-ci {
 
     // base styles
     border-radius: 100%;
@@ -10,7 +12,7 @@
     height: 1em;
 
     // set the border color
-    &::before { color: $ms-border-black; }
+    &::before { color: variables.$ms-border-black; }
 
     // borders based on number of colors in identity
     &-1::before { content: "\e98a"; }
@@ -20,47 +22,47 @@
     &-5::before { content: "\e98e"; }
 
     // 1 color backgrounds
-    &-w { background: $ms-white; }
+    &-w { background: variables.$ms-white; }
-    &-u { background: $ms-blue; }
+    &-u { background: variables.$ms-blue; }
-    &-b { background: $ms-black; }
+    &-b { background: variables.$ms-black; }
-    &-r { background: $ms-red; }
+    &-r { background: variables.$ms-red; }
-    &-g { background: $ms-green; }
+    &-g { background: variables.$ms-green; }
 
     // 2 color backgrounds
     &-wu,
     &-uw,
     &-azorius {
         background: conic-gradient(
-            $ms-white 45deg,
+            variables.$ms-white 45deg,
-            $ms-blue 45deg 225deg,
+            variables.$ms-blue 45deg 225deg,
-            $ms-white 225deg
+            variables.$ms-white 225deg
         );
     }
     &-wb,
     &-bw,
     &-orzhov {
         background: conic-gradient(
-            $ms-white 45deg,
+            variables.$ms-white 45deg,
-            $ms-black 45deg 225deg,
+            variables.$ms-black 45deg 225deg,
-            $ms-white 225deg
+            variables.$ms-white 225deg
         );
     }
     &-ub,
     &-bu,
     &-dimir {
         background: conic-gradient(
-            $ms-blue 45deg,
+            variables.$ms-blue 45deg,
-            $ms-black 45deg 225deg,
+            variables.$ms-black 45deg 225deg,
-            $ms-blue 225deg
+            variables.$ms-blue 225deg
         );
     }
     &-ur,
     &-ru,
     &-izzet {
         background: conic-gradient(
-            $ms-blue 45deg,
+            variables.$ms-blue 45deg,
-            $ms-red 45deg 225deg,
+            variables.$ms-red 45deg 225deg,
-            $ms-blue 225deg
+            variables.$ms-blue 225deg
         );
     }
     &-bg,
@@ -68,54 +70,54 @@
     &-golgari,
     &-rock {
         background: conic-gradient(
-            $ms-black 45deg,
+            variables.$ms-black 45deg,
-            $ms-green 45deg 225deg,
+            variables.$ms-green 45deg 225deg,
-            $ms-black 225deg
+            variables.$ms-black 225deg
         );
     }
     &-br,
     &-rb,
     &-rakdos {
         background: conic-gradient(
-            $ms-black 45deg,
+            variables.$ms-black 45deg,
-            $ms-red 45deg 225deg,
+            variables.$ms-red 45deg 225deg,
-            $ms-black 225deg
+            variables.$ms-black 225deg
         );
     }
     &-rw,
     &-wr,
     &-boros {
         background: conic-gradient(
-            $ms-red 45deg,
+            variables.$ms-red 45deg,
-            $ms-white 45deg 225deg,
+            variables.$ms-white 45deg 225deg,
-            $ms-red 225deg
+            variables.$ms-red 225deg
         );
     }
     &-rg,
     &-gr,
     &-gruul {
         background: conic-gradient(
-            $ms-red 45deg,
+            variables.$ms-red 45deg,
-            $ms-green 45deg 225deg,
+            variables.$ms-green 45deg 225deg,
-            $ms-red 225deg
+            variables.$ms-red 225deg
         );
     }
     &-gu,
     &-ug,
     &-simic {
         background: conic-gradient(
-            $ms-green 45deg,
+            variables.$ms-green 45deg,
-            $ms-blue 45deg 225deg,
+            variables.$ms-blue 45deg 225deg,
-            $ms-green 225deg
+            variables.$ms-green 225deg
         );
     }
     &-gw,
     &-wg,
     &-selesnya {
         background: conic-gradient(
-            $ms-green 45deg,
+            variables.$ms-green 45deg,
-            $ms-white 45deg 225deg,
+            variables.$ms-white 45deg 225deg,
-            $ms-green 225deg
+            variables.$ms-green 225deg
         );
     }
 
@@ -128,10 +130,10 @@
     &-guw,
     &-bant {
         background: conic-gradient(
-            $ms-blue 60deg,
+            variables.$ms-blue 60deg,
-            $ms-green 60deg 180deg,
+            variables.$ms-green 60deg 180deg,
-            $ms-white 180deg 300deg,
+            variables.$ms-white 180deg 300deg,
-            $ms-blue 300deg
+            variables.$ms-blue 300deg
         );
     }
     &-ubw,
@@ -142,10 +144,10 @@
     &-wbu,
     &-esper {
         background: conic-gradient(
-            $ms-black 60deg,
+            variables.$ms-black 60deg,
-            $ms-white 60deg 180deg,
+            variables.$ms-white 60deg 180deg,
-            $ms-blue 180deg 300deg,
+            variables.$ms-blue 180deg 300deg,
-            $ms-black 300deg
+            variables.$ms-black 300deg
         );
     }
     &-bru,
@@ -156,10 +158,10 @@
     &-urb,
     &-grixis {
         background: conic-gradient(
-            $ms-red 60deg,
+            variables.$ms-red 60deg,
-            $ms-blue 60deg 180deg,
+            variables.$ms-blue 60deg 180deg,
-            $ms-black 180deg 300deg,
+            variables.$ms-black 180deg 300deg,
-            $ms-red 300deg
+            variables.$ms-red 300deg
         );
     }
     &-rgb,
@@ -170,10 +172,10 @@
     &-bgr,
     &-jund {
         background: conic-gradient(
-            $ms-green 60deg,
+            variables.$ms-green 60deg,
-            $ms-black 60deg 180deg,
+            variables.$ms-black 60deg 180deg,
-            $ms-red 180deg 300deg,
+            variables.$ms-red 180deg 300deg,
-            $ms-green 300deg
+            variables.$ms-green 300deg
         );
     }
     &-gwr,
@@ -184,10 +186,10 @@
     &-rwg,
     &-naya {
         background: conic-gradient(
-            $ms-white 60deg,
+            variables.$ms-white 60deg,
-            $ms-red 60deg 180deg,
+            variables.$ms-red 60deg 180deg,
-            $ms-green 180deg 300deg,
+            variables.$ms-green 180deg 300deg,
-            $ms-white 300deg
+            variables.$ms-white 300deg
         );
     }
     &-wbg,
@@ -200,10 +202,10 @@
     &-junk,
     &-necra {
         background: conic-gradient(
-            $ms-black 60deg,
+            variables.$ms-black 60deg,
-            $ms-green 60deg 180deg,
+            variables.$ms-green 60deg 180deg,
-            $ms-white 180deg 300deg,
+            variables.$ms-white 180deg 300deg,
-            $ms-black 300deg
+            variables.$ms-black 300deg
         );
     }
     &-urw,
@@ -215,10 +217,10 @@
     &-jeskai,
     &-raka {
         background: conic-gradient(
-            $ms-red 60deg,
+            variables.$ms-red 60deg,
-            $ms-white 60deg 180deg,
+            variables.$ms-white 60deg 180deg,
-            $ms-blue 180deg 300deg,
+            variables.$ms-blue 180deg 300deg,
-            $ms-red 300deg
+            variables.$ms-red 300deg
         );
     }
     &-bgu,
@@ -231,10 +233,10 @@
     &-bug,
     &-ana {
         background: conic-gradient(
-            $ms-green 60deg,
+            variables.$ms-green 60deg,
-            $ms-blue 60deg 180deg,
+            variables.$ms-blue 60deg 180deg,
-            $ms-black 180deg 300deg,
+            variables.$ms-black 180deg 300deg,
-            $ms-green 300deg
+            variables.$ms-green 300deg
         );
     }
     &-rwb,
@@ -246,10 +248,10 @@
     &-mardu,
     &-dega {
         background: conic-gradient(
-            $ms-white 60deg,
+            variables.$ms-white 60deg,
-            $ms-black 60deg 180deg,
+            variables.$ms-black 60deg 180deg,
-            $ms-red 180deg 300deg,
+            variables.$ms-red 180deg 300deg,
-            $ms-white 300deg
+            variables.$ms-white 300deg
         );
     }
     &-gur,
@@ -261,10 +263,10 @@
     &-temur,
     &-ceta {
         background: conic-gradient(
-            $ms-blue 60deg,
+            variables.$ms-blue 60deg,
-            $ms-red 60deg 180deg,
+            variables.$ms-red 60deg 180deg,
-            $ms-green 180deg 300deg,
+            variables.$ms-green 180deg 300deg,
-            $ms-blue 300deg
+            variables.$ms-blue 300deg
         );
     }
 
@@ -272,51 +274,51 @@
     &-ubrg,
     &-glint {
         background: conic-gradient(
-            $ms-blue 45deg,
+            variables.$ms-blue 45deg,
-            $ms-black 45deg 135deg,
+            variables.$ms-black 45deg 135deg,
-            $ms-red 135deg 225deg,
+            variables.$ms-red 135deg 225deg,
-            $ms-green 225deg 315deg,
+            variables.$ms-green 225deg 315deg,
-            $ms-blue 315deg
+            variables.$ms-blue 315deg
         );
     }
     &-brgw,
     &-dune {
         background: conic-gradient(
-            $ms-black 45deg,
+            variables.$ms-black 45deg,
-            $ms-red 45deg 135deg,
+            variables.$ms-red 45deg 135deg,
-            $ms-green 135deg 225deg,
+            variables.$ms-green 135deg 225deg,
-            $ms-white 225deg 315deg,
+            variables.$ms-white 225deg 315deg,
-            $ms-black 315deg
+            variables.$ms-black 315deg
         );
     }
     &-rgwu,
     &-ink {
         background: conic-gradient(
-            $ms-red 45deg,
+            variables.$ms-red 45deg,
-            $ms-green 45deg 135deg,
+            variables.$ms-green 45deg 135deg,
-            $ms-white 135deg 225deg,
+            variables.$ms-white 135deg 225deg,
-            $ms-blue 225deg 315deg,
+            variables.$ms-blue 225deg 315deg,
-            $ms-red 315deg
+            variables.$ms-red 315deg
         );
     }
     &-gwub,
     &-witch {
         background: conic-gradient(
-            $ms-green 45deg,
+            variables.$ms-green 45deg,
-            $ms-white 45deg 135deg,
+            variables.$ms-white 45deg 135deg,
-            $ms-blue 135deg 225deg,
+            variables.$ms-blue 135deg 225deg,
-            $ms-black 225deg 315deg,
+            variables.$ms-black 225deg 315deg,
-            $ms-green 315deg
+            variables.$ms-green 315deg
         );
     }
     &-wubr,
     &-yore {
         background: conic-gradient(
-            $ms-white 45deg,
+            variables.$ms-white 45deg,
-            $ms-blue 45deg 135deg,
+            variables.$ms-blue 45deg 135deg,
-            $ms-black 135deg 225deg,
+            variables.$ms-black 135deg 225deg,
-            $ms-red 225deg 315deg,
+            variables.$ms-red 225deg 315deg,
-            $ms-white 315deg
+            variables.$ms-white 315deg
         );
     }
 
@@ -324,12 +326,12 @@
     &-wubrg,
     &-5 {
         background: conic-gradient(
-            $ms-white 36deg,
+            variables.$ms-white 36deg,
-            $ms-blue 36deg 108deg,
+            variables.$ms-blue 36deg 108deg,
-            $ms-black 108deg 180deg,
+            variables.$ms-black 108deg 180deg,
-            $ms-red 180deg 252deg,
+            variables.$ms-red 180deg 252deg,
-            $ms-green 252deg 324deg,
+            variables.$ms-green 252deg 324deg,
-            $ms-white 324deg
+            variables.$ms-white 324deg
         );
     }
 }

sass/_core.scss

@@ -1,8 +1,10 @@
+@use "variables";
+
 // base
 
-.#{$ms-prefix} {
+.#{variables.$ms-prefix} {
     display: inline-block;
-    font: normal normal normal $ms-font-size-base Mana;
+    font: normal normal normal variables.$ms-font-size-base Mana;
     font-size: inherit;
     line-height: 1em;
     text-rendering: auto;

sass/_cost.scss

@@ -1,8 +1,10 @@
+@use "variables";
+
 // costs
 
-.#{$ms-prefix}-cost {
+.#{variables.$ms-prefix}-cost {
 
-    background-color: $ms-base-colorless;
+    background-color: variables.$ms-base-colorless;
     border-radius: 1em;
     color: #111;
     font-size: 0.95em;
@@ -12,53 +14,53 @@
     text-align: center;
 
     // single costs
-    &.#{$ms-prefix}-w,
+    &.#{variables.$ms-prefix}-w,
-    &.#{$ms-prefix}-wp {
+    &.#{variables.$ms-prefix}-wp {
-        background-color: $ms-base-white;
+        background-color: variables.$ms-base-white;
     }
-    &.#{$ms-prefix}-u,
+    &.#{variables.$ms-prefix}-u,
-    &.#{$ms-prefix}-up {
+    &.#{variables.$ms-prefix}-up {
-        background-color: $ms-base-blue;
+        background-color: variables.$ms-base-blue;
     }
-    &.#{$ms-prefix}-b,
+    &.#{variables.$ms-prefix}-b,
-    &.#{$ms-prefix}-bp {
+    &.#{variables.$ms-prefix}-bp {
-        background-color: $ms-base-black;
+        background-color: variables.$ms-base-black;
     }
-    &.#{$ms-prefix}-r,
+    &.#{variables.$ms-prefix}-r,
-    &.#{$ms-prefix}-rp {
+    &.#{variables.$ms-prefix}-rp {
-        background-color: $ms-base-red;
+        background-color: variables.$ms-base-red;
     }
-    &.#{$ms-prefix}-g,
+    &.#{variables.$ms-prefix}-g,
-    &.#{$ms-prefix}-gp {
+    &.#{variables.$ms-prefix}-gp {
-        background-color: $ms-base-green;
+        background-color: variables.$ms-base-green;
     }
 
     // split costs
-    &.#{$ms-prefix}-wu,
+    &.#{variables.$ms-prefix}-wu,
-    &.#{$ms-prefix}-wb,
+    &.#{variables.$ms-prefix}-wb,
-    &.#{$ms-prefix}-ub,
+    &.#{variables.$ms-prefix}-ub,
-    &.#{$ms-prefix}-ur,
+    &.#{variables.$ms-prefix}-ur,
-    &.#{$ms-prefix}-br,
+    &.#{variables.$ms-prefix}-br,
-    &.#{$ms-prefix}-bg,
+    &.#{variables.$ms-prefix}-bg,
-    &.#{$ms-prefix}-rw,
+    &.#{variables.$ms-prefix}-rw,
-    &.#{$ms-prefix}-rg,
+    &.#{variables.$ms-prefix}-rg,
-    &.#{$ms-prefix}-gw,
+    &.#{variables.$ms-prefix}-gw,
-    &.#{$ms-prefix}-gu,
+    &.#{variables.$ms-prefix}-gu,
-    &.#{$ms-prefix}-2w,
+    &.#{variables.$ms-prefix}-2w,
-    &.#{$ms-prefix}-2u,
+    &.#{variables.$ms-prefix}-2u,
-    &.#{$ms-prefix}-2b,
+    &.#{variables.$ms-prefix}-2b,
-    &.#{$ms-prefix}-2r,
+    &.#{variables.$ms-prefix}-2r,
-    &.#{$ms-prefix}-2g,
+    &.#{variables.$ms-prefix}-2g,
-    &.#{$ms-prefix}-wup,
+    &.#{variables.$ms-prefix}-wup,
-    &.#{$ms-prefix}-wbp,
+    &.#{variables.$ms-prefix}-wbp,
-    &.#{$ms-prefix}-ubp,
+    &.#{variables.$ms-prefix}-ubp,
-    &.#{$ms-prefix}-urp,
+    &.#{variables.$ms-prefix}-urp,
-    &.#{$ms-prefix}-brp,
+    &.#{variables.$ms-prefix}-brp,
-    &.#{$ms-prefix}-bgp,
+    &.#{variables.$ms-prefix}-bgp,
-    &.#{$ms-prefix}-rwp,
+    &.#{variables.$ms-prefix}-rwp,
-    &.#{$ms-prefix}-rgp,
+    &.#{variables.$ms-prefix}-rgp,
-    &.#{$ms-prefix}-gwp,
+    &.#{variables.$ms-prefix}-gwp,
-    &.#{$ms-prefix}-gup {
+    &.#{variables.$ms-prefix}-gup {
         position: relative;
         width: 1.3em;
         height: 1.3em;
@@ -76,8 +78,8 @@
             left: 1.0em;
         }
     }
-    &.#{$ms-prefix}-wu,
+    &.#{variables.$ms-prefix}-wu,
-    &.#{$ms-prefix}-wup {
+    &.#{variables.$ms-prefix}-wup {
         background: #edf2b0; // Old browsers
         background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#edf2b0), color-stop(50%,#edf2b0), color-stop(50%,#a6c1dd), color-stop(100%,#a6c1dd)); // Chrome,Safari4+
@@ -87,8 +89,8 @@
         background: linear-gradient(135deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf2b0', endColorstr='#a6c1dd',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-wb,
+    &.#{variables.$ms-prefix}-wb,
-    &.#{$ms-prefix}-wbp {
+    &.#{variables.$ms-prefix}-wbp {
         background: #edf2b0; // Old browsers
         background: -moz-linear-gradient(-45deg,  #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#edf2b0), color-stop(50%,#edf2b0), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
@@ -98,8 +100,8 @@
         background: linear-gradient(135deg,  #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf2b0', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-ub,
+    &.#{variables.$ms-prefix}-ub,
-    &.#{$ms-prefix}-ubp {
+    &.#{variables.$ms-prefix}-ubp {
         background: #a6c1dd; // Old browsers
         background: -moz-linear-gradient(-45deg,  #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a6c1dd), color-stop(50%,#a6c1dd), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
@@ -109,8 +111,8 @@
         background: linear-gradient(135deg,  #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c1dd', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-ur,
+    &.#{variables.$ms-prefix}-ur,
-    &.#{$ms-prefix}-urp {
+    &.#{variables.$ms-prefix}-urp {
         background: #a6c1dd; // Old browsers
         background: -moz-linear-gradient(-45deg,  #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a6c1dd), color-stop(50%,#a6c1dd), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
@@ -120,8 +122,8 @@
         background: linear-gradient(135deg,  #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c1dd', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-br,
+    &.#{variables.$ms-prefix}-br,
-    &.#{$ms-prefix}-brp {
+    &.#{variables.$ms-prefix}-brp {
         background: #aca29a; // Old browsers
         background: -moz-linear-gradient(-45deg,  #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aca29a), color-stop(50%,#aca29a), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
@@ -131,8 +133,8 @@
         background: linear-gradient(135deg,  #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aca29a', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-bg,
+    &.#{variables.$ms-prefix}-bg,
-    &.#{$ms-prefix}-bgp {
+    &.#{variables.$ms-prefix}-bgp {
         background: #aca29a; // Old browsers
         background: -moz-linear-gradient(-45deg,  #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aca29a), color-stop(50%,#aca29a), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
@@ -142,8 +144,8 @@
         background: linear-gradient(135deg,  #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aca29a', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-rw,
+    &.#{variables.$ms-prefix}-rw,
-    &.#{$ms-prefix}-rwp {
+    &.#{variables.$ms-prefix}-rwp {
         background: #db8664; // Old browsers
         background: -moz-linear-gradient(-45deg,  #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#db8664), color-stop(50%,#db8664), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
@@ -153,8 +155,8 @@
         background: linear-gradient(135deg,  #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8664', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-rg,
+    &.#{variables.$ms-prefix}-rg,
-    &.#{$ms-prefix}-rgp {
+    &.#{variables.$ms-prefix}-rgp {
         background: #db8664; // Old browsers
         background: -moz-linear-gradient(-45deg,  #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#db8664), color-stop(50%,#db8664), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
@@ -164,8 +166,8 @@
         background: linear-gradient(135deg,  #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8664', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-gw,
+    &.#{variables.$ms-prefix}-gw,
-    &.#{$ms-prefix}-gwp {
+    &.#{variables.$ms-prefix}-gwp {
         background: #93b483; // Old browsers
         background: -moz-linear-gradient(-45deg,  #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
@@ -175,8 +177,8 @@
         background: linear-gradient(135deg,  #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b483', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-gu,
+    &.#{variables.$ms-prefix}-gu,
-    &.#{$ms-prefix}-gup {
+    &.#{variables.$ms-prefix}-gup {
         background: #93b483; // Old browsers
         background: -moz-linear-gradient(-45deg,  #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#b5cde3), color-stop(100%,#b5cde3)); // Chrome,Safari4+
@@ -186,7 +188,7 @@
         background: linear-gradient(135deg,  #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b483', endColorstr='#b5cde3',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-2w {
+    &.#{variables.$ms-prefix}-2w {
         background: #beb9b2; // Old browsers
         background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
@@ -196,7 +198,7 @@
         background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-2u {
+    &.#{variables.$ms-prefix}-2u {
         background: #beb9b2; // Old browsers
         background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#b5cde3), color-stop(100%,#b5cde3)); // Chrome,Safari4+
@@ -206,7 +208,7 @@
         background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#b5cde3',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-2b {
+    &.#{variables.$ms-prefix}-2b {
         background: #beb9b2; // Old browsers
         background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
@@ -216,7 +218,7 @@
         background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-2r {
+    &.#{variables.$ms-prefix}-2r {
         background: #beb9b2; // Old browsers
         background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
@@ -226,7 +228,7 @@
         background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // W3C
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
     }
-    &.#{$ms-prefix}-2g {
+    &.#{variables.$ms-prefix}-2g {
         background: #beb9b2; // Old browsers
         background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%); // FF3.6+
         background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
@@ -238,22 +240,22 @@
     }
 
     // phyrexian mana size increases
-    &.#{$ms-prefix}-p::before,
+    &.#{variables.$ms-prefix}-p::before,
-    &.#{$ms-prefix}-wp::before,
+    &.#{variables.$ms-prefix}-wp::before,
-    &.#{$ms-prefix}-up::before,
+    &.#{variables.$ms-prefix}-up::before,
-    &.#{$ms-prefix}-bp::before,
+    &.#{variables.$ms-prefix}-bp::before,
-    &.#{$ms-prefix}-rp::before,
+    &.#{variables.$ms-prefix}-rp::before,
-    &.#{$ms-prefix}-gp::before,
+    &.#{variables.$ms-prefix}-gp::before,
-    &.#{$ms-prefix}-wup::before,
+    &.#{variables.$ms-prefix}-wup::before,
-    &.#{$ms-prefix}-wbp::before,
+    &.#{variables.$ms-prefix}-wbp::before,
-    &.#{$ms-prefix}-ubp::before,
+    &.#{variables.$ms-prefix}-ubp::before,
-    &.#{$ms-prefix}-urp::before,
+    &.#{variables.$ms-prefix}-urp::before,
-    &.#{$ms-prefix}-brp::before,
+    &.#{variables.$ms-prefix}-brp::before,
-    &.#{$ms-prefix}-bgp::before,
+    &.#{variables.$ms-prefix}-bgp::before,
-    &.#{$ms-prefix}-rwp::before,
+    &.#{variables.$ms-prefix}-rwp::before,
-    &.#{$ms-prefix}-rgp::before,
+    &.#{variables.$ms-prefix}-rgp::before,
-    &.#{$ms-prefix}-gwp::before,
+    &.#{variables.$ms-prefix}-gwp::before,
-    &.#{$ms-prefix}-gup::before {
+    &.#{variables.$ms-prefix}-gup::before {
         display: inline-block;
         -moz-transform: scale( 1.2, 1.2 );
         -webkit-transform: scale( 1.2, 1.2 );
@@ -261,7 +263,7 @@
     }
 
     // alternate tap
-    &.#{$ms-prefix}-tap-alt::before {
+    &.#{variables.$ms-prefix}-tap-alt::before {
         display: inline-block;
         -moz-transform: scale( 1.2, 1.2 );
         -webkit-transform: scale( 1.2, 1.2 );
@@ -271,7 +273,7 @@
     }
 
     // snow mana
-    &.#{$ms-prefix}-s {
+    &.#{variables.$ms-prefix}-s {
         &::before {
             color: #fff;
             -webkit-text-stroke: 2px #fff;
@@ -294,15 +296,15 @@
     }
 
     // tap symbols
-    &.#{$ms-prefix}-untap {
+    &.#{variables.$ms-prefix}-untap {
         background-color: #111;
         color: #fff;
     }
 
     // shadow alternative
-    &.#{$ms-prefix}-shadow {
+    &.#{variables.$ms-prefix}-shadow {
         box-shadow: -0.06em 0.07em 0 #111, 0 0.06em 0 #111;
-        &.#{$ms-prefix}-untap {
+        &.#{variables.$ms-prefix}-untap {
             box-shadow: -0.06em 0.07em 0 #fff, 0 0.06em 0 #fff;
         }
     }
@@ -311,21 +313,21 @@
 
 // split cost specifics
 
-.#{$ms-prefix}-split {
+.#{variables.$ms-prefix}-split {
     position: relative;
     width: 1.3em;
     height: 1.3em;
 }
-.#{$ms-prefix}-split::before,
+.#{variables.$ms-prefix}-split::before,
-.#{$ms-prefix}-split::after {
+.#{variables.$ms-prefix}-split::after {
     font-size: 0.55em !important;
     position: absolute;
 }
-.#{$ms-prefix}-split::before {
+.#{variables.$ms-prefix}-split::before {
     top: -0.38em;
     left: 0.28em;
 }
-.#{$ms-prefix}-split::after {
+.#{variables.$ms-prefix}-split::after {
     top: 0.5em;
     left: 1.0em;
 }
@@ -333,18 +335,18 @@
 
 // half costs specifics
 
-span.#{$ms-prefix}-half { // legacy handling with <span> tag
+span.#{variables.$ms-prefix}-half { // legacy handling with <span> tag
     width: .675em;
     overflow: hidden;
     display: inline-block;
     margin-left: .675em;
 
-    > .#{$ms-prefix}-cost {
+    > .#{variables.$ms-prefix}-cost {
         margin-left: -.675em;
     }
 }
 
-.#{$ms-prefix}-half { // new single-element handling!
+.#{variables.$ms-prefix}-half { // new single-element handling!
     width: .675em;
     margin-left: .675em;
     overflow: hidden;
@@ -357,9 +359,9 @@ span.#{$ms-prefix}-half { // legacy handling with <span> tag
 
 // un-set costs
 
-.#{$ms-prefix}-100 {
+.#{variables.$ms-prefix}-100 {
     width: 2.4em;
 }
-.#{$ms-prefix}-1000000 {
+.#{variables.$ms-prefix}-1000000 {
     width: 5.4em;
 }

sass/_dfc.scss

@@ -1,6 +1,8 @@
+@use "variables";
+
 // double-faced specifics
 
-.#{$ms-prefix}-dfc {
+.#{variables.$ms-prefix}-dfc {
     color: #111;
     border: .05em solid #111;
     border-radius: 2em;

sass/_duo.scss

@@ -1,4 +1,6 @@
-.#{$ms-prefix}-duo {
+@use "variables";
+
+.#{variables.$ms-prefix}-duo {
 
     // base border styles
     &::after {
@@ -17,12 +19,12 @@
     color: #fff;
 
     // multicolor symbol
-    &.#{$ms-prefix}-multicolor::after {
+    &.#{variables.$ms-prefix}-multicolor::after {
         content: "\e986";
     }
 
     // strixhaven schools
-    &.#{$ms-prefix}-school {
+    &.#{variables.$ms-prefix}-school {
         &-lorehold::after {
             content: "\e99b";
         }
@@ -49,21 +51,21 @@
     &-color {
         // default outer color
         &::before {
-            color: $ms-border-black;
+            color: variables.$ms-border-black;
         }
         // multicolor
-        &.#{$ms-prefix}-multicolor {
+        &.#{variables.$ms-prefix}-multicolor {
             &::after {
-                color: $ms-multicolor-flat;
+                color: variables.$ms-multicolor-flat;
             }
-            &.#{$ms-prefix}-grad::after {
+            &.#{variables.$ms-prefix}-grad::after {
-                background: $ms-multicolor-grad;
+                background: variables.$ms-multicolor-grad;
                 -webkit-background-clip: text;
                 -webkit-text-fill-color: transparent;
             }
         }
         // strixhaven schools
-        &.#{$ms-prefix}-school {
+        &.#{variables.$ms-prefix}-school {
             &-lorehold {
                 &::before { color: #a03731; }
                 &::after { color: #e4e8c7; }

sass/_extras.scss

@@ -1,5 +1,7 @@
-.#{$ms-prefix}-mechanic {
+@use "variables";
-    background: $ms-ability-grad;
+
+.#{variables.$ms-prefix}-mechanic {
+    background: variables.$ms-ability-grad;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

sass/_icons.scss

@@ -1,6 +1,8 @@
+@use "variables";
+
 // symbols
 
-.#{$ms-prefix} {
+.#{variables.$ms-prefix} {
 
     // resources
     &-w::before { content: "\e600"; }

sass/_loyalty.scss

@@ -1,7 +1,9 @@
+@use "variables";
+
 /**
  * planeswalker and other loyalty symbols */
 
-.#{$ms-prefix}-loyalty {
+.#{variables.$ms-prefix}-loyalty {
 
     // all
     &-up,
@@ -49,7 +51,7 @@
         color: #fff;
         display: inline-block;
         font-size: 0.5em;
-        font-family: $ms-serif-font;
+        font-family: variables.$ms-serif-font;
         position: absolute;
         left: 0;
         line-height: 2.25em;
@@ -60,7 +62,7 @@
         content: "0";
     }
     &-up {
-        &.#{$ms-prefix}-loyalty {
+        &.#{variables.$ms-prefix}-loyalty {
             &-1::after { content: "+1"; }
             &-2::after { content: "+2"; }
             &-3::after { content: "+3"; }
@@ -86,7 +88,7 @@
         }
     }
     &-start {
-        &.#{$ms-prefix}-loyalty {
+        &.#{variables.$ms-prefix}-loyalty {
             &-1::after { content: "1"; }
             &-2::after { content: "2"; }
             &-3::after { content: "3"; }
@@ -115,7 +117,7 @@
         &::after {
             line-height: 2em;
         }
-        &.#{$ms-prefix}-loyalty {
+        &.#{variables.$ms-prefix}-loyalty {
             &-1::after { content: "-1"; }
             &-2::after { content: "-2"; }
             &-3::after { content: "-3"; }
@@ -151,7 +153,7 @@
             color: #111;
         }
         // correction for starting loyalty size
-        &.#{$ms-prefix}-loyalty-start {
+        &.#{variables.$ms-prefix}-loyalty-start {
             font-size: 1.6em;
         }
     }
@@ -159,7 +161,7 @@
 
 // saga loyalty
 
-.#{$ms-prefix}-saga {
+.#{variables.$ms-prefix}-saga {
 
     // all
     color: #111;
@@ -174,7 +176,7 @@
         color: #fff;
         display: inline-block;
         font-size: 0.6em;
-        font-family: $ms-serif-font;
+        font-family: variables.$ms-serif-font;
         position: absolute;
         left: 0;
         line-height: 2.0em;
@@ -193,7 +195,7 @@
 
 // level card levels
 
-.#{$ms-prefix}-level {
+.#{variables.$ms-prefix}-level {
 
     // level numbers must be in a span for now unfortunately
     > span {
@@ -202,7 +204,7 @@
         left: 0;
         top: 0;
         color: #000;
-        font-family: $ms-serif-font;
+        font-family: variables.$ms-serif-font;
         width: 76%;
         text-align: center;
         line-height: 3.8;
@@ -224,7 +226,7 @@
 
 // defense loyalty
 
-.#{$ms-prefix}-defense {
+.#{variables.$ms-prefix}-defense {
 
     color: #111;
     font-size: 1.5em;
@@ -258,7 +260,7 @@
         color: #fff;
         display: inline-block;
         font-size: 0.5em;
-        font-family: $ms-serif-font;
+        font-family: variables.$ms-serif-font;
         position: absolute;
         left: 0;
         line-height: 2.25em;

sass/_path.scss

@@ -1,23 +1,25 @@
+@use "variables";
+
 // fonts
 
 @font-face {
     font-family: 'Mana';
-    src:url( '#{$ms-font-path}/mana.eot?v=#{$ms-version}' );
+    src:url( '#{variables.$ms-font-path}/mana.eot?v=#{variables.$ms-version}' );
-    src:url( '#{$ms-font-path}/mana.eot?#iefix&v=#{$ms-version}') format( 'embedded-opentype' ),
+    src:url( '#{variables.$ms-font-path}/mana.eot?#iefix&v=#{variables.$ms-version}') format( 'embedded-opentype' ),
-        url( '#{$ms-font-path}/mana.woff?v=#{$ms-version}') format( 'woff' ),
+        url( '#{variables.$ms-font-path}/mana.woff?v=#{variables.$ms-version}') format( 'woff' ),
-        url( '#{$ms-font-path}/mana.ttf?v=#{$ms-version}') format( 'truetype' ),
+        url( '#{variables.$ms-font-path}/mana.ttf?v=#{variables.$ms-version}') format( 'truetype' ),
-        url( '#{$ms-font-path}/mana.svg?v=#{$ms-version}#mana') format( 'svg' );
+        url( '#{variables.$ms-font-path}/mana.svg?v=#{variables.$ms-version}#mana') format( 'svg' );
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'MPlantin';
-    src:url( '#{$ms-font-path}/mplantin.eot?v=#{$ms-version}' );
+    src:url( '#{variables.$ms-font-path}/mplantin.eot?v=#{variables.$ms-version}' );
-    src:url( '#{$ms-font-path}/mplantin.eot?#iefix&v=#{$ms-version}') format( 'embedded-opentype' ),
+    src:url( '#{variables.$ms-font-path}/mplantin.eot?#iefix&v=#{variables.$ms-version}') format( 'embedded-opentype' ),
-        url( '#{$ms-font-path}/mplantin.woff?v=#{$ms-version}') format( 'woff' ),
+        url( '#{variables.$ms-font-path}/mplantin.woff?v=#{variables.$ms-version}') format( 'woff' ),
-        url( '#{$ms-font-path}/mplantin.ttf?v=#{$ms-version}') format( 'truetype' ),
+        url( '#{variables.$ms-font-path}/mplantin.ttf?v=#{variables.$ms-version}') format( 'truetype' ),
-        url( '#{$ms-font-path}/mplantin.svg?v=#{$ms-version}#mplantin') format( 'svg' );
+        url( '#{variables.$ms-font-path}/mplantin.svg?v=#{variables.$ms-version}#mplantin') format( 'svg' );
     font-weight: normal;
     font-style: normal;
 }

sass/_sizes.scss

@@ -1,15 +1,17 @@
+@use "variables";
+
 // sizes
 
-.#{$ms-prefix}-2x { font-size: 1.75em; }
+.#{variables.$ms-prefix}-2x { font-size: 1.75em; }
-.#{$ms-prefix}-3x { font-size: 2.25em; }
+.#{variables.$ms-prefix}-3x { font-size: 2.25em; }
-.#{$ms-prefix}-4x { font-size: 3.0em; }
+.#{variables.$ms-prefix}-4x { font-size: 3.0em; }
-.#{$ms-prefix}-5x { font-size: 3.75em; }
+.#{variables.$ms-prefix}-5x { font-size: 3.75em; }
-.#{$ms-prefix}-6x { font-size: 4.5em; }
+.#{variables.$ms-prefix}-6x { font-size: 4.5em; }
 
 /*
  * Fixed width */
 
-.#{$ms-prefix}-fw {
+.#{variables.$ms-prefix}-fw {
     width: 1em;
     text-align: center;
 }

sass/mana.scss

@@ -1,12 +1,12 @@
-@import "variables";
+@use "variables";
-@import "path";
+@use "path";
-@import "core";
+@use "core";
-@import "icons";
+@use "icons";
-@import "cost";
+@use "cost";
-@import "loyalty";
+@use "loyalty";
-@import "dfc";
+@use "dfc";
-@import "sizes";
+@use "sizes";
-@import "duo";
+@use "duo";
-@import "colors";
+@use "colors";
-@import "extras";
+@use "extras";
-@import "aliases";
+@use "aliases";