mirror of
				https://github.com/andrewgioia/mana.git
				synced 2025-11-04 00:50:45 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			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>
 |