Added a Cheatsheet for copying symbols to desktop software

This commit is contained in:
Andrew Gioia 2015-04-13 11:28:26 -04:00
parent ea181da866
commit f4592eb1e4
3 changed files with 267 additions and 1 deletions

232
cheatsheet.html Normal file
View File

@ -0,0 +1,232 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Cheatsheet | 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">
<iframe src="https://ghbtns.com/github-btn.html?user=andrewgioia&repo=keyrune&type=star&count=true" frameborder="0" scrolling="0" width="75px" height="20px" style="margin-bottom: -4px;"></iframe>
</span>
<span class="item">
Created by
<a href="http://andrewgioia.com">Andrew Gioia</a>
</span>
</div>
</section>
<header>
<div class="wrapper">
<h1 class="sub">Cheatsheet</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">The complete Keyrune copy-able reference</h2>
</div>
</header>
<main>
<div class="wrapper">
<section>
<h3>
To use Keyrune on the desktop, install keyrune.otf, set it
as the font in your application, then copy and paste the
icons (not the unicode) directly from this page into
your designs. The UTF8 representation is provided as
a reference as well.
</h3>
</section>
<section class="content">
<h4>Icons, CSS Class, and Unicode</h4>
<div class="vectors">
<span class="utf"><i>&#xe60b;</i> ss-10e <code>&amp;#xe60b;</code></span>
<span class="utf"><i>&#xe602;</i> ss-2ed <code>&amp;#xe602;</code></span>
<span class="utf"><i>&#xe603;</i> ss-3ed <code>&amp;#xe603;</code></span>
<span class="utf"><i>&#xe604;</i> ss-4ed <code>&amp;#xe604;</code></span>
<span class="utf"><i>&#xe606;</i> ss-5ed <code>&amp;#xe606;</code></span>
<span class="utf"><i>&#xe607;</i> ss-6ed <code>&amp;#xe607;</code></span>
<span class="utf"><i>&#xe608;</i> ss-7ed <code>&amp;#xe608;</code></span>
<span class="utf"><i>&#xe609;</i> ss-8ed <code>&amp;#xe609;</code></span>
<span class="utf"><i>&#xe60a;</i> ss-9ed <code>&amp;#xe60a;</code></span>
<span class="utf"><i>&#xe641;</i> ss-ala <code>&amp;#xe641;</code></span>
<span class="utf"><i>&#xe61a;</i> ss-all <code>&amp;#xe61a;</code></span>
<span class="utf"><i>&#xe62a;</i> ss-apc <code>&amp;#xe62a;</code></span>
<span class="utf"><i>&#xe643;</i> ss-arb <code>&amp;#xe643;</code></span>
<span class="utf"><i>&#xe657;</i> ss-arc <code>&amp;#xe657;</code></span>
<span class="utf"><i>&#xe613;</i> ss-arn <code>&amp;#xe613;</code></span>
<span class="utf"><i>&#xe65f;</i> ss-ath <code>&amp;#xe65f;</code></span>
<span class="utf"><i>&#xe614;</i> ss-atq <code>&amp;#xe614;</code></span>
<span class="utf"><i>&#xe64c;</i> ss-avr <code>&amp;#xe64c;</code></span>
<!--<span class="utf"><i>&#xe6xx;</i> ss-b4z <code>&amp;#xe6xx;</code></span>-->
<span class="utf"><i>&#xe651;</i> ss-bng <code>&amp;#xe651;</code></span>
<span class="utf"><i>&#xe635;</i> ss-bok <code>&amp;#xe635;</code></span>
<span class="utf"><i>&#xe660;</i> ss-brb <code>&amp;#xe660;</code></span>
<span class="utf"><i>&#xe661;</i> ss-btb <code>&amp;#xe661;</code></span>
<span class="utf"><i>&#xe65b;</i> ss-c13 <code>&amp;#xe65b;</code></span>
<span class="utf"><i>&#xe65d;</i> ss-c14 <code>&amp;#xe63d;</code></span>
<span class="utf"><i>&#xe634;</i> ss-chk <code>&amp;#xe634;</code></span>
<span class="utf"><i>&#xe65e;</i> ss-chr <code>&amp;#xe65e;</code></span>
<span class="utf"><i>&#xe65a;</i> ss-cm1 <code>&amp;#xe65a;</code></span>
<span class="utf"><i>&#xe658;</i> ss-cmd <code>&amp;#xe658;</code></span>
<span class="utf"><i>&#xe65c;</i> ss-cns <code>&amp;#xe65c;</code></span>
<span class="utf"><i>&#xe642;</i> ss-con <code>&amp;#xe642;</code></span>
<span class="utf"><i>&#xe61b;</i> ss-csp <code>&amp;#xe61b;</code></span>
<span class="utf"><i>&#xe66a;</i> ss-dd2 <code>&amp;#xe66a;</code></span>
<span class="utf"><i>&#xe66b;</i> ss-ddc <code>&amp;#xe66b;</code></span>
<span class="utf"><i>&#xe66c;</i> ss-ddd <code>&amp;#xe66c;</code></span>
<span class="utf"><i>&#xe66d;</i> ss-dde <code>&amp;#xe66d;</code></span>
<span class="utf"><i>&#xe66e;</i> ss-ddf <code>&amp;#xe66e;</code></span>
<span class="utf"><i>&#xe67f;</i> ss-ddg <code>&amp;#xe66f;</code></span>
<span class="utf"><i>&#xe670;</i> ss-ddh <code>&amp;#xe670;</code></span>
<span class="utf"><i>&#xe671;</i> ss-ddi <code>&amp;#xe671;</code></span>
<span class="utf"><i>&#xe672;</i> ss-ddj <code>&amp;#xe672;</code></span>
<span class="utf"><i>&#xe673;</i> ss-ddk <code>&amp;#xe673;</code></span>
<span class="utf"><i>&#xe674;</i> ss-ddl <code>&amp;#xe674;</code></span>
<span class="utf"><i>&#xe675;</i> ss-ddm <code>&amp;#xe675;</code></span>
<span class="utf"><i>&#xe676;</i> ss-ddn <code>&amp;#xe676;</code></span>
<span class="utf"><i>&#xe677;</i> ss-ddo <code>&amp;#xe677;</code></span>
<span class="utf"><i>&#xe64f;</i> ss-dgm <code>&amp;#xe64f;</code></span>
<span class="utf"><i>&#xe639;</i> ss-dis <code>&amp;#xe639;</code></span>
<span class="utf"><i>&#xe64b;</i> ss-dka <code>&amp;#xe64b;</code></span>
<span class="utf"><i>&#xe662;</i> ss-dkm <code>&amp;#xe662;</code></span>
<span class="utf"><i>&#xe689;</i> ss-dpa <code>&amp;#xe689;</code></span>
<span class="utf"><i>&#xe678;</i> ss-drb <code>&amp;#xe678;</code></span>
<span class="utf"><i>&#xe616;</i> ss-drk <code>&amp;#xe616;</code></span>
<span class="utf"><i>&#xe632;</i> ss-dst <code>&amp;#xe632;</code></span>
<span class="utf"><i>&#xe693;</i> ss-dtk <code>&amp;#xe693;</code></span>
<span class="utf"><i>&#xe640;</i> ss-eve <code>&amp;#xe640;</code></span>
<span class="utf"><i>&#xe669;</i> ss-evg <code>&amp;#xe669;</code></span>
<span class="utf"><i>&#xe621;</i> ss-exo <code>&amp;#xe621;</code></span>
<span class="utf"><i>&#xe617;</i> ss-fem <code>&amp;#xe617;</code></span>
<span class="utf"><i>&#xe654;</i> ss-frf <code>&amp;#xe654;</code></span>
<span class="utf"><i>&#xe63c;</i> ss-fut <code>&amp;#xe63c;</code></span>
<span class="utf"><i>&#xe638;</i> ss-gpt <code>&amp;#xe638;</code></span>
<span class="utf"><i>&#xe64e;</i> ss-gtc <code>&amp;#xe64e;</code></span>
<span class="utf"><i>&#xe67f;</i> ss-h09 <code>&amp;#xe67f;</code></span>
<span class="utf"><i>&#xe618;</i> ss-hml <code>&amp;#xe618;</code></span>
<span class="utf"><i>&#xe656;</i> ss-hop <code>&amp;#xe656;</code></span>
<span class="utf"><i>&#xe619;</i> ss-ice <code>&amp;#xe619;</code></span>
<span class="utf"><i>&#xe628;</i> ss-inv <code>&amp;#xe628;</code></span>
<span class="utf"><i>&#xe64a;</i> ss-isd <code>&amp;#xe64a;</code></span>
<span class="utf"><i>&#xe652;</i> ss-jou <code>&amp;#xe652;</code></span>
<span class="utf"><i>&#xe62d;</i> ss-jud <code>&amp;#xe62d;</code></span>
<span class="utf"><i>&#xe653;</i> ss-ktk <code>&amp;#xe653;</code></span>
<span class="utf"><i>&#xe600;</i> ss-lea <code>&amp;#xe600;</code></span>
<span class="utf"><i>&#xe601;</i> ss-leb <code>&amp;#xe601;</code></span>
<span class="utf"><i>&#xe615;</i> ss-leg <code>&amp;#xe615;</code></span>
<span class="utf"><i>&#xe62f;</i> ss-lgn <code>&amp;#xe62f;</code></span>
<span class="utf"><i>&#xe63d;</i> ss-lrw <code>&amp;#xe63d;</code></span>
<span class="utf"><i>&#xe60c;</i> ss-m10 <code>&amp;#xe60c;</code></span>
<span class="utf"><i>&#xe60d;</i> ss-m11 <code>&amp;#xe60d;</code></span>
<span class="utf"><i>&#xe60e;</i> ss-m12 <code>&amp;#xe60e;</code></span>
<span class="utf"><i>&#xe60f;</i> ss-m13 <code>&amp;#xe60f;</code></span>
<span class="utf"><i>&#xe610;</i> ss-m14 <code>&amp;#xe610;</code></span>
<span class="utf"><i>&#xe611;</i> ss-m15 <code>&amp;#xe611;</code></span>
<span class="utf"><i>&#xe648;</i> ss-mbs <code>&amp;#xe648;</code></span>
<span class="utf"><i>&#xe682;</i> ss-md1 <code>&amp;#xe682;</code></span>
<span class="utf"><i>&#xe68e;</i> ss-me2 <code>&amp;#xe68e;</code></span>
<span class="utf"><i>&#xe68f;</i> ss-me3 <code>&amp;#xe68f;</code></span>
<span class="utf"><i>&#xe690;</i> ss-me4 <code>&amp;#xe690;</code></span>
<span class="utf"><i>&#xe68d;</i> ss-med <code>&amp;#xe68d;</code></span>
<span class="utf"><i>&#xe61c;</i> ss-mir <code>&amp;#xe61c;</code></span>
<span class="utf"><i>&#xe695;</i> ss-mm2 <code>&amp;#xe695;</code></span>
<span class="utf"><i>&#xe663;</i> ss-mma <code>&amp;#xe663;</code></span>
<span class="utf"><i>&#xe625;</i> ss-mmq <code>&amp;#xe625;</code></span>
<span class="utf"><i>&#xe63e;</i> ss-mor <code>&amp;#xe63e;</code></span>
<span class="utf"><i>&#xe631;</i> ss-mrd <code>&amp;#xe631;</code></span>
<span class="utf"><i>&#xe626;</i> ss-nms <code>&amp;#xe626;</code></span>
<span class="utf"><i>&#xe649;</i> ss-nph <code>&amp;#xe649;</code></span>
<span class="utf"><i>&#xe62b;</i> ss-ody <code>&amp;#xe62b;</code></span>
<span class="utf"><i>&#xe62e;</i> ss-ons <code>&amp;#xe62e;</code></span>
<span class="utf"><i>&#xe659;</i> ss-pc2 <code>&amp;#xe659;</code></span>
<span class="utf"><i>&#xe627;</i> ss-pcy <code>&amp;#xe627;</code></span>
<span class="utf"><i>&#xe680;</i> ss-pd2 <code>&amp;#xe680;</code></span>
<span class="utf"><i>&#xe681;</i> ss-pd3 <code>&amp;#xe681;</code></span>
<span class="utf"><i>&#xe63b;</i> ss-plc <code>&amp;#xe63b;</code></span>
<span class="utf"><i>&#xe629;</i> ss-pls <code>&amp;#xe629;</code></span>
<span class="utf"><i>&#xe665;</i> ss-po2 <code>&amp;#xe665;</code></span>
<span class="utf"><i>&#xe664;</i> ss-por <code>&amp;#xe664;</code></span>
<span class="utf"><i>&#xe666;</i> ss-ptk <code>&amp;#xe666;</code></span>
<span class="utf"><i>&#xe637;</i> ss-rav <code>&amp;#xe637;</code></span>
<span class="utf"><i>&#xe646;</i> ss-roe <code>&amp;#xe646;</code></span>
<span class="utf"><i>&#xe64d;</i> ss-rtr <code>&amp;#xe64d;</code></span>
<span class="utf"><i>&#xe668;</i> ss-s00 <code>&amp;#xe668;</code></span>
<span class="utf"><i>&#xe667;</i> ss-s99 <code>&amp;#xe667;</code></span>
<span class="utf"><i>&#xe630;</i> ss-scg <code>&amp;#xe630;</code></span>
<span class="utf"><i>&#xe63f;</i> ss-shm <code>&amp;#xe63f;</code></span>
<span class="utf"><i>&#xe636;</i> ss-sok <code>&amp;#xe636;</code></span>
<span class="utf"><i>&#xe647;</i> ss-som <code>&amp;#xe647;</code></span>
<span class="utf"><i>&#xe620;</i> ss-sth <code>&amp;#xe620;</code></span>
<span class="utf"><i>&#xe650;</i> ss-ths <code>&amp;#xe650;</code></span>
<span class="utf"><i>&#xe61f;</i> ss-tmp <code>&amp;#xe61f;</code></span>
<span class="utf"><i>&#xe62c;</i> ss-tor <code>&amp;#xe62c;</code></span>
<span class="utf"><i>&#xe694;</i> ss-tpr <code>&amp;#xe694;</code></span>
<span class="utf"><i>&#xe63a;</i> ss-tsp <code>&amp;#xe63a;</code></span>
<span class="utf"><i>&#xe624;</i> ss-uds <code>&amp;#xe624;</code></span>
<span class="utf"><i>&#xe691;</i> ss-ugl <code>&amp;#xe691;</code></span>
<span class="utf"><i>&#xe623;</i> ss-ulg <code>&amp;#xe623;</code></span>
<span class="utf"><i>&#xe692;</i> ss-unh <code>&amp;#xe692;</code></span>
<span class="utf"><i>&#xe622;</i> ss-usg <code>&amp;#xe622;</code></span>
<span class="utf"><i>&#xe679;</i> ss-v09 <code>&amp;#xe679;</code></span>
<span class="utf"><i>&#xe67a;</i> ss-v10 <code>&amp;#xe67a;</code></span>
<span class="utf"><i>&#xe67b;</i> ss-v11 <code>&amp;#xe67b;</code></span>
<span class="utf"><i>&#xe67c;</i> ss-v12 <code>&amp;#xe67c;</code></span>
<span class="utf"><i>&#xe67d;</i> ss-v13 <code>&amp;#xe67d;</code></span>
<span class="utf"><i>&#xe67e;</i> ss-v14 <code>&amp;#xe67e;</code></span>
<span class="utf"><i>&#xe655;</i> ss-van <code>&amp;#xe655;</code></span>
<span class="utf"><i>&#xe61d;</i> ss-vis <code>&amp;#xe61d;</code></span>
<span class="utf"><i>&#xe696;</i> ss-vma <code>&amp;#xe696;</code></span>
<span class="utf"><i>&#xe61e;</i> ss-wth <code>&amp;#xe61e;</code></span>
<span class="utf"><i>&#xe645;</i> ss-wwk <code>&amp;#xe645;</code></span>
<span class="utf"><i>&#xe644;</i> ss-zen <code>&amp;#xe644;</code></span>
<div class="clear"></div>
</div>
<div class="vectors">
<span class="utf"><i>&#xe612;</i> ss-bcore <code>&amp;#xe612;</code></span>
<span class="utf"><i>&#xe688;</i> ss-parl <code>&amp;#xe688;</code></span>
<span class="utf"><i>&#xe68c;</i> ss-parl2 <code>&amp;#xe68c;</code></span>
<span class="utf"><i>&#xe68b;</i> ss-past <code>&amp;#xe68b;</code></span>
<span class="utf"><i>&#xe68a;</i> ss-pbook <code>&amp;#xe68a;</code></span>
<span class="utf"><i>&#xe683;</i> ss-pgru <code>&amp;#xe683;</code></span>
<span class="utf"><i>&#xe686;</i> ss-pleaf <code>&amp;#xe686;</code></span>
<span class="utf"><i>&#xe687;</i> ss-pmei <code>&amp;#xe687;</code></span>
<span class="utf"><i>&#xe684;</i> ss-pmtg1 <code>&amp;#xe684;</code></span>
<span class="utf"><i>&#xe685;</i> ss-pmtg2 <code>&amp;#xe685;</code></span>
<span class="utf"><i>&#xe605;</i> ss-psum <code>&amp;#xe605;</code></span>
<div class="clear"></div>
</div>
</section>
</div>
</main>
<footer>
<div class="wrapper">
<div class="float-left">
<p>Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a></p>
</div>
<div class="float-right" style="text-align: right;">
<p>
All set images &copy; <a href="http://magicthegathering.com">Wizards of the Coast</a><br />
The Keyrune font is licensed under the the <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a><br />
Keyrune CSS, LESS, and Sass files are licensed under the <a href="http://opensource.org/licenses/mit-license.html">MIT License</a><br />
</p>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>

View File

@ -246,6 +246,34 @@ blockquote {
font-style: normal; font-style: normal;
} }
.vectors {
padding: 10px 0 0;
}
.utf {
display: inline-block;
width: 25%;
float: left;
padding: 6px 0;
}
.utf i {
display: inline-block;
font-family: keyrune;
font-style: normal;
font-size: 1.25em;
vertical-align: top;
padding: 0 5px 0 0;
text-align: center;
width: 1.25em;
}
.utf code {
background-color: #f5f5f5;
color: #555;
margin-left: 3px;
}
.example { .example {
font-size: 16px; font-size: 16px;
padding: 15px 0 0; padding: 15px 0 0;

View File

@ -41,7 +41,13 @@
<main> <main>
<div class="wrapper"> <div class="wrapper">
<section> <section>
<h3>View the full list of 151 set and expansion symbols below, for all sets and special edition products up to <strong>Modern Masters 2015</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> <h3>
View the full list of 151 set and expansion symbols below,
for all sets and special edition products up to
<strong>Modern Masters 2015</strong>. To use the symbols
on your desktop or just get the vectors, check out
the <a href="cheatsheet.html">Cheatsheet</a>.
</h3>
</section> </section>
<section class="content"> <section class="content">
<h4>Core Sets</h4> <h4>Core Sets</h4>