From 33106c3fe2ed3a93f620c2d941770e1024b1aa22 Mon Sep 17 00:00:00 2001 From: Andrew Gioia Date: Sun, 15 Mar 2015 13:17:13 -0400 Subject: [PATCH] Adding icon list page and some general style cleanup --- css/main.css | 82 ++++++++++++++++++++++++++++++------- icons.html | 112 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 11 +++-- 3 files changed, 184 insertions(+), 21 deletions(-) create mode 100644 icons.html diff --git a/css/main.css b/css/main.css index 4ccc8d7..aa7eccd 100644 --- a/css/main.css +++ b/css/main.css @@ -46,6 +46,14 @@ section#banner { margin-left: 15px; } + section#banner .logo { + color: #333; + float: left; + font-family: Beleren; + font-size: 18px; + margin-top: -2px; + } + header { background: #E6E2D7; border-bottom: 1px solid #CFCDC7; @@ -78,9 +86,14 @@ h1 { font-size: 64px; font-weight: lighter; padding: 0 0 20px; - text-shadow: 0 2px 0 #fff; + text-shadow: 0 1px 0 #fff; } + h1.sub { + font-size: 48px; + padding: 0 0 15px; + } + h2 { color: #444; font-family: Beleren; @@ -91,7 +104,21 @@ h2 { text-shadow: 0 1px 0 #fff; } + h2.sub { + font-size: 26px; + padding: 0 0 20px; + } + h3 { + color: #444; + font-size: 19px; + font-weight: normal; + line-height: 1.6em; + padding-bottom: 20px; + text-align: left; +} + +h4 { color: #61605B; font-family: Beleren; font-size: 24px; @@ -100,26 +127,13 @@ h3 { text-align: left; } -h4 { - color: #444; - font-size: 18px; - font-weight: normal; - line-height: 1.6em; - text-align: left; -} - main { margin: 0; padding: 20px 0 25px; } main section.content { - padding: 10px 0 10px; - } - - main h2 { - font-size: 24px; - padding: 0 0 5px; + padding: 0 0 10px; } blockquote, @@ -168,8 +182,46 @@ blockquote { border-bottom-color: #222; } + .button.dl.float-right { + margin-top: -10px; + } + +.icons { + padding: 10px 0 0; +} + +.icon { + border-radius: 3px; + display: inline-block; + width: 24.5%; +} + + .icon span { + display: inline-block; + padding: 10px 15px; + } + + .icon:hover { + background: #eee; + } + + .icon .ss { + font-size: 22px; + margin-right: 5px; + margin-top: -2px; + } + + .icon em { + color: #999; + font-style: normal; + } + footer { border-top: 1px solid #eee; margin-top: 20px; padding: 30px 0 50px; } + +.float-right { + float: right; +} diff --git a/icons.html b/icons.html new file mode 100644 index 0000000..2bf41e4 --- /dev/null +++ b/icons.html @@ -0,0 +1,112 @@ + + + + + + Set Symbol Icons | Keyrune + + + + + + + + +
+
+

Set Symbol Icons

+ + + Download + +

Complete 147 Magic set symbol font icons

+
+
+ +
+
+
+

View the full list of 147 set and expansion symbols below, for all sets and special edition products up to Fate Reforged. Some small run sets are missing, if you want one please request it!

+
+
+

Core Sets

+
+
+ Alpha (lea) +
+
+ Beta (leb) +
+
+ Unlimited (2ed) +
+
+ Revised (3ed) +
+
+ Fourth Edition (4ed) +
+
+ Summer Magic (psum) +
+
+ Fifth Edition (5ed) +
+
+ Sixth Edition (6ed) +
+
+ Seventh Edition (7ed) +
+
+ Eigth Edition (8ed) +
+
+ Ninth Edition (9ed) +
+
+ Tenth Edition (10e) +
+
+ Magic 2010 (m10) +
+
+ Magic 2011 (m11) +
+
+ Magic 2012 (m12) +
+
+ Magic 2013 (m13) +
+
+ Magic 2014 (m14) +
+
+ Magic 2015 (m15) +
+
+
+
+
+ + + + + diff --git a/index.html b/index.html index 1911aa5..01649e0 100644 --- a/index.html +++ b/index.html @@ -31,7 +31,7 @@

Keyrune

Magic: the Gathering set symbol font

- + Download @@ -49,22 +49,21 @@
-

Keyrune is a complete set of scalable vector icons for Magic set symbols.

-

Drop them into your application, website, or custom cards and control their size, color, drop shadow, or any dimension just as you would with text!

+

Keyrune is a complete set of scalable vector icons for Magic set symbols. Drop them into your application, website, or custom cards (like this ) and control their size, color, drop shadow, or any dimension just as you would with text!

-

Using Keyrune

+

Using Keyrune

Each set symbol has its own font character. Display them in a manner similar to Font Awesome using the <i class="ss ss-exp"></i> element. Class name codes are based on the expansion codes from MTG JSON.

To use Keyrune, move the font files to your /fonts directory and include the keyrune.css stylesheet in your <head>:

<link href="css/keyrune.css" rel="stylesheet" type="text/css" />
-

Editing the Source

+

Editing the Source

Feel free to edit the source files and compile Keyrune to fit your needs. All SVG glyphs are compiled into font files using the wonderful IcoMoon app. For styling, currently LESS is supported with Sass coming soon.

-

License

+

License

All set symbol images are copyright Wizards of the Coast (http://magicthegathering.com)

The Keyrune font is licensed under the the SIL OFL 1.1 (http://scripts.sil.org/OFL)

Keyrune CSS, LESS, and Sass files are licensed under the MIT License (http://opensource.org/licenses/mit-license.html)