forked from andrewgioia/mana
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (191 loc) · 7.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!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, 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-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-1000000 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>
<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>
<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>
</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>
<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>
<footer>
Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a>
</footer>
</body>
</html>