andrew/mana
andrew
/
mana
mirror of https://github.com/andrewgioia/mana.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Color indicators added for all color combinations (#40), more variables added for hex colors, fixed Sass variable issue

This commit is contained in:
Andrew Gioia 2020-12-21 09:11:09 -05:00
parent c7cdd21f56
commit 913e1dd26b
22 changed files with 768 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -11,6 +11,12 @@ All notable changes to this project will be documented in this file.
## Versions
### [1.10.0] 2020-12-21 Color indicators
* **Added:** Color indicator symbols added for all color combinations ([#40](https://github.com/andrewgioia/mana/issues/40))
* **Added:** New variables added for colors used in project as the beginning of getting all of these things into variables
* **Fixed:** Sass variables were not called correctly in `_duo.scss`, this is now fixed
### [1.9.4] 2020-10-10 Kicker, Party, and Landfall abilities
* **Added:** New ability symbols in Arena for Kicker, Party, and Landfall.

2
README.md
View File

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

2
bower.json
View File

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

158
css/mana.css
View File

@ -1,14 +1,14 @@
@font-face {
font-family: 'Mana';
src: url('../fonts/mana.eot?v=1.9.4');
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?v=1.10.0');
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?#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?v=1.10.0');
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;

2
css/mana.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
fonts/mana.eot
View File

Binary file not shown.

5
fonts/mana.svg
View File

@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 595 KiB

After

Width:  |  Height:  |  Size: 598 KiB

BIN
fonts/mana.ttf
View File

Binary file not shown.

BIN
fonts/mana.woff
View File

Binary file not shown.

BIN
fonts/mana.woff2
View File

Binary file not shown.

38
index.html
View File

@ -182,6 +182,44 @@
<i class="ms ms-1000000 ms-cost ms-shadow"></i>
<i class="ms ms-acorn"></i>
</p>
<h3>Color indicators</h3>
<p>
<i class="ms ms-ci ms-ci-1 ms-ci-w"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-u"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-b"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-r"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-g"></i>
&nbsp;
<i class="ms ms-ci ms-ci-2 ms-ci-wu"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-wb"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-ub"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-ur"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-bg"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-br"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-rw"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-rg"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-gu"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-gw"></i>
<br />
<i class="ms ms-ci ms-ci-3 ms-ci-wug"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-ubw"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-bru"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-rgb"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-gwr"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-wbg"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-urw"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-bgu"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-rwb"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-gur"></i>
&nbsp;
<i class="ms ms-ci ms-ci-4 ms-ci-ubrg"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-brgw"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-rgwu"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-gwub"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-wubr"></i>
&nbsp;
<i class="ms ms-ci ms-ci-5"></i>
</p>
</div>
<div class="right">
<h3>Future Sight and other type symbols</h3>

259
less/colors.less Normal file
View File

@ -0,0 +1,259 @@
// color indicator circles
.@{ms-prefix}-ci {
// base styles
border-radius: 100%;
box-shadow: inset 0 0 1px #fff; // to remove spill over
line-height: 0.95em; // shifts the border up a touch
width: 1em;
height: 1em;
// set the border color
&::before { color: @ms-border-black; }
// borders based on number of colors in identity
&-1::before { content: "\e98a"; }
&-2::before { content: "\e98b"; }
&-3::before { content: "\e98c"; }
&-4::before { content: "\e98d"; }
&-5::before { content: "\e98e"; }
// 1 color backgrounds
&-w { background: @ms-white; }
&-u { background: @ms-blue; }
&-b { background: @ms-black; }
&-r { background: @ms-red; }
&-g { background: @ms-green; }
// 2 color backgrounds
&-wu {
background: conic-gradient(
@ms-white 45deg,
@ms-blue 45deg 225deg,
@ms-white 225deg
);
}
&-wb {
background: conic-gradient(
@ms-white 45deg,
@ms-black 45deg 225deg,
@ms-white 225deg
);
}
&-ub {
background: conic-gradient(
@ms-blue 45deg,
@ms-black 45deg 225deg,
@ms-blue 225deg
);
}
&-ur {
background: conic-gradient(
@ms-blue 45deg,
@ms-red 45deg 225deg,
@ms-blue 225deg
);
}
&-bg {
background: conic-gradient(
@ms-black 45deg,
@ms-green 45deg 225deg,
@ms-black 225deg
);
}
&-br {
background: conic-gradient(
@ms-black 45deg,
@ms-red 45deg 225deg,
@ms-black 225deg
);
}
&-rw {
background: conic-gradient(
@ms-red 45deg,
@ms-white 45deg 225deg,
@ms-red 225deg
);
}
&-rg {
background: conic-gradient(
@ms-red 45deg,
@ms-green 45deg 225deg,
@ms-red 225deg
);
}
&-gu {
background: conic-gradient(
@ms-green 45deg,
@ms-blue 45deg 225deg,
@ms-green 225deg
);
}
&-gw {
background: conic-gradient(
@ms-green 45deg,
@ms-white 45deg 225deg,
@ms-green 225deg
);
}
// 3-color backgrounds
&-wug,
&-bant {
background: conic-gradient(
@ms-blue 60deg,
@ms-green 60deg 180deg,
@ms-white 180deg 300deg,
@ms-blue 300deg
);
}
&-ubw,
&-esper {
background: conic-gradient(
@ms-black 60deg,
@ms-white 60deg 180deg,
@ms-blue 180deg 300deg,
@ms-black 300deg
);
}
&-bru,
&-grixis {
background: conic-gradient(
@ms-red 60deg,
@ms-blue 60deg 180deg,
@ms-black 180deg 300deg,
@ms-red 300deg
);
}
&-rgb,
&-jund {
background: conic-gradient(
@ms-green 60deg,
@ms-black 60deg 180deg,
@ms-red 180deg 300deg,
@ms-green 300deg
);
}
&-gwr,
&-naya {
background: conic-gradient(
@ms-white 60deg,
@ms-red 60deg 180deg,
@ms-green 180deg 300deg,
@ms-white 300deg
);
}
&-wbg,
&-abzan,
&-junk {
background: conic-gradient(
@ms-black 60deg,
@ms-green 60deg 180deg,
@ms-white 180deg 300deg,
@ms-black 300deg
);
}
&-urw,
&-jeskai {
background: conic-gradient(
@ms-red 60deg,
@ms-white 60deg 180deg,
@ms-blue 180deg 300deg,
@ms-red 300deg
);
}
&-bgu,
&-sultai,
&-bug {
background: conic-gradient(
@ms-green 60deg,
@ms-blue 60deg 180deg,
@ms-black 180deg 300deg,
@ms-green 300deg
);
}
&-rwb,
&-mardu {
background: conic-gradient(
@ms-white 60deg,
@ms-black 60deg 180deg,
@ms-red 180deg 300deg,
@ms-white 300deg
);
}
&-gur,
&-temur,
&-rug {
background: conic-gradient(
@ms-blue 60deg,
@ms-red 60deg 180deg,
@ms-green 180deg 300deg,
@ms-blue 300deg
);
}
// 4 color backgrounds
&-ubrg,
&-glint {
background: conic-gradient(
@ms-blue 45deg,
@ms-black 45deg 135deg,
@ms-red 135deg 225deg,
@ms-green 225deg 315deg,
@ms-blue 315deg
);
}
&-brgw,
&-dune {
background: conic-gradient(
@ms-black 45deg,
@ms-red 45deg 135deg,
@ms-green 135deg 225deg,
@ms-white 225deg 315deg,
@ms-black 315deg
);
}
&-rgwu,
&-ink {
background: conic-gradient(
@ms-red 45deg,
@ms-green 45deg 135deg,
@ms-white 135deg 225deg,
@ms-blue 225deg 315deg,
@ms-red 315deg
);
}
&-gwub,
&-witch {
background: conic-gradient(
@ms-green 45deg,
@ms-white 45deg 135deg,
@ms-blue 135deg 225deg,
@ms-black 225deg 315deg,
@ms-green 315deg
);
}
&-wubr,
&-yore {
background: conic-gradient(
@ms-white 45deg,
@ms-blue 45deg 135deg,
@ms-black 135deg 225deg,
@ms-red 225deg 315deg,
@ms-white 315deg
);
}
// 5 color background
&-5 {
background: conic-gradient(
@ms-white 36deg,
@ms-blue 36deg 108deg,
@ms-black 108deg 180deg,
@ms-red 180deg 252deg,
@ms-green 252deg 324deg,
@ms-white 324deg
);
}
}

12
less/cost.less
View File

@ -3,7 +3,7 @@
.@{ms-prefix}-cost {
// Base cost styles
background-color: #BEB9B2;
background-color: @ms-base-colorless;
border-radius: 1em;
color: #111;
font-size: 0.95em;
@ -15,23 +15,23 @@
// Single symbols
&.@{ms-prefix}-w,
&.@{ms-prefix}-wp {
background-color: #F0F2C0;
background-color: @ms-base-white;
}
&.@{ms-prefix}-u,
&.@{ms-prefix}-up {
background-color: #B5CDE3;
background-color: @ms-base-blue;
}
&.@{ms-prefix}-b,
&.@{ms-prefix}-bp {
background-color: #ACA29A;
background-color: @ms-base-black;
}
&.@{ms-prefix}-r,
&.@{ms-prefix}-rp {
background-color: #DB8664;
background-color: @ms-base-red;
}
&.@{ms-prefix}-g,
&.@{ms-prefix}-gp {
background-color: #93B483;
background-color: @ms-base-green;
}
// Split symbols

4
less/duo.less
View File

@ -1,3 +1,5 @@
// dual-layered symbol handling
.@{ms-prefix}-duo {
// base border styles
@ -24,7 +26,7 @@
// colorized versions
&-color {
&::before {
color: #000;
color: @ms-border-black;
}
&.@{ms-prefix}-multicolor {
&::after {

1
less/mana.less
View File

@ -7,4 +7,5 @@
@import "dfc.less";
@import "sizes.less";
@import "duo.less";
@import "colors.less";
@import "extras.less";

18
less/variables.less
View File

@ -1,11 +1,25 @@
// base variables
@ms-font-path: '../fonts';
@ms-version: '1.9.4';
@ms-version: '1.10.0';
@ms-font-size-base: 14px;
@ms-prefix: ms;
@ms-serif-font: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;
// colors
// mana colors
@ms-border-black: #010101;
@ms-base-colorless: #beb9b2;
@ms-base-white: #f0f2c0;
@ms-base-blue: #b5cde3;
@ms-base-black: #aca29a;
@ms-base-red: #db8664;
@ms-base-green: #93b483;
@ms-white: #fff;
@ms-blue: #3b6ba0;
@ms-black: #383431;
@ms-red: #c6553e;
@ms-green: #3d684b;
// project colors
@ms-multicolor-flat: #cca753;
@ms-multicolor-grad: linear-gradient(45deg, #cca54f 0%, #e0d3bb 50%, #cca54f 100%);
@ms-ability-grad: linear-gradient(0deg, #c8913b 0%, #ecc65a 100%);

2
package.json
View File

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

259
sass/_colors.scss Normal file
View File

@ -0,0 +1,259 @@
// color indicator circles
.#{$ms-prefix}-ci {
// base styles
border-radius: 100%;
box-shadow: inset 0 0 1px #fff; // to remove spill over
line-height: 0.95em; // shifts the border up a touch
width: 1em;
height: 1em;
// set the border color
&::before { color: $ms-border-black; }
// borders based on number of colors in identity
&-1::before { content: "\e98a"; }
&-2::before { content: "\e98b"; }
&-3::before { content: "\e98c"; }
&-4::before { content: "\e98d"; }
&-5::before { content: "\e98e"; }
// 1 color backgrounds
&-w { background: $ms-white; }
&-u { background: $ms-blue; }
&-b { background: $ms-black; }
&-r { background: $ms-red; }
&-g { background: $ms-green; }
// 2 color backgrounds
&-wu {
background: conic-gradient(
$ms-white 45deg,
$ms-blue 45deg 225deg,
$ms-white 225deg
);
}
&-wb {
background: conic-gradient(
$ms-white 45deg,
$ms-black 45deg 225deg,
$ms-white 225deg
);
}
&-ub {
background: conic-gradient(
$ms-blue 45deg,
$ms-black 45deg 225deg,
$ms-blue 225deg
);
}
&-ur {
background: conic-gradient(
$ms-blue 45deg,
$ms-red 45deg 225deg,
$ms-blue 225deg
);
}
&-bg {
background: conic-gradient(
$ms-black 45deg,
$ms-green 45deg 225deg,
$ms-black 225deg
);
}
&-br {
background: conic-gradient(
$ms-black 45deg,
$ms-red 45deg 225deg,
$ms-black 225deg
);
}
&-rw {
background: conic-gradient(
$ms-red 45deg,
$ms-white 45deg 225deg,
$ms-red 225deg
);
}
&-rg {
background: conic-gradient(
$ms-red 45deg,
$ms-green 45deg 225deg,
$ms-red 225deg
);
}
&-gu {
background: conic-gradient(
$ms-green 45deg,
$ms-blue 45deg 225deg,
$ms-green 225deg
);
}
&-gw {
background: conic-gradient(
$ms-green 45deg,
$ms-white 45deg 225deg,
$ms-green 225deg
);
}
// 3-color backgrounds
&-wug,
&-bant {
background: conic-gradient(
$ms-blue 60deg,
$ms-green 60deg 180deg,
$ms-white 180deg 300deg,
$ms-blue 300deg
);
}
&-ubw,
&-esper {
background: conic-gradient(
$ms-black 60deg,
$ms-white 60deg 180deg,
$ms-blue 180deg 300deg,
$ms-black 300deg
);
}
&-bru,
&-grixis {
background: conic-gradient(
$ms-red 60deg,
$ms-blue 60deg 180deg,
$ms-black 180deg 300deg,
$ms-red 300deg
);
}
&-rgb,
&-jund {
background: conic-gradient(
$ms-green 60deg,
$ms-black 60deg 180deg,
$ms-red 180deg 300deg,
$ms-green 300deg
);
}
&-gwr,
&-naya {
background: conic-gradient(
$ms-white 60deg,
$ms-red 60deg 180deg,
$ms-green 180deg 300deg,
$ms-white 300deg
);
}
&-wbg,
&-abzan,
&-junk {
background: conic-gradient(
$ms-black 60deg,
$ms-green 60deg 180deg,
$ms-white 180deg 300deg,
$ms-black 300deg
);
}
&-urw,
&-jeskai {
background: conic-gradient(
$ms-red 60deg,
$ms-white 60deg 180deg,
$ms-blue 180deg 300deg,
$ms-red 300deg
);
}
&-bgu,
&-sultai,
&-bug {
background: conic-gradient(
$ms-green 60deg,
$ms-blue 60deg 180deg,
$ms-black 180deg 300deg,
$ms-green 300deg
);
}
&-rwb,
&-mardu {
background: conic-gradient(
$ms-white 60deg,
$ms-black 60deg 180deg,
$ms-red 180deg 300deg,
$ms-white 300deg
);
}
&-gur,
&-temur,
&-rug {
background: conic-gradient(
$ms-blue 60deg,
$ms-red 60deg 180deg,
$ms-green 180deg 300deg,
$ms-blue 300deg
);
}
// 4 color backgrounds
&-ubrg,
&-glint {
background: conic-gradient(
$ms-blue 45deg,
$ms-black 45deg 135deg,
$ms-red 135deg 225deg,
$ms-green 225deg 315deg,
$ms-blue 315deg
);
}
&-brgw,
&-dune {
background: conic-gradient(
$ms-black 45deg,
$ms-red 45deg 135deg,
$ms-green 135deg 225deg,
$ms-white 225deg 315deg,
$ms-black 315deg
);
}
&-rgwu,
&-ink {
background: conic-gradient(
$ms-red 45deg,
$ms-green 45deg 135deg,
$ms-white 135deg 225deg,
$ms-blue 225deg 315deg,
$ms-red 315deg
);
}
&-gwub,
&-witch {
background: conic-gradient(
$ms-green 45deg,
$ms-white 45deg 135deg,
$ms-blue 135deg 225deg,
$ms-black 225deg 315deg,
$ms-green 315deg
);
}
&-wubr,
&-yore {
background: conic-gradient(
$ms-white 45deg,
$ms-blue 45deg 135deg,
$ms-black 135deg 225deg,
$ms-red 225deg 315deg,
$ms-white 315deg
);
}
// 5 color background
&-5 {
background: conic-gradient(
$ms-white 36deg,
$ms-blue 36deg 108deg,
$ms-black 108deg 180deg,
$ms-red 180deg 252deg,
$ms-green 252deg 324deg,
$ms-white 324deg
);
}
}

12
sass/_cost.scss
View File

@ -2,7 +2,7 @@
.#{$ms-prefix}-cost {
background-color: #BEB9B2;
background-color: $ms-base-colorless;
border-radius: 1em;
color: #111;
font-size: 0.95em;
@ -14,23 +14,23 @@
// single costs
&.#{$ms-prefix}-w,
&.#{$ms-prefix}-wp {
background-color: #F0F2C0;
background-color: $ms-base-white;
}
&.#{$ms-prefix}-u,
&.#{$ms-prefix}-up {
background-color: #B5CDE3;
background-color: $ms-base-blue;
}
&.#{$ms-prefix}-b,
&.#{$ms-prefix}-bp {
background-color: #ACA29A;
background-color: $ms-base-black;
}
&.#{$ms-prefix}-r,
&.#{$ms-prefix}-rp {
background-color: #DB8664;
background-color: $ms-base-red;
}
&.#{$ms-prefix}-g,
&.#{$ms-prefix}-gp {
background-color: #93B483;
background-color: $ms-base-green;
}
// split costs

6
sass/_duo.scss
View File

@ -24,14 +24,14 @@
// colorized versions
&-color {
&::before {
color: #000;
color: $ms-border-black;
}
&.#{$ms-prefix}-multicolor {
&::after {
color: @ms-multicolor-flat;
color: $ms-multicolor-flat;
}
&.#{$ms-prefix}-grad::after {
background: @ms-multicolor-grad;
background: $ms-multicolor-grad;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

14
sass/_variables.scss
View File

@ -5,6 +5,20 @@ $ms-font-size-base: 14px !default;
$ms-prefix: ms !default;
$ms-serif-font: 'MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif' !default;
// mana colors
$ms-border-black: #010101;
$ms-base-colorless: #beb9b2;
$ms-base-white: #f0f2c0;
$ms-base-blue: #b5cde3;
$ms-base-black: #aca29a;
$ms-base-red: #db8664;
$ms-base-green: #93b483;
$ms-white: #fff;
$ms-blue: #3b6ba0;
$ms-black: #383431;
$ms-red: #c6553e;
$ms-green: #3d684b;
// colors
$ms-multicolor-flat: #cca753;
$ms-multicolor-grad: linear-gradient(45deg, #cca54f 0%, #e0d3bb 50%, #cca54f 100%);

1
sass/mana.scss
View File

@ -7,4 +7,5 @@
@import "dfc";
@import "sizes";
@import "duo";
@import "colors";
@import "extras";