mirror of
https://github.com/andrewgioia/keyrune.git
synced 2024-12-22 23:49:56 +00:00
Adding icon list page and some general style cleanup
This commit is contained in:
Andrew Gioia
parent
cdfaf02057
commit
33106c3fe2
82
css/main.css
82
css/main.css
@ -46,6 +46,14 @@ section#banner {
|
|||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
section#banner .logo {
|
||||||
|
color: #333;
|
||||||
|
float: left;
|
||||||
|
font-family: Beleren;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: #E6E2D7;
|
background: #E6E2D7;
|
||||||
border-bottom: 1px solid #CFCDC7;
|
border-bottom: 1px solid #CFCDC7;
|
||||||
@ -78,9 +86,14 @@ h1 {
|
|||||||
font-size: 64px;
|
font-size: 64px;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
padding: 0 0 20px;
|
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 {
|
h2 {
|
||||||
color: #444;
|
color: #444;
|
||||||
font-family: Beleren;
|
font-family: Beleren;
|
||||||
@ -91,7 +104,21 @@ h2 {
|
|||||||
text-shadow: 0 1px 0 #fff;
|
text-shadow: 0 1px 0 #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2.sub {
|
||||||
|
font-size: 26px;
|
||||||
|
padding: 0 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
|
color: #444;
|
||||||
|
font-size: 19px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.6em;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
color: #61605B;
|
color: #61605B;
|
||||||
font-family: Beleren;
|
font-family: Beleren;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
@ -100,26 +127,13 @@ h3 {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
|
||||||
color: #444;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: 1.6em;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 20px 0 25px;
|
padding: 20px 0 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main section.content {
|
main section.content {
|
||||||
padding: 10px 0 10px;
|
padding: 0 0 10px;
|
||||||
}
|
|
||||||
|
|
||||||
main h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
padding: 0 0 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote,
|
blockquote,
|
||||||
@ -168,8 +182,46 @@ blockquote {
|
|||||||
border-bottom-color: #222;
|
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 {
|
footer {
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #eee;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
padding: 30px 0 50px;
|
padding: 30px 0 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.float-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|||||||
112
icons.html
Normal file
112
icons.html
Normal 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 ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11
index.html
11
index.html
@ -31,7 +31,7 @@
|
|||||||
<h1>Keyrune</h1>
|
<h1>Keyrune</h1>
|
||||||
<h2>Magic: the Gathering set symbol font</h2>
|
<h2>Magic: the Gathering set symbol font</h2>
|
||||||
<div class="actions">
|
<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>
|
<i class="ss ss-pmtg2"></i>
|
||||||
Download
|
Download
|
||||||
</a>
|
</a>
|
||||||
@ -49,22 +49,21 @@
|
|||||||
<main>
|
<main>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<section>
|
<section>
|
||||||
<h3>Keyrune is a complete set of <strong>scalable vector icons</strong> for Magic set symbols.</h3>
|
<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>
|
||||||
<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>
|
||||||
<section class="content">
|
<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><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>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>
|
<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>
|
<blockquote>
|
||||||
<link href="css/keyrune.css" rel="stylesheet" type="text/css" /></blockquote>
|
<link href="css/keyrune.css" rel="stylesheet" type="text/css" /></blockquote>
|
||||||
</section>
|
</section>
|
||||||
<section class="content">
|
<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>
|
<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>
|
||||||
<section class="content">
|
<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>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>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>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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user