andrew/keyrune
andrew/keyrune
1
0
Fork 0
mirror of https://github.com/andrewgioia/keyrune.git synced 2024-12-22 23:49:56 +00:00
Code Issues Projects Releases Wiki Activity

Adding icon list page and some general style cleanup

Browse Source
This commit is contained in:
Andrew Gioia 2015-03-15 13:17:13 -04:00
parent cdfaf02057
commit 33106c3fe2
3 changed files with 184 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
css/main.css
View File

@ -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;
}

112
icons.html Normal file
View File

@ -0,0 +1,112 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Set Symbol Icons | Keyrune</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="logo"><i class="ss ss-leg"></i> Keyrune</a>
<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">
<h1 class="sub">Set Symbol Icons</h1>
<a class="dl button float-right" href="https://github.com/andrewgioia/Keyrune/archive/master.zip">
<i class="ss ss-pmtg2"></i>
Download
</a>
<h2 class="sub">Complete 147 Magic set symbol font icons</h2>
</div>
</header>
<main>
<div class="wrapper">
<section>
<h3>View the full list of 147 set and expansion symbols below, for all sets and special edition products up to <strong>Fate Reforged</strong>. Some small run sets are missing, if you want one please <a href="https://github.com/andrewgioia/Keyrune/issues/new">request it</a>!</h3>
</section>
<section class="content">
<h4>Core Sets</h4>
<div class="icons">
<div class="icon" id="lea" name="Alpha">
<span><i class="ss ss-lea"></i> Alpha <em>(lea)</em></span>
</div>
<div class="icon" id="leb" name="Beta">
<span><i class="ss ss-leb"></i> Beta <em>(leb)</em></span>
</div>
<div class="icon" id="2ed" name="Unlimited">
<span><i class="ss ss-2ed"></i> Unlimited <em>(2ed)</em></span>
</div>
<div class="icon" id="3ed" name="Revised">
<span><i class="ss ss-3ed"></i> Revised <em>(3ed)</em></span>
</div>
<div class="icon" id="4ed" name="Fourth Edition">
<span><i class="ss ss-4ed"></i> Fourth Edition <em>(4ed)</em></span>
</div>
<div class="icon" id="psum" name="Summer Magic">
<span><i class="ss ss-psum"></i> Summer Magic <em>(psum)</em></span>
</div>
<div class="icon" id="5ed" name="Fifth Edition">
<span><i class="ss ss-5ed"></i> Fifth Edition <em>(5ed)</em></span>
</div>
<div class="icon" id="6ed" name="Sixth Edition">
<span><i class="ss ss-6ed"></i> Sixth Edition <em>(6ed)</em></span>
</div>
<div class="icon" id="7ed" name="Seventh Edition">
<span><i class="ss ss-7ed"></i> Seventh Edition <em>(7ed)</em></span>
</div>
<div class="icon" id="8ed" name="Eigth Edition">
<span><i class="ss ss-8ed"></i> Eigth Edition <em>(8ed)</em></span>
</div>
<div class="icon" id="9ed" name="Ninth Edition">
<span><i class="ss ss-9ed"></i> Ninth Edition <em>(9ed)</em></span>
</div>
<div class="icon" id="10e" name="Tenth Edition">
<span><i class="ss ss-10e"></i> Tenth Edition <em>(10e)</em></span>
</div>
<div class="icon" id="m10" name="Magic 2010">
<span><i class="ss ss-m10"></i> Magic 2010 <em>(m10)</em></span>
</div>
<div class="icon" id="m11" name="Magic 2011">
<span><i class="ss ss-m11"></i> Magic 2011 <em>(m11)</em></span>
</div>
<div class="icon" id="m12" name="Magic 2012">
<span><i class="ss ss-m12"></i> Magic 2012 <em>(m12)</em></span>
</div>
<div class="icon" id="m13" name="Magic 2013">
<span><i class="ss ss-m13"></i> Magic 2013 <em>(m13)</em></span>
</div>
<div class="icon" id="m14" name="Magic 2014">
<span><i class="ss ss-m14"></i> Magic 2014 <em>(m14)</em></span>
</div>
<div class="icon" id="m15" name="Magic 2015">
<span><i class="ss ss-m15"></i> Magic 2015 <em>(m15)</em></span>
</div>
</div>
</section>
</div>
</main>
<footer>
<div class="wrapper">
Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
</div>
</footer>
</body>
</html>

11
index.html
View File

@ -31,7 +31,7 @@
<h1>Keyrune</h1>
<h2>Magic: the Gathering set symbol font</h2>
<div class="actions">
<a class="dl button" href="http://github.com/andrewgioia/Keyrune">
<a class="dl button" href="https://github.com/andrewgioia/Keyrune/archive/master.zip">
<i class="ss ss-pmtg2"></i>
Download
</a>
@ -49,22 +49,21 @@
<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>
<h3><strong>Keyrune is a complete set of scalable vector icons for Magic set symbols.</strong> Drop them into your application, website, or custom cards (like this <i class="ss ss-tmp"></i>) and control their size, color, drop shadow, or any dimension just as you would with text!</h3>
</section>
<section class="content">
<h2>Using Keyrune</h2>
<h4>Using Keyrune</h4>
<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>&lt;i class="ss ss-exp"&gt;&lt;/i&gt;</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>&lt;head&gt;</code>:</p>
<blockquote>
&lt;link href="css/keyrune.css" rel="stylesheet" type="text/css" /&gt;</blockquote>
</section>
<section class="content">
<h2>Editing the Source</h2>
<h4>Editing the Source</h4>
<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>
<h4>License</h4>
<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>