Fix to handle half cost in single element

This commit is contained in:
Andrew Gioia 2018-07-26 09:14:19 -04:00
parent 8bf7aea771
commit 1ef90957f8
10 changed files with 258 additions and 171 deletions

View File

@ -1,4 +1,4 @@
# Mana v1.4.0
# Mana v1.4.1
## The Magic: the Gathering mana symbol font!
@ -62,6 +62,7 @@ Attribution is **greatly appreciated** but not required!
## Changelog
* v1.4.1 - half mana symbol fix using just the icon element (issue #6)
* 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

View File

@ -1,7 +1,7 @@
{
"name": "mana",
"homepage": "https://github.com/andrewgioia/Mana",
"version": "1.4.0",
"version": "1.4.1",
"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.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');
src: url('../fonts/mana.eot?v=1.4.1');
src: url('../fonts/mana.eot?#iefix&v=1.4.1') format('embedded-opentype'), url('../fonts/mana.woff?v=1.4.1') format('woff'), url('../fonts/mana.ttf?v=1.4.1') format('truetype'), url('../fonts/mana.svg?v=1.4.1#mana') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MPlantin';
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');
src: url('../fonts/mplantin.eot?v=1.4.1');
src: url('../fonts/mplantin.eot?#iefix&v=1.4.1') format('embedded-opentype'), url('../fonts/mplantin.woff?v=1.4.1') format('woff'), url('../fonts/mplantin.ttf?v=1.4.1') format('truetype'), url('../fonts/mplantin.svg?v=1.4.1#mplantin') format('svg');
font-weight: normal;
font-style: normal;
}
@ -363,15 +363,24 @@
}
/**
* Half costs */
.ms-half {
span.ms-half {
width: .675em;
overflow: hidden;
display: inline-block;
margin-left: .675em;
}
.ms-half > .ms-cost {
span.ms-half > .ms-cost {
margin-left: -0.675em;
}
.ms-half {
width: .675em;
margin-left: .675em;
overflow: hidden;
border-radius: 0 1em 1em 0;
}
.ms-half:before {
margin-left: -0.65em;
}
/**
* Un-set costs */
.ms-100 {

2
css/mana.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -5,18 +5,25 @@
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Mana</title>
<link rel="stylesheet" href="css/mana.css?v=1.4.0" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<style type="text/css">
html {
border-top: 5px solid #CBC8BB;
}
body {
background: #fff;
border-top: 3px solid #CBC8BB;
color: #333;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: 'Open Sans', 'Lucida Grande', 'Lucida Sans Unicode',
'Lucida Sans', Geneva, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.6em;
margin: 0;
margin: 0 auto;
padding: 0 100px;
max-width: 1280px;
}
h1, h2, .mplantin {
font-family: MPlantin, Times, serif;
}
h3 {
font-size: 16px;
@ -31,6 +38,29 @@
margin: 40px 0 0;
padding: 20px 0 30px;
}
.pt {
font-size: 19px;
display: inline-block;
position: relative;
}
.left {
width: 46%;
float: left;
}
.right {
width: 46%;
float: right;
}
@media screen and (max-width: 1280px) {
.left, .right {
float: none;
width: 100%;
}
.sm-screen {
display: inline-block;
padding-right: 10px;
}
}
</style>
</head>
<body>
@ -38,15 +68,22 @@
<h2>MTG Mana Symbol Demos</h2>
<p>
This HTML file is for demo purposes and is not necessary for Mana installation or use.
You can view all of the mana symbol font icons and the available examples below (casting cost background and increased sizes).
You can view all of the mana symbol font icons and the available examples below
(casting cost background and increased sizes). Please take a look at the
<a href="https://andrewgioia.github.io/Mana">Mana documentation page</a> for
the full set of icons, attributes, and usages.
</p>
<div class="left">
<h3>Regular mana symbols</h3>
<p>
<div class="sm-screen">
<i class="ms ms-w ms-cost ms-shadow"></i>
<i class="ms ms-u ms-cost ms-shadow"></i>
<i class="ms ms-b ms-cost ms-shadow"></i>
<i class="ms ms-r ms-cost ms-shadow"></i>
<i class="ms ms-g ms-cost ms-shadow"></i>
</div>
<div class="sm-screen">
<i class="ms ms-0 ms-cost ms-shadow"></i>
<i class="ms ms-1 ms-cost ms-shadow"></i>
<i class="ms ms-2 ms-cost ms-shadow"></i>
@ -68,9 +105,12 @@
<i class="ms ms-18 ms-cost ms-shadow"></i>
<i class="ms ms-19 ms-cost ms-shadow"></i>
<i class="ms ms-20 ms-cost ms-shadow"></i>
</div>
<div class="sm-screen">
<i class="ms ms-x ms-cost ms-shadow"></i>
<i class="ms ms-y ms-cost ms-shadow"></i>
<i class="ms ms-z ms-cost ms-shadow"></i>
</div>
</p>
<h3>Phyrexian, snow, colorless, energy, and split symbols</h3>
<p>
@ -114,13 +154,21 @@
<i class="ms ms-r ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-g ms-cost ms-shadow ms-2x"></i>
</p>
<h3><a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?multiverseid=74257">Half mana symbols</a></h3>
<h3>Half mana symbols <small>[<a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?multiverseid=74257">Source</a>]</small></h3>
<p>
<span class="ms-half"><i class="ms ms-w ms-cost"></i></span>
<span class="ms-half"><i class="ms ms-u ms-cost"></i></span>
<span class="ms-half"><i class="ms ms-b ms-cost"></i></span>
<span class="ms-half"><i class="ms ms-r ms-cost"></i></span>
<span class="ms-half"><i class="ms ms-g ms-cost"></i></span>
<i class="ms ms-w ms-half ms-cost"></i>
<i class="ms ms-u ms-half ms-cost"></i>
<i class="ms ms-b ms-half ms-cost"></i>
<i class="ms ms-r ms-half ms-cost"></i>
<i class="ms ms-g ms-half ms-cost"></i>
</p>
<h3>Portal power and toughness symbols</h3>
<p>
<span class="mplantin pt">4</span>
<i class="ms ms-power" style="font-size: 1.05em; margin: -8px 0 0 -3px;"></i>
<span class="mplantin pt" style="margin-left: -3px;">/</span>
<span class="mplantin pt" style="margin-left: -2px;">5</span>
<i class="ms ms-toughness" style="font-size: 1.05em; margin: -9px 0 0 -3px;"></i>
</p>
<h3>Un-set mana symbols</h3>
<p>
@ -129,7 +177,9 @@
<i class="ms ms-100 ms-cost ms-shadow"></i>
<i class="ms ms-1000000 ms-cost ms-shadow"></i>
</p>
<h3>Future Sight type symbols</h3>
</div>
<div class="right">
<h3>Future Sight and other type symbols</h3>
<p>
<i class="ms ms-artifact ms-2x"></i>
<i class="ms ms-creature ms-2x"></i>
@ -192,6 +242,8 @@
<i class="ms ms-polis-akros ms-2x"></i>
<i class="ms ms-polis-meletis ms-2x"></i>
</p>
</div>
<div style="clear: both;"></div>
<footer>
Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
</footer>

View File

@ -302,7 +302,8 @@
/**
* Half costs */
.@{ms-prefix}-half {
// Legacy handling with <span> tag
span.@{ms-prefix}-half {
width: .675em;
overflow: hidden;
display: inline-block;
@ -313,6 +314,17 @@
}
}
// New single-element handling!
.@{ms-prefix}-half {
width: .675em;
margin-left: .675em;
overflow: hidden;
border-radius: 0 1em 1em 0;
&:before {
margin-left: -.65em;
}
}
/**
* Un-set costs */

View File

@ -2,7 +2,7 @@
* Global */
@ms-font-path: '../fonts';
@ms-version: '1.4.0';
@ms-version: '1.4.1';
@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.4.0",
"version": "1.4.1",
"description": "Magic: the Gathering mana symbol pictographic font",
"main": "css/mana.css",
"repository": {

View File

@ -302,7 +302,8 @@
/**
* Half costs */
.#{$ms-prefix}-half {
// Legacy handling with <span> tag
span.#{$ms-prefix}-half {
width: .675em;
overflow: hidden;
display: inline-block;
@ -313,6 +314,18 @@
}
}
// New single-element handling!
.#{$ms-prefix}-half {
width: .675em;
margin-left: .675em;
overflow: hidden;
border-radius: 0 1em 1em 0;
&:before {
margin-left: -.65em;
}
}
/**
* Un-set costs */

View File

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