Updating docs for color identity support

attributes.html

@@ -228,6 +228,24 @@
                 </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>
 

css/main.css

@@ -264,6 +264,17 @@ blockquote {
         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;
 }

css/mana.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../sass/_path.scss","../sass/_core.scss","../sass/_icons.scss","../sass/_cost.scss","../sass/_loyalty.scss","../sass/_variables.scss","../sass/_dfc.scss","../sass/_sizes.scss"],"names":[],"mappings":"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","file":"mana.css"}

fonts/mana.svg

@@ -192,4 +192,9 @@
 <glyph unicode="&#xe987;" glyph-name="ability-party" horiz-adv-x="880" d="M261.768 698.647l161.302 160.88c9.546 9.52 25.020 9.52 34.566 0l161.302-160.88c9.546-9.52 9.546-24.954 0-34.474l-161.302-160.88c-9.546-9.52-25.020-9.52-34.566 0l-161.302 160.88c-9.546 9.52-9.546 24.954 0 34.474zM515.67 444.411c-9.544-9.518-9.544-24.954 0-34.474l161.304-160.88c9.544-9.518 25.020-9.518 34.564 0l161.304 160.88c9.544 9.52 9.544 24.956 0 34.474l-161.304 160.88c-9.544 9.52-25.020 9.52-34.564 0l-161.304-160.88zM7.158 444.411c-9.544-9.518-9.544-24.954 0-34.474l161.304-160.88c9.544-9.518 25.020-9.518 34.564 0l161.304 160.88c9.544 9.52 9.544 24.956 0 34.474l-161.304 160.88c-9.544 9.52-25.020 9.52-34.564 0l-161.304-160.88zM261.768 189.161c-9.546-9.52-9.546-24.954 0-34.474l161.302-160.88c9.546-9.52 25.020-9.52 34.566 0l161.302 160.88c9.546 9.52 9.546 24.954 0 34.474l-161.302 160.88c-9.546 9.52-25.020 9.52-34.566 0l-161.302-160.88z" />
 <glyph unicode="&#xe988;" glyph-name="ability-landfall" d="M512.658 860.567c13.492 13.638 36.15 21.64 53.62 3.782 27.126-27.728 61.19 35.29 107.87-52.306 21.632-40.592 67.574 33.108 107.872 16.386 41.002-17.016 49.426-74.722 89.93-84.236 32.994-2.278 73.452 49.574 95.764-10.852 10.352-28.036 61.14-31.618 55.91-64.98-52.578-23.716-119.63-17.506-158.336-72.472-9.546-13.554 23.034-30.704 10.092-40.962-58.036-46.004-148.552-37.042-217.222-53.656l-9.242-15.034c69.074-2.278 153.92-7.564 216.372 25.836 33.192 17.754 47.894 47.57 35.956 80.664 35.14 8.040 70.852 36.766 107.87 35.292-16.094-74.23-72.78-140.66-102.824-208.592-20.788 2.946-39.168 15.51-60.36 16.448-26.556-77.446-19.648-155.99-23.538-236.384-5.902-4.69-23.116-19.888-29.018-24.578 0 0 0 0 0 0-2.816 85.754-0.958 175.208-2.836 260.828-1.24-0.4-2.324-1.064-3.486-1.45-39.098-12.974 1.558-94.762-29.634-125.148-61.43-60.428-39.226-167.028-47.944-245.142l-13.246 6.302c-1.074 111.88 1.63 227.16 0.96 339.042l-15.47 3.15c5.070-40.57 8.832-110.284-4.416-112.804-22.91-4.36 0.508-56.13-32.17-59.238-13.434-1.278-12.618-3.782-19.556-37.812-5.916-29.012-47.122-70.98-78.222-76.882-8.732-1.658-20.166 12.012-29.018 11.344 1.476 68.066-7.012 138.714-16.402 205.44l-13.878-10.712c-0.67-139.618 20.744-267.848 11.356-407.732l-16.286-9.442c-12.806 82.862-7.054 203.54-26.61 230.638-3.042 4.214-2.964 75.932-17.664 112.172-89.192-14.738-57.58 90.268-97.146 132.34-2.95-121.26 3.408-254.962 1.262-376.222l-21.448 5.672c2.362 99.082-27.756 189.686-29.018 302.49-0.012 1.072-15.14 3.782-36.010-18.42-1.974-2.1-5.034-1.914-6.886-2.376-69.476 87.762-148.124 177.41-190.506 282.324 10.064-2.782 32.802 5.042 42.264-11.344 10.592-18.34 30.11-3.522 48.574-13.234 5.498-16.614 15.148-42.822 27.756-56.086 61.294-9.246 127.642-19.788 189.876-17.646-20.654 44.62-187.744 1.83-151.396 85.706-74.172 11.926-157.414 32.824-214.954 82.132-7.376 28.54 20.14 66.188 43.37 60.922 14.588-3.308 41.426-10.268 52.99-4.412 46.048 23.316 85.16 87.596 177.26 53.566 53.328-19.706-32.804 75.622 51.096 52.306 1.866-0.52 1.182 19.108 3.154 18.274 12.598 9.928 40.218-8.672 49.204 3.152 25.864 34.030 52.596-12.892 80.746-10.714 35.092 2.716 40.004 20.9 53.618 34.66z" />
 <glyph unicode="&#xe989;" glyph-name="ability-kicker" horiz-adv-x="784" d="M392 827.955l392-341.040v-218.012l-392 327.016-392-327.016v218.010l392 341.042zM390.362 507.555l-249.968-208.094v-171.274l249.968 199.536 253.244-202.152v171.162l-253.244 210.822zM392 241.203l-133.906-111.44 120.78-99.726c4.196-2.834 7.726-4.708 12.97-4.656 5.012 0.254 6.968 0.648 14.044 5.104 7.074 4.454 119.706 99.278 119.706 99.278l-133.594 111.44z" />
+<glyph unicode="&#xe98a;" glyph-name="ci-1" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512zM512 875.355c-247.804 0-448.688-200.884-448.688-448.688s200.884-448.688 448.688-448.688c247.804 0 448.688 200.884 448.688 448.688s-200.884 448.688-448.688 448.688z" />
+<glyph unicode="&#xe98b;" glyph-name="ci-2" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM851.164 720.421l-632.918-632.918c81.83-71.008 185.87-108.158 293.754-109.524 247.804 0 448.688 200.884 448.688 448.688-0.356 112.2-38.606 207.882-109.524 293.754zM512 875.355c-247.804 0-448.688-200.884-448.688-448.688 0.638-107.436 38.818-215.966 111.602-296.040l633.126 633.126c-80.59 73.068-188.222 110.238-296.040 111.602z" />
+<glyph unicode="&#xe98c;" glyph-name="ci-3" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM115.88 637.341c-35.408-64.442-51.642-137.532-52.568-210.674 0.314-231.214 184.17-435.738 418.12-447.58v423.676l-365.552 234.578zM917.446 618.803l-374.878-216.436v-423.28c236.964 13.038 415.166 214.242 418.12 447.58-0.16 66.226-14.458 132.396-43.242 192.136zM512 875.355c-146.132-0.038-276.922-69.96-363.792-186.12l364.182-233.698 375.158 216.598c-84.128 127.838-223.14 201.29-375.548 203.22z" />
+<glyph unicode="&#xe98d;" glyph-name="ci-4" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM513.092 382.347l-294.846-294.846c81.83-71.006 185.87-108.158 293.754-109.522 106.678 0.782 215.252 38.18 294.896 110.562l-293.804 293.806zM173.874 721.563c-72.47-80.34-109.206-187.698-110.562-294.896 0.638-107.436 38.818-215.966 111.602-296.040l294.948 294.948-295.988 295.988zM851.164 720.421l-294.844-294.846 293.806-293.806c72.47 80.342 109.206 187.7 110.562 294.898-0.356 112.2-38.606 207.882-109.524 293.754zM512 875.355c-106.68-0.782-215.25-38.182-294.898-110.562l295.99-295.99 294.948 294.95c-80.59 73.068-188.222 110.238-296.040 111.602z" />
+<glyph unicode="&#xe98e;" glyph-name="ci-5" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM481.432 383.899l-385.022-126.428c63.62-155.132 215.888-269.822 385.022-278.384v404.812zM542.568 384.215v-405.128c170.242 8.352 319.536 123.548 384.876 278.044l-384.876 127.084zM802.336 768.661l-236.006-327.91 380.258-125.56c9.892 36.32 13.624 73.934 14.1 111.476-0.458 129.734-57.626 258.87-158.352 341.994zM222.188 769.095c-101.746-83.59-157.228-212.114-158.876-342.428-0.060-37.468 4.676-74.846 14.006-111.118l383.986 126.086-239.116 327.46zM512 875.355c-87.528 0.264-166.312-24.796-240.626-69.95l242.786-332.486 239.046 332.134c-72.142 46.398-155.786 69.222-241.206 70.302z" />
 </font></defs></svg>

icons.html

@@ -293,6 +293,103 @@
                     </div>
                 </div>
 
+                <h4 style="padding-top:25px;">Color Indicators</h4>
+                <div class="icons indicators">
+                    <div class="icon" id="ci-u" name="Color Indicator: White">
+                        <span><i class="ms ms-ci ms-ci-1 ms-ci-u"></i> Blue <em>(ci-u)</em></span>
+                    </div>
+                    <div class="icon" id="ci-w" name="Color Indicator: White">
+                        <span><i class="ms ms-ci ms-ci-1 ms-ci-w"></i> Blue <em>(ci-w)</em></span>
+                    </div>
+                    <div class="icon" id="ci-b" name="Color Indicator: Black">
+                        <span><i class="ms ms-ci ms-ci-1 ms-ci-b"></i> Black <em>(ci-b)</em></span>
+                    </div>
+                    <div class="icon" id="ci-r" name="Color Indicator: Red">
+                        <span><i class="ms ms-ci ms-ci-1 ms-ci-r"></i> Red <em>(ci-r)</em></span>
+                    </div>
+                    <div class="icon" id="ci-g" name="Color Indicator: Green">
+                        <span><i class="ms ms-ci ms-ci-1 ms-ci-g"></i> Green <em>(ci-g)</em></span>
+                    </div>
+                    <div class="icon" id="ci-wu" name="Color Indicator: White/Blue">
+                        <span><i class="ms ms-ci ms-ci-2 ms-ci-wu"></i> WU <em>(ci-wu)</em></span>
+                    </div>
+                    <div class="icon" id="ci-wb" name="Color Indicator: White/Black">
+                        <span><i class="ms ms-ci ms-ci-2 ms-ci-wb"></i> WB <em>(ci-wb)</em></span>
+                    </div>
+                    <div class="icon" id="ci-ub" name="Color Indicator: Blue/Black">
+                        <span><i class="ms ms-ci ms-ci-2 ms-ci-ub"></i> UB <em>(ci-ub)</em></span>
+                    </div>
+                    <div class="icon" id="ci-ur" name="Color Indicator: Blue/Red">
+                        <span><i class="ms ms-ci ms-ci-2 ms-ci-ur"></i> UR <em>(ci-ur)</em></span>
+                    </div>
+                    <div class="icon" id="ci-bg" name="Color Indicator: Black/Green">
+                        <span><i class="ms ms-ci ms-ci-2 ms-ci-bg"></i> BG <em>(ci-bg)</em></span>
+                    </div>
+                    <div class="icon" id="ci-br" name="Color Indicator: Black/Red">
+                        <span><i class="ms ms-ci ms-ci-2 ms-ci-br"></i> BR <em>(ci-br)</em></span>
+                    </div>
+                    <div class="icon" id="ci-rw" name="Color Indicator: Red/White">
+                        <span><i class="ms ms-ci ms-ci-2 ms-ci-rw"></i> RW <em>(ci-rw)</em></span>
+                    </div>
+                    <div class="icon" id="ci-rg" name="Color Indicator: Red/Green">
+                        <span><i class="ms ms-ci ms-ci-2 ms-ci-rg"></i> RG <em>(ci-rg)</em></span>
+                    </div>
+                    <div class="icon" id="ci-gu" name="Color Indicator: Green/Blue">
+                        <span><i class="ms ms-ci ms-ci-2 ms-ci-gu"></i> GU <em>(ci-gu)</em></span>
+                    </div>
+                    <div class="icon" id="ci-gw" name="Color Indicator: Green/White">
+                        <span><i class="ms ms-ci ms-ci-2 ms-ci-gw"></i> GW <em>(ci-gw)</em></span>
+                    </div>
+                    <div class="icon" id="ci-wug" name="Color Indicator: White/Blue/Green">
+                        <span><i class="ms ms-ci ms-ci-3 ms-ci-wug"></i> Bant <em>(ci-wug)</em></span>
+                    </div>
+                    <div class="icon" id="ci-ubw" name="Color Indicator: Blue/Black/White">
+                        <span><i class="ms ms-ci ms-ci-3 ms-ci-ubw"></i> Esper <em>(ci-ubw)</em></span>
+                    </div>
+                    <div class="icon" id="ci-bru" name="Color Indicator: Black/Red/Blue">
+                        <span><i class="ms ms-ci ms-ci-3 ms-ci-bru"></i> Grixis <em>(ci-bru)</em></span>
+                    </div>
+                    <div class="icon" id="ci-rgb" name="Color Indicator: Red/Green/Black">
+                        <span><i class="ms ms-ci ms-ci-3 ms-ci-rgb"></i> Jund <em>(ci-rgb)</em></span>
+                    </div>
+                    <div class="icon" id="ci-gwr" name="Color Indicator: Gren/White/Red">
+                        <span><i class="ms ms-ci ms-ci-3 ms-ci-gwr"></i> Naya <em>(ci-gwr)</em></span>
+                    </div>
+                    <div class="icon" id="ci-wbg" name="Color Indicator: White/Black/Green">
+                        <span><i class="ms ms-ci ms-ci-3 ms-ci-wbg"></i> Junk/Abzan <em>(ci-wbg)</em></span>
+                    </div>
+                    <div class="icon" id="ci-urw" name="Color Indicator: Blue/Red/White">
+                        <span><i class="ms ms-ci ms-ci-3 ms-ci-urw"></i> Jeskai <em>(ci-urw)</em></span>
+                    </div>
+                    <div class="icon" id="ci-bgu" name="Color Indicator: Black/Green/Blue">
+                        <span><i class="ms ms-ci ms-ci-3 ms-ci-bgu"></i> BUG/Sultai <em>(ci-bgu)</em></span>
+                    </div>
+                    <div class="icon" id="ci-rwb" name="Color Indicator: Red/White/Black">
+                        <span><i class="ms ms-ci ms-ci-3 ms-ci-rwb"></i> Mardu <em>(ci-rwb)</em></span>
+                    </div>
+                    <div class="icon" id="ci-gur" name="Color Indicator: Green/Blue/Red">
+                        <span><i class="ms ms-ci ms-ci-3 ms-ci-gur"></i> RUG/Temur <em>(ci-gur)</em></span>
+                    </div>
+                    <div class="icon" id="ci-ubrg" name="Color Indicator: Blue/Black/Red/Green">
+                        <span><i class="ms ms-ci ms-ci-4 ms-ci-ubrg"></i> UBRG <em>(ci-ubrg)</em></span>
+                    </div>
+                    <div class="icon" id="ci-brgw" name="Color Indicator: Black/Red/Green/White">
+                        <span><i class="ms ms-ci ms-ci-4 ms-ci-brgw"></i> BRGW <em>(ci-brgw)</em></span>
+                    </div>
+                    <div class="icon" id="ci-rgwu" name="Color Indicator: Red/Green/White/Blue">
+                        <span><i class="ms ms-ci ms-ci-4 ms-ci-rgwu"></i> RGWU <em>(ci-rgwu)</em></span>
+                    </div>
+                    <div class="icon" id="ci-gwub" name="Color Indicator: Green/White/Blue/Black">
+                        <span><i class="ms ms-ci ms-ci-4 ms-ci-gwub"></i> GWUB <em>(ci-gwub)</em></span>
+                    </div>
+                    <div class="icon" id="ci-wubr" name="Color Indicator: White/Blue/Black/Red">
+                        <span><i class="ms ms-ci ms-ci-4 ms-ci-wubr"></i> WUBR <em>(ci-wubr)</em></span>
+                    </div>
+                    <div class="icon" id="ci-5" name="Color Indicator: White/Blue/Black/Red/Green">
+                        <span><i class="ms ms-ci ms-ci-5"></i> WUBRG <em>(ci-5)</em></span>
+                    </div>
+                </div>
+
                 <h4 style="padding-top:25px;">Magic Online Counters</h4>
                 <div class="icons">
                     <div class="icon" id="counter-arrow" name="Arrow Counter">

index.html

@@ -44,7 +44,7 @@
                 </a>
             </div>
             <p>
-                Current version 1.9.4 includes all known mana and card symbols.
+                Current version 1.10.0 includes all known mana and card symbols.
             </p>
         </div>
     </header>

node_modules/mana-font/css/mana.css

@@ -1,14 +1,14 @@
 @font-face {
   font-family: 'Mana';
-  src: url('../fonts/mana.eot?v=1.9.4');
+  src: url('../fonts/mana.eot?v=1.10.0');
-  src: url('../fonts/mana.eot?#iefix&v=1.9.4') format('embedded-opentype'), url('../fonts/mana.woff?v=1.9.4') format('woff'), url('../fonts/mana.ttf?v=1.9.4') format('truetype'), url('../fonts/mana.svg?v=1.9.4#mana') format('svg');
+  src: url('../fonts/mana.eot?#iefix&v=1.10.0') format('embedded-opentype'), url('../fonts/mana.woff?v=1.10.0') format('woff'), url('../fonts/mana.ttf?v=1.10.0') format('truetype'), url('../fonts/mana.svg?v=1.10.0#mana') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'MPlantin';
-  src: url('../fonts/mplantin.eot?v=1.9.4');
+  src: url('../fonts/mplantin.eot?v=1.10.0');
-  src: url('../fonts/mplantin.eot?#iefix&v=1.9.4') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.9.4') format('woff'), url('../fonts/mplantin.ttf?v=1.9.4') format('truetype'), url('../fonts/mplantin.svg?v=1.9.4#mplantin') format('svg');
+  src: url('../fonts/mplantin.eot?#iefix&v=1.10.0') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.10.0') format('woff'), url('../fonts/mplantin.ttf?v=1.10.0') format('truetype'), url('../fonts/mplantin.svg?v=1.10.0#mplantin') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -632,7 +632,7 @@
   content: "\e968";
 }
 .ms-cost {
-  background-color: #BEB9B2;
+  background-color: #beb9b2;
   border-radius: 1em;
   color: #111;
   font-size: 0.95em;
@@ -643,23 +643,23 @@
 }
 .ms-cost.ms-w,
 .ms-cost.ms-wp {
-  background-color: #F0F2C0;
+  background-color: #f0f2c0;
 }
 .ms-cost.ms-u,
 .ms-cost.ms-up {
-  background-color: #B5CDE3;
+  background-color: #b5cde3;
 }
 .ms-cost.ms-b,
 .ms-cost.ms-bp {
-  background-color: #ACA29A;
+  background-color: #aca29a;
 }
 .ms-cost.ms-r,
 .ms-cost.ms-rp {
-  background-color: #DB8664;
+  background-color: #db8664;
 }
 .ms-cost.ms-g,
 .ms-cost.ms-gp {
-  background-color: #93B483;
+  background-color: #93b483;
 }
 .ms-cost.ms-wu,
 .ms-cost.ms-wb,
@@ -1316,7 +1316,7 @@ span.ms-half > .ms-cost {
   content: "\e986";
 }
 .ms-duo-color::before {
-  color: #000;
+  color: #010101;
 }
 .ms-duo-color.ms-multicolor::after {
   color: #cca753;
@@ -1326,6 +1326,142 @@ span.ms-half > .ms-cost {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+.ms-ci {
+  border-radius: 100%;
+  box-shadow: inset 0 0 1px #fff;
+  line-height: 0.95em;
+  width: 1em;
+  height: 1em;
+}
+.ms-ci::before {
+  color: #010101;
+}
+.ms-ci-1::before {
+  content: "\e98a";
+}
+.ms-ci-2::before {
+  content: "\e98b";
+}
+.ms-ci-3::before {
+  content: "\e98c";
+}
+.ms-ci-4::before {
+  content: "\e98d";
+}
+.ms-ci-5::before {
+  content: "\e98e";
+}
+.ms-ci-w {
+  background: #fff;
+}
+.ms-ci-u {
+  background: #3b6ba0;
+}
+.ms-ci-b {
+  background: #383431;
+}
+.ms-ci-r {
+  background: #c6553e;
+}
+.ms-ci-g {
+  background: #3d684b;
+}
+.ms-ci-wu {
+  background: conic-gradient(#fff 45deg, #3b6ba0 45deg 225deg, #fff 225deg);
+}
+.ms-ci-wb {
+  background: conic-gradient(#fff 45deg, #383431 45deg 225deg, #fff 225deg);
+}
+.ms-ci-ub {
+  background: conic-gradient(#3b6ba0 45deg, #383431 45deg 225deg, #3b6ba0 225deg);
+}
+.ms-ci-ur {
+  background: conic-gradient(#3b6ba0 45deg, #c6553e 45deg 225deg, #3b6ba0 225deg);
+}
+.ms-ci-bg {
+  background: conic-gradient(#383431 45deg, #3d684b 45deg 225deg, #383431 225deg);
+}
+.ms-ci-br {
+  background: conic-gradient(#383431 45deg, #c6553e 45deg 225deg, #383431 225deg);
+}
+.ms-ci-rw {
+  background: conic-gradient(#c6553e 45deg, #fff 45deg 225deg, #c6553e 225deg);
+}
+.ms-ci-rg {
+  background: conic-gradient(#c6553e 45deg, #3d684b 45deg 225deg, #c6553e 225deg);
+}
+.ms-ci-gu {
+  background: conic-gradient(#3d684b 45deg, #3b6ba0 45deg 225deg, #3d684b 225deg);
+}
+.ms-ci-gw {
+  background: conic-gradient(#3d684b 45deg, #fff 45deg 225deg, #3d684b 225deg);
+}
+.ms-ci-wug,
+.ms-ci-bant {
+  background: conic-gradient(#3b6ba0 60deg, #3d684b 60deg 180deg, #fff 180deg 300deg, #3b6ba0 300deg);
+}
+.ms-ci-ubw,
+.ms-ci-esper {
+  background: conic-gradient(#383431 60deg, #fff 60deg 180deg, #3b6ba0 180deg 300deg, #383431 300deg);
+}
+.ms-ci-bru,
+.ms-ci-grixis {
+  background: conic-gradient(#c6553e 60deg, #3b6ba0 60deg 180deg, #383431 180deg 300deg, #c6553e 300deg);
+}
+.ms-ci-rgb,
+.ms-ci-jund {
+  background: conic-gradient(#3d684b 60deg, #383431 60deg 180deg, #c6553e 180deg 300deg, #3d684b 300deg);
+}
+.ms-ci-gwr,
+.ms-ci-naya {
+  background: conic-gradient(#fff 60deg, #c6553e 60deg 180deg, #3d684b 180deg 300deg, #fff 300deg);
+}
+.ms-ci-wbg,
+.ms-ci-abzan,
+.ms-ci-junk {
+  background: conic-gradient(#383431 60deg, #3d684b 60deg 180deg, #fff 180deg 300deg, #383431 300deg);
+}
+.ms-ci-urw,
+.ms-ci-jeskai {
+  background: conic-gradient(#c6553e 60deg, #fff 60deg 180deg, #3b6ba0 180deg 300deg, #c6553e 300deg);
+}
+.ms-ci-bgu,
+.ms-ci-sultai,
+.ms-ci-bug {
+  background: conic-gradient(#3d684b 60deg, #3b6ba0 60deg 180deg, #383431 180deg 300deg, #3d684b 300deg);
+}
+.ms-ci-rwb,
+.ms-ci-mardu {
+  background: conic-gradient(#fff 60deg, #383431 60deg 180deg, #c6553e 180deg 300deg, #fff 300deg);
+}
+.ms-ci-gur,
+.ms-ci-temur,
+.ms-ci-rug {
+  background: conic-gradient(#3b6ba0 60deg, #c6553e 60deg 180deg, #3d684b 180deg 300deg, #3b6ba0 300deg);
+}
+.ms-ci-ubrg,
+.ms-ci-glint {
+  background: conic-gradient(#3b6ba0 45deg, #383431 45deg 135deg, #c6553e 135deg 225deg, #3d684b 225deg 315deg, #3b6ba0 315deg);
+}
+.ms-ci-brgw,
+.ms-ci-dune {
+  background: conic-gradient(#383431 45deg, #c6553e 45deg 135deg, #3d684b 135deg 225deg, #fff 225deg 315deg, #383431 315deg);
+}
+.ms-ci-rgwu,
+.ms-ci-ink {
+  background: conic-gradient(#c6553e 45deg, #3d684b 45deg 135deg, #fff 135deg 225deg, #3b6ba0 225deg 315deg, #c6553e 315deg);
+}
+.ms-ci-gwub,
+.ms-ci-witch {
+  background: conic-gradient(#3d684b 45deg, #fff 45deg 135deg, #3b6ba0 135deg 225deg, #383431 225deg 315deg, #3d684b 315deg);
+}
+.ms-ci-wubr,
+.ms-ci-yore {
+  background: conic-gradient(#fff 45deg, #3b6ba0 45deg 135deg, #383431 135deg 225deg, #c6553e 225deg 315deg, #fff 315deg);
+}
+.ms-ci-5 {
+  background: conic-gradient(#fff 36deg, #3b6ba0 36deg 108deg, #383431 108deg 180deg, #c6553e 180deg 252deg, #3d684b 252deg 324deg, #fff 324deg);
+}
 .ms-mechanic {
   background: linear-gradient(0deg, #c8913b 0%, #ecc65a 100%);
   -webkit-background-clip: text;

node_modules/mana-font/fonts/mana.svg

@@ -192,4 +192,9 @@
 <glyph unicode="&#xe987;" glyph-name="ability-party" horiz-adv-x="880" d="M261.768 698.647l161.302 160.88c9.546 9.52 25.020 9.52 34.566 0l161.302-160.88c9.546-9.52 9.546-24.954 0-34.474l-161.302-160.88c-9.546-9.52-25.020-9.52-34.566 0l-161.302 160.88c-9.546 9.52-9.546 24.954 0 34.474zM515.67 444.411c-9.544-9.518-9.544-24.954 0-34.474l161.304-160.88c9.544-9.518 25.020-9.518 34.564 0l161.304 160.88c9.544 9.52 9.544 24.956 0 34.474l-161.304 160.88c-9.544 9.52-25.020 9.52-34.564 0l-161.304-160.88zM7.158 444.411c-9.544-9.518-9.544-24.954 0-34.474l161.304-160.88c9.544-9.518 25.020-9.518 34.564 0l161.304 160.88c9.544 9.52 9.544 24.956 0 34.474l-161.304 160.88c-9.544 9.52-25.020 9.52-34.564 0l-161.304-160.88zM261.768 189.161c-9.546-9.52-9.546-24.954 0-34.474l161.302-160.88c9.546-9.52 25.020-9.52 34.566 0l161.302 160.88c9.546 9.52 9.546 24.954 0 34.474l-161.302 160.88c-9.546 9.52-25.020 9.52-34.566 0l-161.302-160.88z" />
 <glyph unicode="&#xe988;" glyph-name="ability-landfall" d="M512.658 860.567c13.492 13.638 36.15 21.64 53.62 3.782 27.126-27.728 61.19 35.29 107.87-52.306 21.632-40.592 67.574 33.108 107.872 16.386 41.002-17.016 49.426-74.722 89.93-84.236 32.994-2.278 73.452 49.574 95.764-10.852 10.352-28.036 61.14-31.618 55.91-64.98-52.578-23.716-119.63-17.506-158.336-72.472-9.546-13.554 23.034-30.704 10.092-40.962-58.036-46.004-148.552-37.042-217.222-53.656l-9.242-15.034c69.074-2.278 153.92-7.564 216.372 25.836 33.192 17.754 47.894 47.57 35.956 80.664 35.14 8.040 70.852 36.766 107.87 35.292-16.094-74.23-72.78-140.66-102.824-208.592-20.788 2.946-39.168 15.51-60.36 16.448-26.556-77.446-19.648-155.99-23.538-236.384-5.902-4.69-23.116-19.888-29.018-24.578 0 0 0 0 0 0-2.816 85.754-0.958 175.208-2.836 260.828-1.24-0.4-2.324-1.064-3.486-1.45-39.098-12.974 1.558-94.762-29.634-125.148-61.43-60.428-39.226-167.028-47.944-245.142l-13.246 6.302c-1.074 111.88 1.63 227.16 0.96 339.042l-15.47 3.15c5.070-40.57 8.832-110.284-4.416-112.804-22.91-4.36 0.508-56.13-32.17-59.238-13.434-1.278-12.618-3.782-19.556-37.812-5.916-29.012-47.122-70.98-78.222-76.882-8.732-1.658-20.166 12.012-29.018 11.344 1.476 68.066-7.012 138.714-16.402 205.44l-13.878-10.712c-0.67-139.618 20.744-267.848 11.356-407.732l-16.286-9.442c-12.806 82.862-7.054 203.54-26.61 230.638-3.042 4.214-2.964 75.932-17.664 112.172-89.192-14.738-57.58 90.268-97.146 132.34-2.95-121.26 3.408-254.962 1.262-376.222l-21.448 5.672c2.362 99.082-27.756 189.686-29.018 302.49-0.012 1.072-15.14 3.782-36.010-18.42-1.974-2.1-5.034-1.914-6.886-2.376-69.476 87.762-148.124 177.41-190.506 282.324 10.064-2.782 32.802 5.042 42.264-11.344 10.592-18.34 30.11-3.522 48.574-13.234 5.498-16.614 15.148-42.822 27.756-56.086 61.294-9.246 127.642-19.788 189.876-17.646-20.654 44.62-187.744 1.83-151.396 85.706-74.172 11.926-157.414 32.824-214.954 82.132-7.376 28.54 20.14 66.188 43.37 60.922 14.588-3.308 41.426-10.268 52.99-4.412 46.048 23.316 85.16 87.596 177.26 53.566 53.328-19.706-32.804 75.622 51.096 52.306 1.866-0.52 1.182 19.108 3.154 18.274 12.598 9.928 40.218-8.672 49.204 3.152 25.864 34.030 52.596-12.892 80.746-10.714 35.092 2.716 40.004 20.9 53.618 34.66z" />
 <glyph unicode="&#xe989;" glyph-name="ability-kicker" horiz-adv-x="784" d="M392 827.955l392-341.040v-218.012l-392 327.016-392-327.016v218.010l392 341.042zM390.362 507.555l-249.968-208.094v-171.274l249.968 199.536 253.244-202.152v171.162l-253.244 210.822zM392 241.203l-133.906-111.44 120.78-99.726c4.196-2.834 7.726-4.708 12.97-4.656 5.012 0.254 6.968 0.648 14.044 5.104 7.074 4.454 119.706 99.278 119.706 99.278l-133.594 111.44z" />
+<glyph unicode="&#xe98a;" glyph-name="ci-1" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512zM512 875.355c-247.804 0-448.688-200.884-448.688-448.688s200.884-448.688 448.688-448.688c247.804 0 448.688 200.884 448.688 448.688s-200.884 448.688-448.688 448.688z" />
+<glyph unicode="&#xe98b;" glyph-name="ci-2" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM851.164 720.421l-632.918-632.918c81.83-71.008 185.87-108.158 293.754-109.524 247.804 0 448.688 200.884 448.688 448.688-0.356 112.2-38.606 207.882-109.524 293.754zM512 875.355c-247.804 0-448.688-200.884-448.688-448.688 0.638-107.436 38.818-215.966 111.602-296.040l633.126 633.126c-80.59 73.068-188.222 110.238-296.040 111.602z" />
+<glyph unicode="&#xe98c;" glyph-name="ci-3" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM115.88 637.341c-35.408-64.442-51.642-137.532-52.568-210.674 0.314-231.214 184.17-435.738 418.12-447.58v423.676l-365.552 234.578zM917.446 618.803l-374.878-216.436v-423.28c236.964 13.038 415.166 214.242 418.12 447.58-0.16 66.226-14.458 132.396-43.242 192.136zM512 875.355c-146.132-0.038-276.922-69.96-363.792-186.12l364.182-233.698 375.158 216.598c-84.128 127.838-223.14 201.29-375.548 203.22z" />
+<glyph unicode="&#xe98d;" glyph-name="ci-4" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM513.092 382.347l-294.846-294.846c81.83-71.006 185.87-108.158 293.754-109.522 106.678 0.782 215.252 38.18 294.896 110.562l-293.804 293.806zM173.874 721.563c-72.47-80.34-109.206-187.698-110.562-294.896 0.638-107.436 38.818-215.966 111.602-296.040l294.948 294.948-295.988 295.988zM851.164 720.421l-294.844-294.846 293.806-293.806c72.47 80.342 109.206 187.7 110.562 294.898-0.356 112.2-38.606 207.882-109.524 293.754zM512 875.355c-106.68-0.782-215.25-38.182-294.898-110.562l295.99-295.99 294.948 294.95c-80.59 73.068-188.222 110.238-296.040 111.602z" />
+<glyph unicode="&#xe98e;" glyph-name="ci-5" d="M512 938.667c282.77 0 512-229.23 512-512s-229.23-512-512-512c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM481.432 383.899l-385.022-126.428c63.62-155.132 215.888-269.822 385.022-278.384v404.812zM542.568 384.215v-405.128c170.242 8.352 319.536 123.548 384.876 278.044l-384.876 127.084zM802.336 768.661l-236.006-327.91 380.258-125.56c9.892 36.32 13.624 73.934 14.1 111.476-0.458 129.734-57.626 258.87-158.352 341.994zM222.188 769.095c-101.746-83.59-157.228-212.114-158.876-342.428-0.060-37.468 4.676-74.846 14.006-111.118l383.986 126.086-239.116 327.46zM512 875.355c-87.528 0.264-166.312-24.796-240.626-69.95l242.786-332.486 239.046 332.134c-72.142 46.398-155.786 69.222-241.206 70.302z" />
 </font></defs></svg>

package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "mana-font": {
-      "version": "1.9.4",
+      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/mana-font/-/mana-font-1.9.4.tgz",
+      "resolved": "https://registry.npmjs.org/mana-font/-/mana-font-1.10.0.tgz",
-      "integrity": "sha512-g0QdZPZSkSwvSDVOaBR2zTDRdrsqbZIbLis60Eo8QP2d8g+MsJwZu9D51QuzL2wVKg0lDKokNntwMsaFHEIKLA=="
+      "integrity": "sha512-FfwMSsRW1Hnjav12mLnOcP7BDEsZYNGMGbO808++eIYiyHW9vfJ7CUcVuGDjkd06hHt1m2IPBgZ3Oqw6JjhCpQ=="
     },
     "zepto": {
       "version": "1.2.0",

package.json

@@ -4,7 +4,7 @@
   "description": "Mana documentation website",
   "main": "index.html",
   "dependencies": {
-    "mana-font": "^1.9.4",
+    "mana-font": "^1.10.0",
     "zepto": "*"
   },
   "devDependencies": {},