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

Added a Cheatsheet for copying symbols to desktop software

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

28
css/main.css
View File

@ -246,6 +246,34 @@ blockquote {
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 {
font-size: 16px;
padding: 15px 0 0;

8
icons.html
View File

@ -41,7 +41,13 @@
<main>
<div class="wrapper">
<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 class="content">
<h4>Core Sets</h4>