mirror of
https://github.com/andrewgioia/keyrune.git
synced 2024-12-22 23:49:56 +00:00
84 lines
3.9 KiB
HTML
84 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
|
|
<title>Keyrune | Andrew Gioia</title>
|
|
<link rel="stylesheet" href="bower_components/keyrune/css/keyrune.css" />
|
|
<link rel="stylesheet" href="css/main.css" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
|
</head>
|
|
<body>
|
|
|
|
<section id="banner">
|
|
<div class="wrapper">
|
|
<a href="index.html" class="item">Home</a>
|
|
<a href="icons.html" class="item">Set Icons</a>
|
|
<a href="examples.html" class="item">Examples</a>
|
|
<a href="http://github.com/andrewgioia/Keyrune" class="item">GitHub Project</a>
|
|
<span class="item">
|
|
Created by
|
|
<a href="http://andrewgioia.com">Andrew Gioia</a>
|
|
</span>
|
|
</div>
|
|
</section>
|
|
|
|
<header>
|
|
<div class="wrapper">
|
|
<div class="bigicon">
|
|
<i class="ss ss-leg"></i>
|
|
</div>
|
|
<h1>Keyrune</h1>
|
|
<h2>Magic: the Gathering set symbol font</h2>
|
|
<div class="actions">
|
|
<a class="dl button" href="http://github.com/andrewgioia/Keyrune">
|
|
<i class="ss ss-pmtg2"></i>
|
|
Download
|
|
</a>
|
|
<a class="vs button" href="icons.html">
|
|
<i class="ss ss-mmq"></i>
|
|
View Set Icons
|
|
</a>
|
|
</div>
|
|
<p>
|
|
Current version 0.1 includes all sets to Fate Reforged.
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="wrapper">
|
|
<section>
|
|
<h3>Keyrune is a complete set of <strong>scalable vector icons</strong> for Magic set symbols.</h3>
|
|
<h4>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!</h4>
|
|
</section>
|
|
<section class="content">
|
|
<h2>Using Keyrune</h2>
|
|
<p>Each set symbol has its own font character. Display them in a manner similar to <a href="http://fontawesome.io">Font Awesome</a> using the <code><i class="ss ss-exp"></i></code> element. Class name codes are based on the expansion codes from <a href="http://mtgjson.com">MTG JSON</a>.</p>
|
|
<p>To use Keyrune, move the font files to your /fonts directory and include the <code>keyrune.css</code> stylesheet in your <code><head></code>:</p>
|
|
<blockquote>
|
|
<link href="css/keyrune.css" rel="stylesheet" type="text/css" /></blockquote>
|
|
</section>
|
|
<section class="content">
|
|
<h2>Editing the Source</h2>
|
|
<p>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 <a href="http://icomoon.io">IcoMoon</a> app. For styling, currently LESS is supported with Sass coming soon.</p>
|
|
</section>
|
|
<section class="content">
|
|
<h2>License</h2>
|
|
<p>All set symbol images are copyright Wizards of the Coast (<a href="http://magicthegathering.com">http://magicthegathering.com</a>)</p>
|
|
<p>The Keyrune font is licensed under the the SIL OFL 1.1 (<a href="http://scripts.sil.org/OFL">http://scripts.sil.org/OFL</a>)</p>
|
|
<p>Keyrune CSS, LESS, and Sass files are licensed under the MIT License (<a href="http://opensource.org/licenses/mit-license.html">http://opensource.org/licenses/mit-license.html</a>)</p>
|
|
<p>Attribution is <strong>greatly appreciated</strong> but not required!</p>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="wrapper">
|
|
Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|