From cdfaf020575868d71faed76c0d809a455968a1b7 Mon Sep 17 00:00:00 2001 From: Andrew Gioia Date: Sun, 15 Mar 2015 11:46:03 -0400 Subject: [PATCH] Updates to the main project page --- css/main.css | 36 ++++++++++++++++++++++++++++-------- index.html | 17 +++++++++++++++-- 2 files changed, 43 insertions(+), 10 deletions(-) diff --git a/css/main.css b/css/main.css index b9de75a..4ccc8d7 100644 --- a/css/main.css +++ b/css/main.css @@ -51,7 +51,7 @@ header { border-bottom: 1px solid #CFCDC7; color: #333; margin: 0; - padding: 20px 0 15px; + padding: 25px 0 15px; } .bigicon { @@ -66,7 +66,8 @@ header { } p { - line-height: 1.5em; + font-size: 16px; + line-height: 1.6em; margin: 20px 0; } @@ -76,7 +77,7 @@ h1 { font-family: Beleren; font-size: 64px; font-weight: lighter; - padding: 0 0 15px; + padding: 0 0 20px; text-shadow: 0 2px 0 #fff; } @@ -91,10 +92,12 @@ h2 { } h3 { - color: #333; - font-size: 20px; - font-weight: normal; - margin: 15px 0 10px; + color: #61605B; + font-family: Beleren; + font-size: 24px; + font-weight: lighter; + margin: 15px 0 5px; + text-align: left; } h4 { @@ -102,6 +105,7 @@ h4 { font-size: 18px; font-weight: normal; line-height: 1.6em; + text-align: left; } main { @@ -109,12 +113,28 @@ main { padding: 20px 0 25px; } + main section.content { + padding: 10px 0 10px; + } + main h2 { font-size: 24px; - margin: 30px 0 0; padding: 0 0 5px; } +blockquote, +code { + font-family: Inconsolate, 'Courier New', Courier, monospace; +} + +blockquote { + background: #EFEDE8; + border-bottom: 1px solid #E0DCCD; + padding: 20px; + margin: 20px 0; + border-radius: 4px; +} + .button { background: #008eae; border-bottom: 2px solid #166075; diff --git a/index.html b/index.html index 767f1c6..1911aa5 100644 --- a/index.html +++ b/index.html @@ -50,12 +50,25 @@

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 any text!

+

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!

-
+

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

+

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

+

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)

+

Attribution is greatly appreciated but not required!