andrew/mana
andrew/mana
1
0
Fork 0
mirror of https://github.com/andrewgioia/mana.git synced 2024-11-21 22:54:45 +00:00
Code Issues Projects Releases Wiki Activity

Fix to handle half cost in single element

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
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

2
bower.json
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>"
],

21
css/mana.css
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
View File

File diff suppressed because one or more lines are too long

76
index.html
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>

14
less/cost.less
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 */

2
less/variables.less
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;

2
package.json
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": {

15
sass/_cost.scss
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 */

2
sass/_variables.scss
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;