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

Initial documentation site for Mana

Browse Source
This commit is contained in:
Andrew Gioia 2016-06-20 22:08:52 -04:00
parent 808c5a8cb8
commit fd6107d18f
36 changed files with 4664 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1 @@
.idea
.DS_Store

3
README.md
View File

@ -1,4 +1,4 @@
# Mana v0.6
# Mana v1.0.0
## The Magic: the Gathering mana symbol font!
@ -36,3 +36,4 @@ Attribution is **greatly appreciated** but not required!
* v0.4 - adding classes for 16, 17, 18, 19, and 20 symbols
* v0.5 - adding the new colorless wastes symbol
* v0.6 - adding double-faced card symbols (day, night)
* v1.0.0 - finally documentation is live!

25
bower.json
View File

@ -1,22 +1,14 @@
{
"name": "mana",
"name": "Mana Documentation",
"homepage": "https://github.com/andrewgioia/Mana",
"version": "0.6",
"authors": [
"Andrew Gioia <andrewgioia@gmail.com>"
],
"description": "Magic: the Gathering mana symbol pictographic font",
"main": [
"css/mana.css"
],
"description": "Mana documentation and examples website",
"main": "index.html",
"moduleType": [],
"keywords": [
"mana",
"mtg",
"mana symbols",
"magic",
"gathering",
"font"
"mana"
],
"license": "MIT",
"private": true,
@ -25,8 +17,9 @@
"node_modules",
"bower_components",
"test",
"tests",
".git",
".gitignore"
]
"tests"
],
"dependencies": {
"mana": "*"
}
}

40
bower_components/mana/.bower.json vendored Normal file
View File

@ -0,0 +1,40 @@
{
"name": "mana",
"homepage": "https://github.com/andrewgioia/Mana",
"authors": [
"Andrew Gioia <andrewgioia@gmail.com>"
],
"description": "Magic: the Gathering mana symbol pictographic font",
"main": [
"css/mana.css"
],
"moduleType": [],
"keywords": [
"mana",
"mtg",
"mana symbols",
"magic",
"gathering",
"font"
],
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
".git",
".gitignore"
],
"_release": "808c5a8cb8",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "808c5a8cb856b005fae28e93ae554a3e2ef67c2e"
},
"_source": "https://github.com/andrewgioia/Mana.git",
"_target": "*",
"_originalSource": "mana"
}

38
bower_components/mana/README.md vendored Normal file
View File

@ -0,0 +1,38 @@
# Mana v0.6
## The Magic: the Gathering mana symbol font!
Mana is a complete set of Magic: the Gathering mana, tap, and card type symbols as a pictographic font. You can use this font anywhere you want to display mana and tap symbols&mdash;in your MtG app or website, documents, card images, anything!
## Usage
Each mana symbol has its own font character. Display them in a manner similar to [Keyrune](http://andrewgioia.github.io/Keyrune) using the `<i class="ms ms-g"></i>` element and class syntax. Class name codes are based on textual mana symbol codes (like g for Green or 3 for, well, {3}).
To use Mana, move the web font files to your `/fonts` directory and include the mana.css stylesheet in your `<head>`:
```html
<link href="css/mana.css" rel="stylesheet" type="text/css" />
```
## Editing the Source
Feel free to edit the source files and compile Mana to fit your needs. Currently LESS is supported, with Sass coming soon.
## License
All mana, tap, and card type symbol images are copyright Wizards of the Coast ([http://magicthegathering.com](http://magicthegathering.com))
The Mana font is licensed under the the SIL OFL 1.1 ([http://scripts.sil.org/OFL](http://scripts.sil.org/OFL))
Mana CSS, LESS, and Sass files are licensed under the MIT License ([http://opensource.org/licenses/mit-license.html](http://opensource.org/licenses/mit-license.html))
Attribution is **greatly appreciated** but not required!
## Changelog
* v0.1 - initial font creation and CSS/LESS files added
* v0.2 - Flashback symbol added
* v0.3 - phyrexian mana classes use MTGJson standard; project-specific LESS prefix added (@JayGray)
* v0.4 - adding classes for 16, 17, 18, 19, and 20 symbols
* v0.5 - adding the new colorless wastes symbol
* v0.6 - adding double-faced card symbols (day, night)

32
bower_components/mana/bower.json vendored Normal file
View File

@ -0,0 +1,32 @@
{
"name": "mana",
"homepage": "https://github.com/andrewgioia/Mana",
"version": "0.6",
"authors": [
"Andrew Gioia <andrewgioia@gmail.com>"
],
"description": "Magic: the Gathering mana symbol pictographic font",
"main": [
"css/mana.css"
],
"moduleType": [],
"keywords": [
"mana",
"mtg",
"mana symbols",
"magic",
"gathering",
"font"
],
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
".git",
".gitignore"
]
}

0
css/mana.css → bower_components/mana/css/mana.css vendored
View File

0
css/mana.min.css → bower_components/mana/css/mana.min.css vendored
View File

0
fonts/mana.eot → bower_components/mana/fonts/mana.eot vendored
View File

0
fonts/mana.svg → bower_components/mana/fonts/mana.svg vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 69 KiB

0
fonts/mana.ttf → bower_components/mana/fonts/mana.ttf vendored
View File

0
fonts/mana.woff → bower_components/mana/fonts/mana.woff vendored
View File

0
fonts/mana.woff2 → bower_components/mana/fonts/mana.woff2 vendored
View File

0
fonts/mplantin.eot → bower_components/mana/fonts/mplantin.eot vendored
View File

0
fonts/mplantin.svg → bower_components/mana/fonts/mplantin.svg vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 206 KiB

After

Width:  |  Height:  |  Size: 206 KiB

0
fonts/mplantin.ttf → bower_components/mana/fonts/mplantin.ttf vendored
View File

0
fonts/mplantin.woff → bower_components/mana/fonts/mplantin.woff vendored
View File

159
bower_components/mana/index.html vendored Normal file
View File

@ -0,0 +1,159 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Mana</title>
<link rel="stylesheet" href="css/mana.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<style type="text/css">
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-size: 16px;
line-height: 1.6em;
margin: 0;
padding: 0 100px;
}
h3 {
font-size: 16px;
font-weight: bold;
margin: 0;
}
p {
margin: 10px 0 20px;
}
footer {
border-top: 1px solid #eee;
margin: 40px 0 0;
padding: 20px 0 30px;
}
</style>
</head>
<body>
<h1>Mana</h1>
<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).
</p>
<h3>Regular mana symbols</h3>
<p>
<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>
<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>
<i class="ms ms-3 ms-cost ms-shadow"></i>
<i class="ms ms-4 ms-cost ms-shadow"></i>
<i class="ms ms-5 ms-cost ms-shadow"></i>
<i class="ms ms-6 ms-cost ms-shadow"></i>
<i class="ms ms-7 ms-cost ms-shadow"></i>
<i class="ms ms-8 ms-cost ms-shadow"></i>
<i class="ms ms-9 ms-cost ms-shadow"></i>
<i class="ms ms-10 ms-cost ms-shadow"></i>
<i class="ms ms-11 ms-cost ms-shadow"></i>
<i class="ms ms-12 ms-cost ms-shadow"></i>
<i class="ms ms-13 ms-cost ms-shadow"></i>
<i class="ms ms-14 ms-cost ms-shadow"></i>
<i class="ms ms-15 ms-cost ms-shadow"></i>
<i class="ms ms-16 ms-cost ms-shadow"></i>
<i class="ms ms-17 ms-cost ms-shadow"></i>
<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>
<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>
</p>
<h3>Phyrexian, snow, colorless, and split symbols</h3>
<p>
<i class="ms ms-wp ms-cost ms-shadow"></i>
<i class="ms ms-up ms-cost ms-shadow"></i>
<i class="ms ms-bp ms-cost ms-shadow"></i>
<i class="ms ms-rp ms-cost ms-shadow"></i>
<i class="ms ms-gp ms-cost ms-shadow"></i>
<i class="ms ms-s ms-cost ms-shadow"></i>
<i class="ms ms-c ms-cost ms-shadow"></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>
</p>
<h3>Tap and roll symbols</h3>
<p>
<i class="ms ms-tap ms-cost ms-shadow"></i>
<i class="ms ms-untap ms-cost"></i>
<i class="ms ms-tap-alt ms-cost ms-shadow"></i>
<i class="ms ms-chaos"></i>
</p>
<h3>2x size (3-6x also included)</h3>
<p>
<i class="ms ms-w ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-u ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-b ms-cost ms-shadow ms-2x"></i>
<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>
<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>
</p>
<h3>Un-set mana symbols</h3>
<p>
<i class="ms ms-1-2 ms-cost ms-shadow"></i>
<i class="ms ms-infinity ms-cost ms-shadow"></i>
<i class="ms ms-100 ms-cost ms-shadow"></i>
<i class="ms ms-100000 ms-cost ms-shadow"></i>
</p>
<h3>Future Sight type symbols</h3>
<p>
<i class="ms ms-artifact ms-2x"></i>
<i class="ms ms-creature ms-2x"></i>
<i class="ms ms-enchantment ms-2x"></i>
<i class="ms ms-instant ms-2x"></i>
<i class="ms ms-land ms-2x"></i>
<i class="ms ms-planeswalker ms-2x"></i>
<i class="ms ms-sorcery ms-2x"></i>
&nbsp;&nbsp;
<i class="ms ms-flashback ms-2x"></i>
</p>
<h3>Planeswalker symbols</h3>
<p>
<i class="ms ms-loyalty-up ms-loyalty-3 ms-3x"></i>
<i class="ms ms-loyalty-down ms-loyalty-x ms-3x"></i>
<i class="ms ms-loyalty-zero ms-loyalty-0 ms-3x"></i>
<i class="ms ms-loyalty-start ms-loyalty-4 ms-4x"></i>
</p>
<h3>Double-faced card symbols</h3>
<p>
<i class="ms ms-dfc ms-dfc-day ms-2x"></i>
<i class="ms ms-dfc ms-dfc-night ms-2x"></i>
</p>
<footer>
Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
</footer>
</body>
</html>

0
less/core.less → bower_components/mana/less/core.less vendored
View File

0
less/cost.less → bower_components/mana/less/cost.less vendored
View File

0
less/dfc.less → bower_components/mana/less/dfc.less vendored
View File

0
less/icons.less → bower_components/mana/less/icons.less vendored
View File

0
less/loyalty.less → bower_components/mana/less/loyalty.less vendored
View File

0
less/mana.less → bower_components/mana/less/mana.less vendored
View File

0
less/path.less → bower_components/mana/less/path.less vendored
View File

0
less/sizes.less → bower_components/mana/less/sizes.less vendored
View File

0
less/variables.less → bower_components/mana/less/variables.less vendored
View File

138
cheatsheet.html Normal file
View File

@ -0,0 +1,138 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Icon Cheatsheet | Mana</title>
<link rel="stylesheet" href="bower_components/mana/css/mana.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
</head>
<body>
<section id="banner">
<div class="wrapper">
<a href="index.html" class="item">Home</a>
<a href="icons.html" class="item">Mana Icons</a>
<a href="attributes.html" class="item">Attributes</a>
<a href="http://github.com/andrewgioia/Mana" class="item">GitHub Project</a>
<span class="item">
<iframe src="https://ghbtns.com/github-btn.html?user=andrewgioia&repo=mana&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px" style="margin-bottom: -4px;"></iframe>
</span>
<span class="item">
Created by
<a href="http://andrewgioia.com">Andrew Gioia</a>
</span>
</div>
</section>
<header>
<div class="wrapper">
<h1 class="sub">Mana &amp; Card Icons</h1>
<a class="dl button float-right" href="https://github.com/andrewgioia/Mana/archive/master.zip">
<i class="ms ms-instant"></i>
Download
</a>
<h2 class="sub">Complete set of Magic mana and card symbol font icons</h2>
</div>
</header>
<main>
<div class="wrapper">
<section>
<h3>
To use Mana on the desktop, install mana.otf, set it
as the font in your application, then copy and paste the
icons (not the unicode) directly from this page into
your designs. The UTF8 representation is provided as
a reference as well.
</h3>
</section>
<section class="content">
<h4>Icons, CSS Class, and Unicode</h4>
<div class="vectors">
<span class="utf"><i>&#xe600;</i> ms-w <code>&amp;#xe600;</code></span>
<span class="utf"><i>&#xe601;</i> ms-u <code>&amp;#xe601;</code></span>
<span class="utf"><i>&#xe602;</i> ms-b <code>&amp;#xe602;</code></span>
<span class="utf"><i>&#xe603;</i> ms-r <code>&amp;#xe603;</code></span>
<span class="utf"><i>&#xe604;</i> ms-g <code>&amp;#xe604;</code></span>
<span class="utf"><i>&#xe904;</i> ms-c <code>&amp;#xe904;</code></span>
<span class="utf"><i>&#xe605;</i> ms-0 <code>&amp;#xe605;</code></span>
<span class="utf"><i>&#xe606;</i> ms-1 <code>&amp;#xe606;</code></span>
<span class="utf"><i>&#xe607;</i> ms-2 <code>&amp;#xe607;</code></span>
<span class="utf"><i>&#xe608;</i> ms-3 <code>&amp;#xe608;</code></span>
<span class="utf"><i>&#xe609;</i> ms-4 <code>&amp;#xe609;</code></span>
<span class="utf"><i>&#xe60a;</i> ms-5 <code>&amp;#xe60a;</code></span>
<span class="utf"><i>&#xe60b;</i> ms-6 <code>&amp;#xe60b;</code></span>
<span class="utf"><i>&#xe60c;</i> ms-7 <code>&amp;#xe60c;</code></span>
<span class="utf"><i>&#xe60d;</i> ms-8 <code>&amp;#xe60d;</code></span>
<span class="utf"><i>&#xe60e;</i> ms-9 <code>&amp;#xe60e;</code></span>
<span class="utf"><i>&#xe60f;</i> ms-10 <code>&amp;#xe60f;</code></span>
<span class="utf"><i>&#xe610;</i> ms-11 <code>&amp;#xe610;</code></span>
<span class="utf"><i>&#xe611;</i> ms-12 <code>&amp;#xe611;</code></span>
<span class="utf"><i>&#xe612;</i> ms-13 <code>&amp;#xe612;</code></span>
<span class="utf"><i>&#xe613;</i> ms-14 <code>&amp;#xe613;</code></span>
<span class="utf"><i>&#xe614;</i> ms-15 <code>&amp;#xe614;</code></span>
<span class="utf"><i>&#xe62a;</i> ms-16 <code>&amp;#xe62a;</code></span>
<span class="utf"><i>&#xe62b;</i> ms-17 <code>&amp;#xe62b;</code></span>
<span class="utf"><i>&#xe62c;</i> ms-18 <code>&amp;#xe62c;</code></span>
<span class="utf"><i>&#xe62d;</i> ms-19 <code>&amp;#xe62d;</code></span>
<span class="utf"><i>&#xe62e;</i> ms-20 <code>&amp;#xe62e;</code></span>
<span class="utf"><i>&#xe615;</i> ms-x <code>&amp;#xe615;</code></span>
<span class="utf"><i>&#xe616;</i> ms-y <code>&amp;#xe616;</code></span>
<span class="utf"><i>&#xe617;</i> ms-z <code>&amp;#xe617;</code></span>
<span class="utf"><i>&#xe618;</i> ms-p <code>&amp;#xe618;</code></span>
<span class="utf"><i>&#xe619;</i> ms-s <code>&amp;#xe619;</code></span>
<div class="clear"></div>
</div>
<div class="vectors">
<span class="utf"><i>&#xe61a;</i> ms-tap <code>&amp;#xe61a;</code></span>
<span class="utf"><i>&#xe61b;</i> ms-untap <code>&amp;#xe61b;</code></span>
<span class="utf"><i>&#xe61c;</i> ms-tap-alt <code>&amp;#xe61c;</code></span>
<span class="utf"><i>&#xe616;</i> ms-chaos <code>&amp;#xe616;</code></span>
<span class="utf"><i>&#xe61d;</i> ms-1-2 <code>&amp;#xe61d;</code></span>
<span class="utf"><i>&#xe902;</i> ms-infinity <code>&amp;#xe902;</code></span>
<span class="utf"><i>&#xe903;</i> ms-s <code>&amp;#xe903;</code></span>
<div class="clear"></div>
</div>
<div class="vectors">
<span class="utf"><i style="width:auto;">&#xe900;</i> ms-100 <code>&amp;#xe900;</code></span>
<span class="utf long"><i class="long">&#xe901;</i> ms-100000 <code>&amp;#xe901;</code></span>
<div class="clear"></div>
</div>
<div class="vectors">
<span class="utf"><i>&#xe61e;</i> ms-artifact <code>&amp;#xe61e;</code></span>
<span class="utf"><i>&#xe61f;</i> ms-creature <code>&amp;#xe61f;</code></span>
<span class="utf"><i>&#xe620;</i> ms-enchantment <code>&amp;#xe620;</code></span>
<span class="utf"><i>&#xe621;</i> ms-instant <code>&amp;#xe621;</code></span>
<span class="utf"><i>&#xe622;</i> ms-land <code>&amp;#xe622;</code></span>
<span class="utf"><i>&#xe623;</i> ms-planeswalker <code>&amp;#xe623;</code></span>
<span class="utf"><i>&#xe624;</i> ms-sorcery <code>&amp;#xe624;</code></span>
<span class="utf"><i>&#xe627;</i> ms-loyalty-up <code>&amp;#xe627;</code></span>
<span class="utf"><i>&#xe625;</i> ms-loyalty-down <code>&amp;#xe625;</code></span>
<span class="utf"><i>&#xe626;</i> ms-loyalty-zero <code>&amp;#xe626;</code></span>
<span class="utf"><i>&#xe628;</i> ms-loyalty-start <code>&amp;#xe628;</code></span>
<span class="utf"><i>&#xe629;</i> ms-flashback <code>&amp;#xe629;</code></span>
<span class="utf"><i>&#xe905;</i> ms-dfc-night <code>&amp;#xe905;</code></span>
<span class="utf"><i>&#xe906;</i> ms-dfc-day <code>&amp;#xe906;</code></span>
<div class="clear"></div>
</div>
</div>
</main>
<footer>
<div class="wrapper">
<div class="float-left">
<p>Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a></p>
</div>
<div class="float-right" style="text-align: right;">
<p>
All mana images and card symbols &copy; <a href="http://magicthegathering.com">Wizards of the Coast</a><br />
The Mana font is licensed under the the <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a><br />
Mana CSS, LESS, and Sass files are licensed under the <a href="http://opensource.org/licenses/mit-license.html">MIT License</a><br />
</p>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>

338
css/main.css Normal file
View File

@ -0,0 +1,338 @@
@font-face {
font-family: 'Beleren';
src: url( '../fonts/beleren.eot' );
src: url( '../fonts/beleren.woff' ) format( 'woff' ),
url( '../fonts/beleren.ttf' ) format( 'truetype' ),
url( '../fonts/beleren.svg' ) format( 'svg' );
font-weight: normal;
font-style: normal;
}
body {
background: #fff;
color: #333;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
}
.wrapper {
max-width: 1080px;
width: 80%;
margin: 0 auto;
}
a {
color: #007185;
text-decoration: none;
}
a:hover {
color: #263D41;
}
section#banner {
background: #b6c1b0;
color: #555;
padding: 12px 0;
text-align: right;
text-shadow: 0 1px 0 #bacec2;
}
section#banner .item {
display: inline-block;
margin-left: 15px;
}
section#banner .logo {
color: #333;
float: left;
font-family: Beleren;
font-size: 18px;
margin-top: -2px;
}
header {
background: #d3d8c1;
border-bottom: 1px solid #adb7a7;
color: #333;
margin: 0;
overflow-y: hidden;
padding: 25px 0 15px;
}
header.main {
height: 272px;
}
.bigicon {
float: right;
font-size: 364px;
line-height: 200px;
margin-top: -40px;
text-shadow: 0 2px 0 #fff;
}
header .vs {
margin-left: 5px;
}
p {
font-size: 16px;
line-height: 1.6em;
margin: 20px 0;
}
section.icons p {
margin-left: 25px;
}
ul {
margin: 0;
}
li {
margin: 0 0 10px;
}
h1 {
color: #444;
margin: 0;
font-family: Beleren;
font-size: 64px;
font-weight: lighter;
padding: 0 0 20px;
text-shadow: 0 1px 0 #fff;
}
h1.sub {
font-size: 48px;
padding: 0 0 15px;
}
h2 {
color: #444;
font-family: Beleren;
font-size: 30px;
font-weight: lighter;
margin: 0;
padding: 0 0 30px;
text-shadow: 0 1px 0 #fff;
}
h2.sub {
font-size: 26px;
padding: 0 0 20px;
}
h3 {
color: #444;
font-size: 19px;
font-weight: normal;
line-height: 1.6em;
padding-bottom: 20px;
text-align: left;
}
h4 {
color: #61605B;
font-family: Beleren;
font-size: 24px;
font-weight: lighter;
margin: 15px 0 5px;
text-align: left;
}
h5 {
color: #555;
font-size: 17px;
font-weight: normal;
margin: 25px 0 -5px;
padding: 0;
}
main {
margin: 0;
padding: 20px 0 25px;
}
main section.content {
padding: 0 0 10px;
}
blockquote,
code {
font-family: Inconsolate, 'Courier New', Courier, monospace;
}
code {
background: #F7EEF1;
color: #BB073B;
padding: 1px 3px;
border-radius: 2px;
}
blockquote {
background: #eee;
border-bottom: 1px solid #d3d8c1;
line-height: 1.4em;
padding: 20px 20px 18px;
margin: 20px 0 25px;
border-radius: 4px;
}
.button {
background: #008eae;
border-bottom: 2px solid #166075;
color: #fff;
display: inline-block;
font-size: 20px;
padding: 10px 18px 9px;
border-radius: 4px;
text-shadow: 0 1px 0 #333;
}
.button:hover {
background: #00809F;
border-bottom-color: #155A6E;
color: #fff;
}
.button .ss {
margin-right: 5px;
position: relative;
top: -2px;
}
.button.vs {
background: #666;
border-bottom-color: #333;
}
.button.vs:hover {
background: #555;
border-bottom-color: #222;
}
.button.dl.float-right {
margin-top: -10px;
}
.icons {
padding: 10px 0 5px;
}
.icon {
border-radius: 3px;
display: inline-block;
overflow: hidden;
width: 24.5%;
}
.icon span {
display: inline-block;
padding: 9px 10px;
white-space: nowrap;
}
.icon:hover {
background: #eee;
position: relative;
margin-top: -4px;
margin-bottom: -5px;
}
.icon .ss {
font-size: 22px;
margin-right: 5px;
margin-top: -2px;
text-align: right;
width: 32px;
}
.icon:hover .ss {
font-size: 32px;
text-shadow: 0 1px 0 #fff;
}
.icon em {
color: #999;
font-size: 13px;
font-style: normal;
}
.vectors {
padding: 10px 0 0;
}
.utf {
display: inline-block;
width: 25%;
float: left;
padding: 6px 0;
}
.utf.long {
width: 33%;
}
.utf i {
display: inline-block;
font-family: mana;
font-style: normal;
font-size: 1.25em;
vertical-align: top;
padding: 0 5px 0 0;
text-align: center;
width: 1.25em;
}
.utf i.long {
text-align: left;
width: auto;
}
.utf code {
background-color: #f5f5f5;
color: #555;
margin-left: 3px;
}
.example {
font-size: 16px;
padding: 15px 0 0;
width: 200px;
}
.example .each {
display: block;
padding-bottom: 2px;
}
.explanation {
margin-left: 200px;
}
footer {
border-top: 1px solid #eee;
margin-top: 20px;
padding: 10px 0 30px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear {
clear: both;
}
.e { color: #63A35C; }
.a { color: #795DA3; }
.v { color: #183691; }

BIN
fonts/beleren.eot Normal file
View File

Binary file not shown.

BIN
fonts/beleren.otf Normal file
View File

Binary file not shown.

3634
fonts/beleren.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
fonts/beleren.ttf Normal file
View File

Binary file not shown.

BIN
fonts/beleren.woff Normal file
View File

Binary file not shown.

183
icons.html Normal file
View File

@ -0,0 +1,183 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Mana Icons | Mana</title>
<link rel="stylesheet" href="bower_components/mana/css/mana.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
</head>
<body>
<section id="banner">
<div class="wrapper">
<a href="index.html" class="item">Home</a>
<a href="icons.html" class="item">Mana Icons</a>
<a href="attributes.html" class="item">Attributes</a>
<a href="http://github.com/andrewgioia/Mana" class="item">GitHub Project</a>
<span class="item">
<iframe src="https://ghbtns.com/github-btn.html?user=andrewgioia&repo=mana&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px" style="margin-bottom: -4px;"></iframe>
</span>
<span class="item">
Created by
<a href="http://andrewgioia.com">Andrew Gioia</a>
</span>
</div>
</section>
<header>
<div class="wrapper">
<h1 class="sub">Mana &amp; Card Icons</h1>
<a class="dl button float-right" href="https://github.com/andrewgioia/Mana/archive/master.zip">
<i class="ms ms-instant"></i>
Download
</a>
<h2 class="sub">Complete set of Magic mana and card symbol font icons</h2>
</div>
</header>
<main>
<div class="wrapper">
<section>
<h3>
View the full list of mana symbols and other Magic card symboles. To use the symbols on your desktop or just get the vectors, check out the <a href="cheatsheet.html">Cheatsheet</a>.
</h3>
</section>
<section class="content icons">
<h4>Mana Symbols</h4>
<h5>Raw Symbols</h5>
<p>
<i class="ms ms-w"></i>
<i class="ms ms-u"></i>
<i class="ms ms-b"></i>
<i class="ms ms-r"></i>
<i class="ms ms-g"></i>
<i class="ms ms-c"></i>
</p>
<h5>Mana Costs</h5>
<p>
<i class="ms ms-w ms-cost"></i>
<i class="ms ms-u ms-cost"></i>
<i class="ms ms-b ms-cost"></i>
<i class="ms ms-r ms-cost"></i>
<i class="ms ms-g ms-cost"></i>
<i class="ms ms-c ms-cost"></i>
<i class="ms ms-0 ms-cost"></i>
<i class="ms ms-1 ms-cost"></i>
<i class="ms ms-2 ms-cost"></i>
<i class="ms ms-3 ms-cost"></i>
<i class="ms ms-4 ms-cost"></i>
<i class="ms ms-5 ms-cost"></i>
<i class="ms ms-6 ms-cost"></i>
<i class="ms ms-7 ms-cost"></i>
<i class="ms ms-8 ms-cost"></i>
<i class="ms ms-9 ms-cost"></i>
<i class="ms ms-10 ms-cost"></i>
<i class="ms ms-11 ms-cost"></i>
<i class="ms ms-12 ms-cost"></i>
<i class="ms ms-13 ms-cost"></i>
<i class="ms ms-14 ms-cost"></i>
<i class="ms ms-15 ms-cost"></i>
<i class="ms ms-16 ms-cost"></i>
<i class="ms ms-17 ms-cost"></i>
<i class="ms ms-18 ms-cost"></i>
<i class="ms ms-19 ms-cost"></i>
<i class="ms ms-20 ms-cost"></i>
<i class="ms ms-x ms-cost"></i>
<i class="ms ms-y ms-cost"></i>
<i class="ms ms-z ms-cost"></i>
</p>
<h5>Phyrexian, snow, and split symbols</h5>
<p>
<i class="ms ms-wp ms-cost"></i>
<i class="ms ms-up ms-cost"></i>
<i class="ms ms-bp ms-cost"></i>
<i class="ms ms-rp ms-cost"></i>
<i class="ms ms-gp ms-cost"></i>
<i class="ms ms-s ms-cost"></i>
<i class="ms ms-c ms-cost"></i>
<br />
<i class="ms ms-wu ms-split ms-cost"></i>
<i class="ms ms-wb ms-split ms-cost"></i>
<i class="ms ms-ub ms-split ms-cost"></i>
<i class="ms ms-ur ms-split ms-cost"></i>
<i class="ms ms-br ms-split ms-cost"></i>
<i class="ms ms-bg ms-split ms-cost"></i>
<i class="ms ms-rw ms-split ms-cost"></i>
<i class="ms ms-rg ms-split ms-cost"></i>
<i class="ms ms-gw ms-split ms-cost"></i>
<i class="ms ms-gu ms-split ms-cost"></i>
<i class="ms ms-2w ms-split ms-cost"></i>
<i class="ms ms-2u ms-split ms-cost"></i>
<i class="ms ms-2b ms-split ms-cost"></i>
<i class="ms ms-2r ms-split ms-cost"></i>
<i class="ms ms-2g ms-split ms-cost"></i>
</p>
<h5><a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?multiverseid=74257">Half mana symbols</a></h5>
<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>
</p>
<h5>Un-set mana symbols</h5>
<p>
<i class="ms ms-1-2 ms-cost"></i>
<i class="ms ms-infinity ms-cost"></i>
<i class="ms ms-100 ms-cost"></i>
<i class="ms ms-100000 ms-cost"></i>
</p>
<h4 style="padding-top:25px;">Card Symbols</h4>
<h5>Tap and roll symbols</h5>
<p>
<i class="ms ms-tap ms-cost"></i>
<i class="ms ms-untap ms-cost"></i>
<i class="ms ms-tap-alt ms-cost"></i>
<i class="ms ms-chaos"></i>
</p>
<h5>Future Sight type symbols</h5>
<p>
<i class="ms ms-artifact ms-2x"></i>
<i class="ms ms-creature ms-2x"></i>
<i class="ms ms-enchantment ms-2x"></i>
<i class="ms ms-instant ms-2x"></i>
<i class="ms ms-land ms-2x"></i>
<i class="ms ms-planeswalker ms-2x"></i>
<i class="ms ms-sorcery ms-2x"></i>
&nbsp;&nbsp;
<i class="ms ms-flashback ms-2x"></i>
</p>
<h5>Planeswalker symbols</h5>
<p>
<i class="ms ms-loyalty-up ms-loyalty-3 ms-2x"></i>
<i class="ms ms-loyalty-down ms-loyalty-x ms-2x"></i>
<i class="ms ms-loyalty-zero ms-loyalty-0 ms-2x"></i>
<i class="ms ms-loyalty-start ms-loyalty-4 ms-3x"></i>
</p>
<h5>Double-faced card symbols</h5>
<p>
<i class="ms ms-dfc ms-dfc-day"></i>
<i class="ms ms-dfc ms-dfc-night"></i>
</p>
</section>
</div>
</main>
<footer>
<div class="wrapper">
<div class="float-left">
<p>Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a></p>
</div>
<div class="float-right" style="text-align: right;">
<p>
All mana images and card symbols &copy; <a href="http://magicthegathering.com">Wizards of the Coast</a><br />
The Mana font is licensed under the the <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a><br />
Mana CSS, LESS, and Sass files are licensed under the <a href="http://opensource.org/licenses/mit-license.html">MIT License</a><br />
</p>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>

232
index.html
View File

@ -3,157 +3,101 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Mana</title>
<link rel="stylesheet" href="css/mana.css" />
<title>Mana | Andrew Gioia</title>
<link rel="stylesheet" href="bower_components/mana/css/mana.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<style type="text/css">
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-size: 16px;
line-height: 1.6em;
margin: 0;
padding: 0 100px;
}
h3 {
font-size: 16px;
font-weight: bold;
margin: 0;
}
p {
margin: 10px 0 20px;
}
footer {
border-top: 1px solid #eee;
margin: 40px 0 0;
padding: 20px 0 30px;
}
</style>
</head>
<body>
<section id="banner">
<div class="wrapper">
<a href="index.html" class="item">Home</a>
<a href="icons.html" class="item">Mana Icons</a>
<a href="attributes.html" class="item">Attributes</a>
<a href="http://github.com/andrewgioia/Mana" class="item">GitHub Project</a>
<span class="item">
<iframe src="https://ghbtns.com/github-btn.html?user=andrewgioia&repo=mana&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px" style="margin-bottom: -4px;"></iframe>
</span>
<span class="item">
Created by
<a href="http://andrewgioia.com">Andrew Gioia</a>
</span>
</div>
</section>
<header class="main">
<div class="wrapper">
<div class="bigicon">
<i class="ms ms-g"></i>
</div>
<h1>Mana</h1>
<h2>MTG Mana Symbol Demos</h2>
<h2>Magic: the Gathering card symbol font</h2>
<div class="actions">
<a class="dl button" href="https://github.com/andrewgioia/Mana/archive/master.zip">
<i class="ms ms-instant"></i>
Download
</a>
<a class="vs button" href="icons.html">
<i class="ms ms-tap"></i>
View Mana Icons
</a>
</div>
<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).
</p>
<h3>Regular mana symbols</h3>
<p>
<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>
<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>
<i class="ms ms-3 ms-cost ms-shadow"></i>
<i class="ms ms-4 ms-cost ms-shadow"></i>
<i class="ms ms-5 ms-cost ms-shadow"></i>
<i class="ms ms-6 ms-cost ms-shadow"></i>
<i class="ms ms-7 ms-cost ms-shadow"></i>
<i class="ms ms-8 ms-cost ms-shadow"></i>
<i class="ms ms-9 ms-cost ms-shadow"></i>
<i class="ms ms-10 ms-cost ms-shadow"></i>
<i class="ms ms-11 ms-cost ms-shadow"></i>
<i class="ms ms-12 ms-cost ms-shadow"></i>
<i class="ms ms-13 ms-cost ms-shadow"></i>
<i class="ms ms-14 ms-cost ms-shadow"></i>
<i class="ms ms-15 ms-cost ms-shadow"></i>
<i class="ms ms-16 ms-cost ms-shadow"></i>
<i class="ms ms-17 ms-cost ms-shadow"></i>
<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>
<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>
</p>
<h3>Phyrexian, snow, colorless, and split symbols</h3>
<p>
<i class="ms ms-wp ms-cost ms-shadow"></i>
<i class="ms ms-up ms-cost ms-shadow"></i>
<i class="ms ms-bp ms-cost ms-shadow"></i>
<i class="ms ms-rp ms-cost ms-shadow"></i>
<i class="ms ms-gp ms-cost ms-shadow"></i>
<i class="ms ms-s ms-cost ms-shadow"></i>
<i class="ms ms-c ms-cost ms-shadow"></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>
</p>
<h3>Tap and roll symbols</h3>
<p>
<i class="ms ms-tap ms-cost ms-shadow"></i>
<i class="ms ms-untap ms-cost"></i>
<i class="ms ms-tap-alt ms-cost ms-shadow"></i>
<i class="ms ms-chaos"></i>
</p>
<h3>2x size (3-6x also included)</h3>
<p>
<i class="ms ms-w ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-u ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-b ms-cost ms-shadow ms-2x"></i>
<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>
<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>
</p>
<h3>Un-set mana symbols</h3>
<p>
<i class="ms ms-1-2 ms-cost ms-shadow"></i>
<i class="ms ms-infinity ms-cost ms-shadow"></i>
<i class="ms ms-100 ms-cost ms-shadow"></i>
<i class="ms ms-100000 ms-cost ms-shadow"></i>
</p>
<h3>Future Sight type symbols</h3>
<p>
<i class="ms ms-artifact ms-2x"></i>
<i class="ms ms-creature ms-2x"></i>
<i class="ms ms-enchantment ms-2x"></i>
<i class="ms ms-instant ms-2x"></i>
<i class="ms ms-land ms-2x"></i>
<i class="ms ms-planeswalker ms-2x"></i>
<i class="ms ms-sorcery ms-2x"></i>
&nbsp;&nbsp;
<i class="ms ms-flashback ms-2x"></i>
</p>
<h3>Planeswalker symbols</h3>
<p>
<i class="ms ms-loyalty-up ms-loyalty-3 ms-3x"></i>
<i class="ms ms-loyalty-down ms-loyalty-x ms-3x"></i>
<i class="ms ms-loyalty-zero ms-loyalty-0 ms-3x"></i>
<i class="ms ms-loyalty-start ms-loyalty-4 ms-4x"></i>
</p>
<h3>Double-faced card symbols</h3>
<p>
<i class="ms ms-dfc ms-dfc-day ms-2x"></i>
<i class="ms ms-dfc ms-dfc-night ms-2x"></i>
Current version 1.0.0 includes all known mana and card icons.
</p>
</div>
</header>
<main>
<div class="wrapper">
<section>
<h3><strong>Mana is a complete set of scalable vector icons for Magic mana (and other card) symbols.</strong> Drop them into your application, website, or custom cards (like this <i class="ms ms-cost ms-g"></i>) and control their size, color, drop shadow, or any dimension just as you would with text!</h3>
</section>
<section class="content">
<h4>Using Mana</h4>
<p>Each mana/card symbol has its own font character. Display them in a manner similar to <a href="http://fontawesome.io">Font Awesome</a> using the <code>&lt;i class="ms ..."&gt;&lt;/i&gt;</code> element. There are class names for each mana color (w, u, b, r, g, c) and for the various symbols that appear on cards (like tap). See the <a href="icons.html">full list</a> of available symbols.</p>
<p>To use Mana, move the font files to your /fonts directory and include the <code>mana.css</code> stylesheet in your <code>&lt;head&gt;</code>:</p>
<blockquote>
&lt;<span class="e">link</span> <span class="a">href</span>=<span class="v">"css/mana.css"</span> <span class="a">rel</span>=<span class="v">"stylesheet"</span> <span class="a">type</span>=<span class="v">"text/css"</span> /&gt;
</blockquote>
<p>Insert set symbol icons by using the <code>.ms</code> class and then the mana/symbol code class(es), such as <code>.ms-u</code> for blue mana: <i class="ms ms-u"></i></p>
<blockquote>
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-u"</span>&gt;&lt;/<span class="e">i</span>&gt;
</blockquote>
</section>
<section class="content">
<h4>Editing the Source</h4>
<p>Feel free to edit the source files and compile Mana to fit your needs. All SVG glyphs are compiled into font files using the wonderful <a href="http://icomoon.io">IcoMoon</a> app. For styling, currently LESS is supported with Sass coming soon.</p>
</section>
<section class="content">
<h4>License</h4>
<p>Please review the following licenses for each component of Mana:</p>
<ul>
<li>All mana and card symbol images are copyright Wizards of the Coast (<a href="http://magicthegathering.com">http://magicthegathering.com</a>)</li>
<li>The Mana font is licensed under the the SIL OFL 1.1 (<a href="http://scripts.sil.org/OFL">http://scripts.sil.org/OFL</a>)</li>
<li>Mana CSS, LESS, and Sass files are licensed under the MIT License (<a href="http://opensource.org/licenses/mit-license.html">http://opensource.org/licenses/mit-license.html</a>)</li>
</ul>
<p>Attribution is <strong>greatly appreciated</strong> but not required!</p>
</section>
</div>
</main>
<footer>
Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
<div class="wrapper">
<div class="float-left">
<p>Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a></p>
</div>
<div class="float-right" style="text-align: right;">
<p>
All mana images and card symbols &copy; <a href="http://magicthegathering.com">Wizards of the Coast</a><br />
The Mana font is licensed under the the <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a><br />
Mana CSS, LESS, and Sass files are licensed under the <a href="http://opensource.org/licenses/mit-license.html">MIT License</a><br />
</p>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>