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
553b65cadb
mana/index.html

407 lines
19 KiB
HTML
Raw Blame History

<!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?v=1.8.0" />
<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;
color: #333;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 17px;
line-height: 1.6em;
margin: 0 auto;
padding: 0 100px;
max-width: 1280px;
}
h1, h2, .mplantin {
font-family: MPlantin, Times, serif;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 19px;
font-weight: bold;
margin: 0;
}
p {
margin: 10px 0 20px;
}
footer {
border-top: 1px solid #eee;
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>
<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). Please take a look at the
<a href="https://mana.andrewgioia.com">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>
<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>
</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>
<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>
<i class="ms ms-e"></i>
<br />
<i class="ms ms-wu ms-cost ms-shadow"></i>
<i class="ms ms-wb ms-cost ms-shadow"></i>
<i class="ms ms-ub ms-cost ms-shadow"></i>
<i class="ms ms-ur ms-cost ms-shadow"></i>
<i class="ms ms-br ms-cost ms-shadow"></i>
<i class="ms ms-bg ms-cost ms-shadow"></i>
<i class="ms ms-rw ms-cost ms-shadow"></i>
<i class="ms ms-rg ms-cost ms-shadow"></i>
<i class="ms ms-gw ms-cost ms-shadow"></i>
<i class="ms ms-gu ms-cost ms-shadow"></i>
<i class="ms ms-2w ms-cost ms-shadow"></i>
<i class="ms ms-2u ms-cost ms-shadow"></i>
<i class="ms ms-2b ms-cost ms-shadow"></i>
<i class="ms ms-2r ms-cost ms-shadow"></i>
<i class="ms ms-2g 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>Half mana symbols <small>[<a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?multiverseid=74257">Source</a>]</small></h3>
<p>
<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>
<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-1000000 ms-cost ms-shadow"></i>
<i class="ms ms-acorn"></i>
</p>
<h3>Color indicators</h3>
<p>
<i class="ms ms-ci ms-ci-1 ms-ci-w"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-u"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-b"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-r"></i>
<i class="ms ms-ci ms-ci-1 ms-ci-g"></i>
&nbsp;
<i class="ms ms-ci ms-ci-2 ms-ci-wu"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-wb"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-ub"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-ur"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-bg"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-br"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-rw"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-rg"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-gu"></i>
<i class="ms ms-ci ms-ci-2 ms-ci-gw"></i>
<br />
<i class="ms ms-ci ms-ci-3 ms-ci-wug"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-ubw"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-bru"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-rgb"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-gwr"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-wbg"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-urw"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-bgu"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-rwb"></i>
<i class="ms ms-ci ms-ci-3 ms-ci-gur"></i>
&nbsp;
<i class="ms ms-ci ms-ci-4 ms-ci-ubrg"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-brgw"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-rgwu"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-gwub"></i>
<i class="ms ms-ci ms-ci-4 ms-ci-wubr"></i>
&nbsp;
<i class="ms ms-ci ms-ci-5"></i>
</p>
</div>
<div class="right">
<h3>Future Sight and other type symbols</h3>
<p>
<i class="ms ms-artifact ms-2x" title="Artifact"></i>
<i class="ms ms-creature ms-2x" title="Creature"></i>
<i class="ms ms-enchantment ms-2x" title="Enchantment"></i>
<i class="ms ms-instant ms-2x" title="Instant"></i>
<i class="ms ms-land ms-2x" title="Land"></i>
<i class="ms ms-planeswalker ms-2x" title="Planeswalker"></i>
<i class="ms ms-sorcery ms-2x" title="Sorcery"></i>
<i class="ms ms-tribal ms-2x" title="Tribal"></i>
<i class="ms ms-plane ms-2x" title="Plane"></i>
<i class="ms ms-phenomenon ms-2x" title="Phenomenon"></i>
<i class="ms ms-scheme ms-2x" title="Scheme"></i>
<i class="ms ms-conspiracy ms-2x" title="Conspiracy"></i>
<br />
<i class="ms ms-multicolor ms-duo ms-duo-color ms-grad ms-2x" title="Multicolor"></i>
<i class="ms ms-token ms-2x" title="Token"></i>
<i class="ms ms-flashback ms-2x" title="Flashback"></i>
<i class="ms ms-rarity ms-2x" title="Rarity"></i>
<i class="ms ms-vanguard ms-2x" title="Vangaurd"></i>
</p>
<h3>Loyalty 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>
&nbsp;&nbsp;
<i class="ms ms-saga ms-saga-1 ms-2x"></i>
<i class="ms ms-saga ms-saga-2 ms-2x"></i>
<i class="ms ms-saga ms-saga-3 ms-2x"></i>
<i class="ms ms-saga ms-saga-4 ms-2x"></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>
<i class="ms ms-dfc ms-dfc-spark ms-2x"></i>
<i class="ms ms-dfc ms-dfc-ignite ms-2x"></i>
<i class="ms ms-dfc ms-dfc-moon ms-2x"></i>
<i class="ms ms-dfc ms-dfc-emrakul ms-2x"></i>
<i class="ms ms-dfc ms-dfc-enchantment ms-2x"></i>
<i class="ms ms-dfc ms-dfc-lesson ms-2x"></i>
&nbsp;&nbsp;
<i class="ms ms-dfc-modal-face ms-2x"></i>
<i class="ms ms-dfc-modal-back ms-2x"></i>
</p>
<h3>Guild Symbols</h3>
<p>
<i class="ms ms-guild-azorius ms-2x"></i>
<i class="ms ms-guild-boros ms-2x"></i>
<i class="ms ms-guild-dimir ms-2x"></i>
<i class="ms ms-guild-golgari ms-2x"></i>
<i class="ms ms-guild-gruul ms-2x"></i>
<i class="ms ms-guild-izzet ms-2x"></i>
<i class="ms ms-guild-orzhov ms-2x"></i>
<i class="ms ms-guild-rakdos ms-2x"></i>
<i class="ms ms-guild-selesnya ms-2x"></i>
<i class="ms ms-guild-simic ms-2x"></i>
</p>
<h3>Clan Symbols</h3>
<p>
<i class="ms ms-clan-abzan ms-2x"></i>
<i class="ms ms-clan-jeskai ms-2x"></i>
<i class="ms ms-clan-mardu ms-2x"></i>
<i class="ms ms-clan-sultai ms-2x"></i>
<i class="ms ms-clan-temur ms-2x"></i>
&nbsp;&nbsp;
<i class="ms ms-clan-atarka ms-2x"></i>
<i class="ms ms-clan-dromoka ms-2x"></i>
<i class="ms ms-clan-kolaghan ms-2x"></i>
<i class="ms ms-clan-ojutai ms-2x"></i>
<i class="ms ms-clan-silumgar ms-2x"></i>
</p>
<h3>Poleis Symbols</h3>
<p>
<i class="ms ms-polis-setessa ms-2x"></i>
<i class="ms ms-polis-akros ms-2x"></i>
<i class="ms ms-polis-meletis ms-2x"></i>
</p>
<h3>Magic Online Counters</h3>
<p>
<i class="ms ms-counter-arrow ms-2x"></i>
<i class="ms ms-counter-brick ms-2x"></i>
<i class="ms ms-counter-charge ms-2x"></i>
<i class="ms ms-counter-devotion ms-2x"></i>
<i class="ms ms-counter-doom ms-2x"></i>
<i class="ms ms-counter-echo ms-2x"></i>
<i class="ms ms-counter-flame ms-2x"></i>
<i class="ms ms-counter-flood ms-2x"></i>
<i class="ms ms-counter-fungus ms-2x"></i>
<i class="ms ms-counter-gold ms-2x"></i>
<i class="ms ms-counter-ki ms-2x"></i>
<i class="ms ms-counter-lore ms-2x"></i>
<i class="ms ms-counter-loyalty ms-2x"></i>
<i class="ms ms-counter-mining ms-2x"></i>
<i class="ms ms-counter-minus ms-2x"></i>
<i class="ms ms-counter-minus-uneven ms-2x"></i>
<i class="ms ms-counter-muster ms-2x"></i>
<i class="ms ms-counter-paw ms-2x"></i>
<i class="ms ms-counter-pin ms-2x"></i>
<i class="ms ms-counter-plus ms-2x"></i>
<i class="ms ms-counter-plus-uneven ms-2x"></i>
<i class="ms ms-counter-scream ms-2x"></i>
<i class="ms ms-counter-skeleton ms-2x"></i>
<i class="ms ms-counter-skull ms-2x"></i>
<i class="ms ms-counter-slime ms-2x"></i>
<i class="ms ms-counter-time ms-2x"></i>
<i class="ms ms-counter-verse ms-2x"></i>
<i class="ms ms-counter-vortex ms-2x"></i>
</p>
<h3>Arena Ability Symbols</h3>
<p>
<i class="ms ms-ability-activated ms-2x" title="Activated"></i>
<i class="ms ms-ability-adamant ms-2x" title="Adamant"></i>
<i class="ms ms-ability-adapt ms-2x" title="Adapt"></i>
<i class="ms ms-ability-addendum ms-2x" title="Addendum"></i>
<i class="ms ms-ability-adventure ms-2x" title="Adventure"></i>
<i class="ms ms-ability-afflict ms-2x" title="Afflict"></i>
<i class="ms ms-ability-afterlife ms-2x" title="Afterlife"></i>
<i class="ms ms-ability-aftermath ms-2x" title="Aftermath"></i>
<i class="ms ms-ability-amass ms-2x" title="Amass"></i>
<i class="ms ms-ability-ascend ms-2x" title="Ascend"></i>
<i class="ms ms-ability-boast ms-2x" title="Boast"></i>
<i class="ms ms-ability-companion ms-2x" title="Companion"></i>
<i class="ms ms-ability-constellation ms-2x" title="Constellation"></i>
<i class="ms ms-ability-convoke ms-2x" title="Convoke"></i>
<i class="ms ms-ability-deathtouch ms-2x" title="Deathtouch"></i>
<i class="ms ms-ability-defender ms-2x" title="Defender"></i>
<i class="ms ms-ability-devotion ms-2x" title="Devotion"></i>
<i class="ms ms-ability-double-strike ms-2x" title="Double Strike"></i>
<i class="ms ms-ability-dungeon ms-2x" title="Dungeon"></i>
<i class="ms ms-ability-embalm ms-2x" title="Embalm"></i>
<i class="ms ms-ability-enrage ms-2x" title="Enrage"></i>
<i class="ms ms-ability-escape ms-2x" title="Escape"></i>
<i class="ms ms-ability-eternalize ms-2x" title="Eternalize"></i>
<i class="ms ms-ability-explore ms-2x" title="Explore"></i>
<i class="ms ms-ability-first-strike ms-2x" title="First Strike"></i>
<i class="ms ms-ability-flash ms-2x" title="Flash"></i>
<i class="ms ms-ability-flying ms-2x" title="Flying"></i>
<i class="ms ms-ability-foretell ms-2x" title="Foretell"></i>
<i class="ms ms-ability-haste ms-2x" title="Haste"></i>
<i class="ms ms-ability-hexproof ms-2x" title="Hexproof: Generic"></i>
<i class="ms ms-ability-hexproof-white ms-2x" title="Hexproof: White"></i>
<i class="ms ms-ability-hexproof-blue ms-2x" title="Hexproof: Blue"></i>
<i class="ms ms-ability-hexproof-black ms-2x" title="Hexproof: Black"></i>
<i class="ms ms-ability-hexproof-red ms-2x" title="Hexproof: Red"></i>
<i class="ms ms-ability-hexproof-green ms-2x" title="Hexproof: Green"></i>
<i class="ms ms-ability-indestructible ms-2x" title="Indestructible"></i>
<i class="ms ms-ability-jumpstart ms-2x" title="Jumpstart"></i>
<i class="ms ms-ability-kicker ms-2x" title="Kicker"></i>
<i class="ms ms-ability-landfall ms-2x" title="Landfall"></i>
<i class="ms ms-ability-learn ms-2x" title=":Learn"></i>
<i class="ms ms-ability-lifelink ms-2x" title="Lifelink"></i>
<i class="ms ms-ability-magecraft ms-2x" title="Magecraft"></i>
<i class="ms ms-ability-menace ms-2x" title="Menace"></i>
<i class="ms ms-ability-mentor ms-2x" title="Mentor"></i>
<i class="ms ms-ability-mutate ms-2x" title="Mutate"></i>
<i class="ms ms-ability-party ms-2x" title="Party"></i>
<i class="ms ms-ability-proliferate ms-2x" title="Proliferate"></i>
<i class="ms ms-ability-prowess ms-2x" title="Prowess"></i>
<i class="ms ms-ability-raid ms-2x" title="Raid"></i>
<i class="ms ms-ability-reach ms-2x" title="Reach"></i>
<i class="ms ms-ability-revolt ms-2x" title="Revolt"></i>
<i class="ms ms-ability-riot ms-2x" title="Riot"></i>
<i class="ms ms-ability-spectacle ms-2x" title="Spectacle"></i>
<i class="ms ms-ability-static ms-2x" title="Static"></i>
<i class="ms ms-ability-summoning-sickness ms-2x" title="Summoning Sickness"></i>
<i class="ms ms-ability-surveil ms-2x" title="Surveil"></i>
<i class="ms ms-ability-trample ms-2x" title="Trample"></i>
<i class="ms ms-ability-transform ms-2x" title="Transform"></i>
<i class="ms ms-ability-triggered ms-2x" title="Triggered"></i>
<i class="ms ms-ability-undergrowth ms-2x" title="Undergrowth"></i>
<i class="ms ms-ability-vigilance ms-2x" title="Vigilance"></i>
<i class="ms ms-ability-ward ms-2x" title="Ward"></i>
</p>
</div>
<div style="clear: both;"></div>
<footer>
Made with &hearts; by <a href="https://andrewgioia.com">Andrew Gioia</a>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink