From 48cd786eb0552b9f5892fe8d99f8921eeff83f51 Mon Sep 17 00:00:00 2001 From: Andrew Gioia Date: Wed, 22 Jun 2016 14:15:30 -0400 Subject: [PATCH] Updated icons page and new attributes page showing all of the available options --- attributes.html | 199 +++++++++++++++++++++++++++++++++ css/main.css | 11 +- icons.html | 285 +++++++++++++++++++++++++++++------------------- 3 files changed, 375 insertions(+), 120 deletions(-) create mode 100644 attributes.html diff --git a/attributes.html b/attributes.html new file mode 100644 index 0000000..80789ef --- /dev/null +++ b/attributes.html @@ -0,0 +1,199 @@ + + + + Attributes and Examples | Mana + + + + + + + + +
+
+

Mana & Card Icons

+ + + Download + +

Complete set of Magic mana and card symbol font icons

+
+
+ +
+
+
+

Mana has some built in icon options to easily change the size and position, convert the mana symbols to the casting costs, and create planeswalker loyalty symbols with numbers. Take a look below at examples of each option with the class names to implement them.

+
+
+

The Basic Icon

+
+ + .ms-u + +
+
+

You can place Mana icons anywhere using the CSS classname prefix ms (for "mana symbol") and then the mana/card symbol's suffix.

+
+ <i class="ms ms-u"></i>
+
+
+
+
+
+

Creating a Casting Cost

+
+ + .ms-cost + + + + .ms-shadow + +
+
+

Add the .ms-cost class to create a casting cost circle around the symbol. Append the .ms-shadow class to add a drop shadow.

+
+ <i class="ms ms-g ms-cost"></i>
+ <i class="ms ms-r ms-cost ms-shadow"></i> +
+
+
+
+
+

Split Casting Costs

+
+ + .ms-split + + + + .ms-shadow + +
+
+

Automatically create split casting costs using the .ms-split class along with the 2 symbols' codes. This works for color pairs and the "2" with a color.

+
+ <i class="ms ms-wu ms-split ms-cost"></i>
+ <i class="ms ms-2b ms-split ms-cost ms-shadow"></i> +
+
+
+
+
+

Half Mana Casting Costs

+
+ + .ms-half + +
+
+

Even though there's only been one of these ever printed you can still create them :P Half costs require a bit more markup:

+
+ <span class="ms-half">
+     <i class="ms ms-w ms-cost"></i>
+ </span> +
+
+
+
+
+

Planeswalker Symbols

+
+ + .ms-loyalty-up + + + .ms-loyalty-down + +
+
+

You can create planewalker loyalty symbols for the starting value, zero, and ticking up or down. The number that appears is based on a class you add, like .ms-loyalty-4.

+
+ <i class="ms ms-loyalty-up ms-loyalty-3"></i>
+ <i class="ms ms-loyalty-down ms-loyalty-2"></i> +
+
+
+
+
+

Increase the Symbol's Size

+
+ + .ms-2x + + + .ms-3x + + + .ms-4x + + + .ms-5x + + + .ms-6x + +
+
+

To conveniently increase the size of a mana or card symbol you can append the classes ms-2x, ms-3x, ms-4x, ms-4x, and ms-6x. These classes increase the size by a factor equal to class name number.

+
+ <i class="ms ms-r ss-2x"></i> ms-2x
+ <i class="ms ms-r ss-3x"></i> ms-3x
+ <i class="ms ms-r ss-4x"></i> ms-4x
+ <i class="ms ms-r ss-5x"></i> ms-5x
+ <i class="ms ms-r ss-6x"></i> ms-6x +
+
+
+
+
+

Fixed Width

+
+ Planeswalker + Land +
+
+

Some of the card symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width to a standard size, just append the class .ms-fw and the symbols will have a constant width and centered icon.

+
+ <i class="ss ss-planeswalker ss-fw"></i> Planeswalker symbol
+ <i class="ss ss-land ss-fw"></i> Land symbol +
+
+
+
+
+
+ + + + + diff --git a/css/main.css b/css/main.css index df68425..d18b17f 100644 --- a/css/main.css +++ b/css/main.css @@ -148,8 +148,8 @@ h4 { h5 { color: #555; font-size: 17px; - font-weight: normal; - margin: 25px 0 -5px; + font-weight: bold; + margin: 15px 0 5px; padding: 0; } @@ -244,7 +244,7 @@ blockquote { margin-bottom: -5px; } - .icon .ss { + .icon .ms { font-size: 22px; margin-right: 5px; margin-top: -2px; @@ -252,7 +252,7 @@ blockquote { width: 32px; } - .icon:hover .ss { + .icon:hover .ms { font-size: 32px; text-shadow: 0 1px 0 #fff; } @@ -313,7 +313,8 @@ blockquote { .example .each { display: block; - padding-bottom: 2px; + padding-top: 1px; + padding-bottom: 7px; } .explanation { diff --git a/icons.html b/icons.html index 69a386b..f9a7c1e 100644 --- a/icons.html +++ b/icons.html @@ -40,126 +40,181 @@

- 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 Cheatsheet. + View the full list of mana symbols and other Magic card symboles. + To see all the different variations and casting cost styles, check out the Attributes page. + To use the symbols on your desktop or just get the vectors, check out the Cheatsheet.

Mana Symbols

-
Raw Symbols
-

- - - - - - -

-
Mana Costs
-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

-
Phyrexian, snow, and split symbols
-

- - - - - - - -
- - - - - - - - - - - - - - - -

-
Half mana symbols
-

- - - - - -

-
Un-set mana symbols
-

- - - - -

+
+
+ White (w) +
+
+ Blue (u) +
+
+ Black (b) +
+
+ Red (r) +
+
+ Green (g) +
+
+ Colorless Mana (c) +
+
+ Phyrexian Mana (p) +
+
+ Snow Mana (s) +
+
+ X (x) +
+
+ Y (y) +
+
+ Z (z) +
+
+ 0 (0) +
+
+ 1 (1) +
+
+ 2 (2) +
+
+ 3 (3) +
+
+ 4 (4) +
+
+ 5 (5) +
+
+ 6 (6) +
+
+ 7 (7) +
+
+ 8 (8) +
+
+ 9 (9) +
+
+ 10 (10) +
+
+ 11 (11) +
+
+ 12 (12) +
+
+ 13 (13) +
+
+ 14 (14) +
+
+ 15 (15) +
+
+ 16 (16) +
+
+ 17 (17) +
+
+ 18 (18) +
+
+ 19 (19) +
+
+ 20 (20) +
+
+ 17 (1-2) +
+
+ Infinity (infinity) +
+
+ 19 (19) +
+
+     1,000,000 (1000000) +
+
+

Card Symbols

-
Tap and roll symbols
-

- - - - -

-
Future Sight type symbols
-

- - - - - - - -    - -

-
Planeswalker symbols
-

- - - - -

-
Double-faced card symbols
-

- - -

+
+
+ Tap (tap) +
+
+ Untap (untap) +
+
+ Tap (tap-alt) +
+
+ Chaos (chaos) +
+
+ Artifact (artifact) +
+
+ Creature (creature) +
+
+ Enchantment (enchantment) +
+
+ Instant (instant) +
+
+ Land (land) +
+
+ Planeswalker (planeswalker) +
+
+ Sorcery (sorcery) +
+
+ Flashback (flashback) +
+
+ Loyalty Up (loyalty-up) +
+
+ Loyalty Down (loyalty-down) +
+
+ Loyalty Zero (loyalty-zero) +
+
+ Loyalty Start (loyalty-start) +
+
+ DFC (Day) (dfc-day) +
+
+ DFC (Night) (dfc-night) +
+