mirror of https://github.com/andrewgioia/mana.git
147 lines
5.9 KiB
HTML
147 lines
5.9 KiB
HTML
<!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, 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>
|
|
<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>New: <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>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>
|
|
|
|
<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>
|
|
<footer>
|
|
Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|