New symbols for power, toughness, artist, enchantment DFC, multiple types, and Poleis; better split handling; SASS support; more planeswalker loyalties

This commit is contained in:
Andrew Gioia 2018-07-25 12:58:10 -04:00
parent c0fd0a41ee
commit 8bf7aea771
18 changed files with 294 additions and 28 deletions

View File

@ -1,4 +1,4 @@
# Mana v1.3.2
# Mana v1.4.0
## The Magic: the Gathering mana symbol font!
@ -62,6 +62,7 @@ Attribution is **greatly appreciated** but not required!
## Changelog
* v1.4.0 - big update: artist, Poleis, power/toughness, DFC enchantment, and multiple type symbols added; simplified split cost handling; more planeswalker loyalties; SASS support
* v1.3.2 - incrementing for new npm publish and jsDelivr note; fixed docs
* v1.3.1 - fixed class name issue for 1,000,000 symbol
* v1.3.0 - added Guild and Clan symbols
@ -75,3 +76,8 @@ Attribution is **greatly appreciated** but not required!
* v0.3 - phyrexian mana classes use MTGJson standard; project-specific LESS prefix added (@JayGray)
* v0.2 - Flashback symbol added
* v0.1 - initial font creation and CSS/LESS files added
## Todo
* Crop original full-width symbols to actual width
* Add ligatures for easier desktop use

View File

@ -1,7 +1,7 @@
{
"name": "mana",
"homepage": "https://github.com/andrewgioia/Mana",
"version": "1.3.2",
"version": "1.4.0",
"authors": [
"Andrew Gioia <andrewgioia@gmail.com>"
],

View File

@ -2,15 +2,15 @@
* Global */
@font-face {
font-family: 'Mana';
src: url('../fonts/mana.eot?v=1.3.1');
src: url('../fonts/mana.eot?#iefix&v=1.3.1') format('embedded-opentype'), url('../fonts/mana.woff?v=1.3.1') format('woff'), url('../fonts/mana.ttf?v=1.3.1') format('truetype'), url('../fonts/mana.svg?v=1.3.1#mana') format('svg');
src: url('../fonts/mana.eot?v=1.4.0');
src: url('../fonts/mana.eot?#iefix&v=1.4.0') format('embedded-opentype'), url('../fonts/mana.woff?v=1.4.0') format('woff'), url('../fonts/mana.ttf?v=1.4.0') format('truetype'), url('../fonts/mana.svg?v=1.4.0#mana') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MPlantin';
src: url('../fonts/mplantin.eot?v=1.3.1');
src: url('../fonts/mplantin.eot?#iefix&v=1.3.1') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.3.1') format('woff'), url('../fonts/mplantin.ttf?v=1.3.1') format('truetype'), url('../fonts/mplantin.svg?v=1.3.1#mplantin') format('svg');
src: url('../fonts/mplantin.eot?v=1.4.0');
src: url('../fonts/mplantin.eot?#iefix&v=1.4.0') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.4.0') format('woff'), url('../fonts/mplantin.ttf?v=1.4.0') format('truetype'), url('../fonts/mplantin.svg?v=1.4.0#mplantin') format('svg');
font-weight: normal;
font-style: normal;
}
@ -59,6 +59,94 @@
.ms-cost.ms-gp {
background-color: #93B483;
}
.ms-cost.ms-wu,
.ms-cost.ms-wb,
.ms-cost.ms-ub,
.ms-cost.ms-ur,
.ms-cost.ms-br,
.ms-cost.ms-bg,
.ms-cost.ms-rw,
.ms-cost.ms-rg,
.ms-cost.ms-gw,
.ms-cost.ms-gu,
.ms-cost.ms-2w,
.ms-cost.ms-2u,
.ms-cost.ms-2b,
.ms-cost.ms-2r,
.ms-cost.ms-2g {
position: relative;
width: 1.3em;
height: 1.3em;
}
.ms-cost.ms-wu:before,
.ms-cost.ms-wb:before,
.ms-cost.ms-ub:before,
.ms-cost.ms-ur:before,
.ms-cost.ms-br:before,
.ms-cost.ms-bg:before,
.ms-cost.ms-rw:before,
.ms-cost.ms-rg:before,
.ms-cost.ms-gw:before,
.ms-cost.ms-gu:before,
.ms-cost.ms-2w:before,
.ms-cost.ms-2u:before,
.ms-cost.ms-2b:before,
.ms-cost.ms-2r:before,
.ms-cost.ms-2g:before,
.ms-cost.ms-wu:after,
.ms-cost.ms-wb:after,
.ms-cost.ms-ub:after,
.ms-cost.ms-ur:after,
.ms-cost.ms-br:after,
.ms-cost.ms-bg:after,
.ms-cost.ms-rw:after,
.ms-cost.ms-rg:after,
.ms-cost.ms-gw:after,
.ms-cost.ms-gu:after,
.ms-cost.ms-2w:after,
.ms-cost.ms-2u:after,
.ms-cost.ms-2b:after,
.ms-cost.ms-2r:after,
.ms-cost.ms-2g:after {
font-size: 0.55em !important;
position: absolute;
}
.ms-cost.ms-wu:before,
.ms-cost.ms-wb:before,
.ms-cost.ms-ub:before,
.ms-cost.ms-ur:before,
.ms-cost.ms-br:before,
.ms-cost.ms-bg:before,
.ms-cost.ms-rw:before,
.ms-cost.ms-rg:before,
.ms-cost.ms-gw:before,
.ms-cost.ms-gu:before,
.ms-cost.ms-2w:before,
.ms-cost.ms-2u:before,
.ms-cost.ms-2b:before,
.ms-cost.ms-2r:before,
.ms-cost.ms-2g:before {
top: -0.38em;
left: 0.28em;
}
.ms-cost.ms-wu:after,
.ms-cost.ms-wb:after,
.ms-cost.ms-ub:after,
.ms-cost.ms-ur:after,
.ms-cost.ms-br:after,
.ms-cost.ms-bg:after,
.ms-cost.ms-rw:after,
.ms-cost.ms-rg:after,
.ms-cost.ms-gw:after,
.ms-cost.ms-gu:after,
.ms-cost.ms-2w:after,
.ms-cost.ms-2u:after,
.ms-cost.ms-2b:after,
.ms-cost.ms-2r:after,
.ms-cost.ms-2g:after {
top: 0.5em;
left: 1.0em;
}
.ms-cost.ms-wu {
background: #edf2b0;
background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%);
@ -254,7 +342,7 @@
box-shadow: -0.06em 0.07em 0 #fff, 0 0.06em 0 #fff;
}
/**
* Split costs */
* Split costs (separate handling) */
.ms-split {
position: relative;
width: 1.3em;
@ -709,6 +797,9 @@
.ms-sorcery:before {
content: "\e624";
}
.ms-multiple:before {
content: "\e925";
}
/**
* Split symbols */
.ms-wu:before,
@ -798,6 +889,21 @@
.ms-dfc-moon:before {
content: "\e90b";
}
.ms-dfc-enchantment:before {
content: "\e920";
}
.ms-power:before {
content: "\e921";
}
.ms-toughness:before {
content: "\e922";
}
.ms-artist-brush:before {
content: "\e923";
}
.ms-artist-nib:before {
content: "\e924";
}
/**
* Guilds and Clans */
.ms-guild-azorius:before {
@ -860,3 +966,14 @@
.ms-clan-silumgar:before {
content: "\e91f";
}
/**
* Poleis */
.ms-polis-setessa:before {
content: "\e926";
}
.ms-polis-akros:before {
content: "\e927";
}
.ms-polis-meletis:before {
content: "\e928";
}

2
css/mana.min.css vendored

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 315 KiB

After

Width:  |  Height:  |  Size: 330 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Mana</title>
<link rel="stylesheet" href="css/mana.css" />
<link rel="stylesheet" href="css/mana.css?v=1.4.0" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<style type="text/css">
body {
@ -83,21 +83,21 @@
<i class="ms ms-c ms-cost ms-shadow"></i>
<i class="ms ms-e"></i>
<br />
<i class="ms ms-wu ms-split ms-cost ms-shadow"></i>
<i class="ms ms-wb ms-split ms-cost ms-shadow"></i>
<i class="ms ms-ub ms-split ms-cost ms-shadow"></i>
<i class="ms ms-ur ms-split ms-cost ms-shadow"></i>
<i class="ms ms-br ms-split ms-cost ms-shadow"></i>
<i class="ms ms-bg ms-split ms-cost ms-shadow"></i>
<i class="ms ms-rw ms-split ms-cost ms-shadow"></i>
<i class="ms ms-rg ms-split ms-cost ms-shadow"></i>
<i class="ms ms-gw ms-split ms-cost ms-shadow"></i>
<i class="ms ms-gu ms-split ms-cost ms-shadow"></i>
<i class="ms ms-2w ms-split ms-cost ms-shadow"></i>
<i class="ms ms-2u ms-split ms-cost ms-shadow"></i>
<i class="ms ms-2b ms-split ms-cost ms-shadow"></i>
<i class="ms ms-2r ms-split ms-cost ms-shadow"></i>
<i class="ms ms-2g ms-split ms-cost ms-shadow"></i>
<i class="ms ms-wu ms-cost ms-shadow"></i>
<i class="ms ms-wb ms-cost ms-shadow"></i>
<i class="ms ms-ub ms-cost ms-shadow"></i>
<i class="ms ms-ur ms-cost ms-shadow"></i>
<i class="ms ms-br ms-cost ms-shadow"></i>
<i class="ms ms-bg ms-cost ms-shadow"></i>
<i class="ms ms-rw ms-cost ms-shadow"></i>
<i class="ms ms-rg ms-cost ms-shadow"></i>
<i class="ms ms-gw ms-cost ms-shadow"></i>
<i class="ms ms-gu ms-cost ms-shadow"></i>
<i class="ms ms-2w ms-cost ms-shadow"></i>
<i class="ms ms-2u ms-cost ms-shadow"></i>
<i class="ms ms-2b ms-cost ms-shadow"></i>
<i class="ms ms-2r ms-cost ms-shadow"></i>
<i class="ms ms-2g ms-cost ms-shadow"></i>
</p>
<h3>Tap and roll symbols</h3>
<p>
@ -140,6 +140,7 @@
<i class="ms ms-sorcery ms-2x"></i>
&nbsp;&nbsp;
<i class="ms ms-flashback ms-2x"></i>
<i class="ms ms-multiple ms-2x"></i>
</p>
<h3>Planeswalker symbols</h3>
<p>
@ -156,6 +157,7 @@
<i class="ms ms-dfc ms-dfc-ignite ms-2x"></i>
<i class="ms ms-dfc ms-dfc-moon ms-2x"></i>
<i class="ms ms-dfc ms-dfc-emrakul ms-2x"></i>
<i class="ms ms-dfc ms-dfc-enchantment ms-2x"></i>
</p>
<h3>Guild Symbols</h3>
<p>
@ -184,6 +186,12 @@
<i class="ms ms-clan-ojutai ms-2x"></i>
<i class="ms ms-clan-silumgar ms-2x"></i>
</p>
<h3>Poleis Symbols</h3>
<p>
<i class="ms ms-polis-setessa ms-2x"></i>
<i class="ms ms-polis-akros ms-2x"></i>
<i class="ms ms-polis-meletis ms-2x"></i>
</p>
<footer>
Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
</footer>

View File

@ -36,6 +36,38 @@
}
// Split symbols
&.@{ms-prefix}-wu,
&.@{ms-prefix}-wb,
&.@{ms-prefix}-ub,
&.@{ms-prefix}-ur,
&.@{ms-prefix}-br,
&.@{ms-prefix}-bg,
&.@{ms-prefix}-rw,
&.@{ms-prefix}-rg,
&.@{ms-prefix}-gw,
&.@{ms-prefix}-gu,
&.@{ms-prefix}-2w,
&.@{ms-prefix}-2u,
&.@{ms-prefix}-2b,
&.@{ms-prefix}-2r,
&.@{ms-prefix}-2g {
position: relative;
width: 1.3em;
height: 1.3em;
&:before,
&:after {
font-size: 0.55em !important;
position: absolute;
}
&:before {
top: -0.38em;
left: 0.28em;
}
&:after {
top: 0.5em;
left: 1.0em;
}
}
&.@{ms-prefix}-wu {
background: #edf2b0; // Old browsers
background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%); // FF3.6+
@ -245,7 +277,7 @@
/**
* Split costs */
* Split costs (separate handling) */
.@{ms-prefix}-split {
position: relative;

View File

@ -61,6 +61,7 @@
.@{ms-prefix}-land:before { content: "\e622"; }
.@{ms-prefix}-planeswalker:before { content: "\e623"; }
.@{ms-prefix}-sorcery:before { content: "\e624"; }
.@{ms-prefix}-multiple:before { content: "\e925"; }
/**
* Split symbols */
@ -120,6 +121,11 @@
.@{ms-prefix}-dfc-spark:before { content: "\e909"; }
.@{ms-prefix}-dfc-emrakul:before { content: "\e90a"; }
.@{ms-prefix}-dfc-moon:before { content: "\e90b"; }
.@{ms-prefix}-dfc-enchantment:before { content: "\e920"; }
.@{ms-prefix}-power:before { content: "\e921"; }
.@{ms-prefix}-toughness:before { content: "\e922"; }
.@{ms-prefix}-artist-brush:before { content: "\e923"; }
.@{ms-prefix}-artist-nib:before { content: "\e924"; }
/**
* Guilds and Clans */
@ -144,3 +150,10 @@
.@{ms-prefix}-clan-kolaghan:before { content: "\e91d"; }
.@{ms-prefix}-clan-ojutai:before { content: "\e91e"; }
.@{ms-prefix}-clan-silumgar:before { content: "\e91f"; }
/**
* Poleis */
.@{ms-prefix}-polis-setessa:before { content: "\e926"; }
.@{ms-prefix}-polis-akros:before { content: "\e927"; }
.@{ms-prefix}-polis-meletis:before { content: "\e928"; }

View File

@ -2,7 +2,7 @@
* Global */
@ms-font-path: '../fonts';
@ms-version: '1.3.1';
@ms-version: '1.4.0';
@ms-font-size-base: 14px;
@ms-prefix: ms;
@ms-serif-font: MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif;

View File

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

View File

@ -36,6 +36,38 @@
}
// Split symbols
&.#{$ms-prefix}-wu,
&.#{$ms-prefix}-wb,
&.#{$ms-prefix}-ub,
&.#{$ms-prefix}-ur,
&.#{$ms-prefix}-br,
&.#{$ms-prefix}-bg,
&.#{$ms-prefix}-rw,
&.#{$ms-prefix}-rg,
&.#{$ms-prefix}-gw,
&.#{$ms-prefix}-gu,
&.#{$ms-prefix}-2w,
&.#{$ms-prefix}-2u,
&.#{$ms-prefix}-2b,
&.#{$ms-prefix}-2r,
&.#{$ms-prefix}-2g {
position: relative;
width: 1.3em;
height: 1.3em;
&:before,
&:after {
font-size: 0.55em !important;
position: absolute;
}
&:before {
top: -0.38em;
left: 0.28em;
}
&:after {
top: 0.5em;
left: 1.0em;
}
}
&.#{$ms-prefix}-wu {
background: #edf2b0; // Old browsers
background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%); // FF3.6+

View File

@ -61,6 +61,7 @@
.#{$ms-prefix}-land:before { content: "\e622"; }
.#{$ms-prefix}-planeswalker:before { content: "\e623"; }
.#{$ms-prefix}-sorcery:before { content: "\e624"; }
.#{$ms-prefix}-multiple:before { content: "\e925"; }
/**
* Split symbols */
@ -120,6 +121,11 @@
.#{$ms-prefix}-dfc-spark:before { content: "\e909"; }
.#{$ms-prefix}-dfc-emrakul:before { content: "\e90a"; }
.#{$ms-prefix}-dfc-moon:before { content: "\e90b"; }
.#{$ms-prefix}-dfc-enchantment:before { content: "\e920"; }
.#{$ms-prefix}-power:before { content: "\e921"; }
.#{$ms-prefix}-toughness:before { content: "\e922"; }
.#{$ms-prefix}-artist-brush:before { content: "\e923"; }
.#{$ms-prefix}-artist-nib:before { content: "\e924"; }
/**
* Guilds and Clans */
@ -144,3 +150,10 @@
.#{$ms-prefix}-clan-kolaghan:before { content: "\e91d"; }
.#{$ms-prefix}-clan-ojutai:before { content: "\e91e"; }
.#{$ms-prefix}-clan-silumgar:before { content: "\e91f"; }
/**
* Poleis */
.#{$ms-prefix}-polis-setessa:before { content: "\e926"; }
.#{$ms-prefix}-polis-akros:before { content: "\e927"; }
.#{$ms-prefix}-polis-meletis:before { content: "\e928"; }

View File

@ -31,8 +31,16 @@
&-8:after,
&-9:after,
&-10:after,
&-11:after,
&-12:after,
&-13:after,
&-14:after,
&-15:after,
&-16:after,
&-17:after,
&-18:after,
&-19:after,
&-20:after,
&-x:after {
color: #fff;
display: inline-block;
@ -57,6 +65,16 @@
&.#{$ms-prefix}-loyalty-8:after { content: "+8"; }
&.#{$ms-prefix}-loyalty-9:after { content: "+9"; }
&.#{$ms-prefix}-loyalty-10:after { content: "+10"; }
&.#{$ms-prefix}-loyalty-11:after { content: "+10"; }
&.#{$ms-prefix}-loyalty-12:after { content: "+12"; }
&.#{$ms-prefix}-loyalty-13:after { content: "+13"; }
&.#{$ms-prefix}-loyalty-14:after { content: "+14"; }
&.#{$ms-prefix}-loyalty-15:after { content: "+15"; }
&.#{$ms-prefix}-loyalty-16:after { content: "+16"; }
&.#{$ms-prefix}-loyalty-17:after { content: "+17"; }
&.#{$ms-prefix}-loyalty-18:after { content: "+18"; }
&.#{$ms-prefix}-loyalty-19:after { content: "+19"; }
&.#{$ms-prefix}-loyalty-20:after { content: "+20"; }
&.#{$ms-prefix}-loyalty-x:after { content: "+X"; }
}
&-start {
@ -70,6 +88,16 @@
&.#{$ms-prefix}-loyalty-8:after { content: "8"; }
&.#{$ms-prefix}-loyalty-9:after { content: "9"; }
&.#{$ms-prefix}-loyalty-10:after { content: "10"; }
&.#{$ms-prefix}-loyalty-11:after { content: "11"; }
&.#{$ms-prefix}-loyalty-12:after { content: "12"; }
&.#{$ms-prefix}-loyalty-13:after { content: "13"; }
&.#{$ms-prefix}-loyalty-14:after { content: "14"; }
&.#{$ms-prefix}-loyalty-15:after { content: "15"; }
&.#{$ms-prefix}-loyalty-16:after { content: "16"; }
&.#{$ms-prefix}-loyalty-17:after { content: "17"; }
&.#{$ms-prefix}-loyalty-18:after { content: "18"; }
&.#{$ms-prefix}-loyalty-19:after { content: "19"; }
&.#{$ms-prefix}-loyalty-20:after { content: "20"; }
&.#{$ms-prefix}-loyalty-x:after { content: "X"; }
}
&-down {
@ -84,8 +112,16 @@
&.#{$ms-prefix}-loyalty-8:after { content: "-8"; }
&.#{$ms-prefix}-loyalty-9:after { content: "-9"; }
&.#{$ms-prefix}-loyalty-10:after { content: "-10"; }
&.#{$ms-prefix}-loyalty-11:after { content: "-11"; }
&.#{$ms-prefix}-loyalty-12:after { content: "-12"; }
&.#{$ms-prefix}-loyalty-13:after { content: "-13"; }
&.#{$ms-prefix}-loyalty-14:after { content: "-14"; }
&.#{$ms-prefix}-loyalty-15:after { content: "-15"; }
&.#{$ms-prefix}-loyalty-16:after { content: "-16"; }
&.#{$ms-prefix}-loyalty-17:after { content: "-17"; }
&.#{$ms-prefix}-loyalty-18:after { content: "-18"; }
&.#{$ms-prefix}-loyalty-19:after { content: "-19"; }
&.#{$ms-prefix}-loyalty-20:after { content: "-20"; }
&.#{$ms-prefix}-loyalty-x:after { content: "-X"; }
}
}

View File

@ -2,7 +2,7 @@
* Global */
$ms-font-path: '../fonts' !default;
$ms-version: '1.3.1' !default;
$ms-version: '1.4.0' !default;
$ms-font-size-base: 14px !default;
$ms-prefix: ms !default;
$ms-serif-font: 'MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif' !default;