andrew/keyrune
andrew
/
keyrune
mirror of https://github.com/andrewgioia/keyrune.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Updates docs to 3.7.1, moves documentation site to directory in master, adds back in the previous placeholder codes for KHM and STX backwards compatibility

This commit is contained in:
Andrew Gioia 2020-12-11 15:53:16 -05:00
parent e9b4e2ef73
commit d0734a08d2
17 changed files with 5898 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/keyrune.css
View File

@ -553,9 +553,11 @@
content: "\e963";
}
/* 2021 Sets */
.ss-xkld:before,
.ss-khm:before {
content: "\e974";
}
.ss-xssm:before,
.ss-stx:before {
content: "\e975";
}

2
css/keyrune.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
docs/assets/beleren.eot Executable file
View File

Binary file not shown.

BIN
docs/assets/beleren.otf Executable file
View File

Binary file not shown.

3634
docs/assets/beleren.svg Executable file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
docs/assets/beleren.ttf Executable file
View File

Binary file not shown.

BIN
docs/assets/beleren.woff Executable file
View File

Binary file not shown.

449
docs/assets/docs.css Normal file
View File

@ -0,0 +1,449 @@
@font-face {
font-family: 'Beleren';
src: url( 'beleren.eot' );
src: url( 'beleren.woff' ) format( 'woff' ),
url( 'beleren.ttf' ) format( 'truetype' ),
url( 'beleren.svg' ) format( 'svg' );
font-weight: normal;
font-style: normal;
}
body {
background: #fff;
color: #223344;
font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 15px;
margin: 0;
padding: 0;
}
.wrapper {
max-width: 1080px;
width: 80%;
margin: 0 auto;
}
a {
color: #008eae;
text-decoration: none;
}
a:hover {
color: #166075;
}
section#banner {
background: #D5D2C8;
color: #445566;
padding: 12px 0;
text-align: right;
text-shadow: 0 1px 0 #E6E2D7;
}
section#banner .item {
display: inline-block;
margin-left: 15px;
}
section#banner .logo {
color: #223344;
float: left;
font-family: Beleren;
font-size: 18px;
margin-top: -2px;
}
header {
background: #E6E2D7;
border-bottom: 1px solid #CFCDC7;
color: #223344;
margin: 0;
overflow-y: hidden;
padding: 25px 0 15px;
}
header.main {
height: 272px;
}
.bigicon {
float: right;
font-size: 450px;
line-height: 200px;
margin-top: -100px;
text-shadow: 0 2px 0 #fff;
}
header .vs {
margin-left: 5px;
}
p {
font-size: 16px;
line-height: 1.6em;
margin: 20px 0;
}
ul {
margin: 0;
}
li {
margin: 0 0 10px;
}
ol li {
line-height: 1.6em;
}
h1 {
color: #445566;
margin: 0;
font-family: Beleren;
font-size: 64px;
font-weight: lighter;
padding: 0 0 20px;
text-shadow: 0 1px 0 #fff;
}
h1.sub {
font-size: 48px;
padding: 0 0 15px;
}
h2 {
color: #445566;
font-family: Beleren;
font-size: 30px;
font-weight: lighter;
margin: 0;
padding: 0 0 30px;
text-shadow: 0 1px 0 #fff;
}
h2.sub {
font-size: 26px;
padding: 0 0 20px;
}
h3 {
color: #445566;
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;
font-weight: lighter;
margin: 15px 0 5px;
text-align: left;
}
h5 {
font-size: 17px;
margin: 15px 0 5px;
}
main {
margin: 0;
padding: 20px 0 25px;
}
main section.content {
padding: 0 0 10px;
}
blockquote,
code {
font-family: Inconsolate, 'Courier New', Courier, monospace;
}
code {
background: #F7EEF1;
color: #BB073B;
padding: 1px 3px;
border-radius: 2px;
}
blockquote {
background: #EFEDE8;
border-bottom: 1px solid #E0DCCD;
line-height: 1.4em;
padding: 20px 20px 18px;
margin: 20px 0 25px;
border-radius: 4px;
}
.button {
background: #008eae;
border-bottom: 2px solid #166075;
color: #fff;
display: inline-block;
font-size: 20px;
padding: 10px 18px 9px;
border-radius: 4px;
text-shadow: 0 1px 0 #223344;
}
.button:hover {
background: #00809F;
border-bottom-color: #155A6E;
color: #fff;
}
.button .ss {
margin-right: 5px;
position: relative;
top: -2px;
}
.button.vs {
background: #667788;
border-bottom-color: #223344;
}
.button.vs:hover {
background: #556677;
border-bottom-color: #112233;
}
.button.dl.float-right {
margin-top: -10px;
}
.icons {
padding: 10px 0 5px;
}
.icon {
border-radius: 3px;
display: inline-block;
overflow: hidden;
width: 24.5%;
cursor: pointer;
}
.icon .name {
display: inline-block;
padding: 9px 10px;
white-space: nowrap;
}
.icon .info {
display: none;
}
.icon:hover {
background: #eee;
position: relative;
margin-top: -4px;
margin-bottom: -5px;
}
.icon .ss {
font-size: 22px;
margin-right: 5px;
margin-top: -2px;
text-align: center;
width: 32px;
}
.icon:hover .ss {
font-size: 32px;
/*text-shadow: 0 1px 0 #fff;*/
}
.icon em {
color: #99aabb;
font-size: 13px;
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: #445566;
margin-left: 3px;
}
.example {
font-size: 16px;
padding: 15px 0 0;
width: 200px;
}
.example .each {
display: block;
padding-bottom: 2px;
}
.explanation {
margin-left: 200px;
}
footer {
border-top: 1px solid #eee;
margin-top: 20px;
padding: 10px 0 30px;
}
/* Utilities */
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear {
clear: both;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.e { color: #63A35C; }
.a { color: #795DA3; }
.v { color: #183691; }
.o { color: #ED8C5A; }
/* Icon modal */
#overlay {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.5);
top: 0;
left: 0;
z-index: 100;
display: none;
}
#modal {
width: 760px;
position: fixed;
padding: 30px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255,255,255,.9);
border-radius: 5px;
box-shadow: 0 5px 35px #445566;
z-index: 200;
display: none;
}
#iconPreview {
float: left;
width: 340px;
}
#iconPreview .ss {
font-size: 300px;
margin: 0 40px 0 0;
width: 300px;
height: 300px;
text-align: center;
vertical-align: top;
float: left;
}
#iconMeta {
float: left;
width: 420px;
}
#iconMeta h3 {
font-size: 24px;
line-height: 1.2em;
margin: 10px 0 20px;
padding: 0 0 5px;
border-bottom: 1px solid #ddd;
}
#iconMeta #setCode {
font-size: 16px;
color: #778899;
}
#metaInfo {
list-style: none;
margin: 0;
padding: 0;
}
#metaInfo li {
padding: 0 0 5px;
color: #223344;
}
#metaInfo strong {
color: #778899;
display: inline-block;
width: 75px;
}
#toggleRarity {
list-style: none;
margin: 25px 0 10px;
padding: 0;
width: 400px;
}
#toggleRarity a {
border: 1px solid #CFCDC7;
display: block;
float: left;
padding: 6px 10px 7px;
margin: 0 0 0 -1px;
}
#toggleRarity a.left {
border-radius: 4px 0 0 4px;
}
#toggleRarity a.right {
border-radius: 0 4px 4px 0;
}
#toggleRarity a.active {
background: #E6E2D7;
color: #445566;
}
#closeModalContainer {
position: absolute;
top: 18px;
right: 20px;
}

2
docs/assets/zepto.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

375
docs/cheatsheet.html Normal file
View File

@ -0,0 +1,375 @@
<!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="../css/keyrune.min.css" />
<link rel="stylesheet" href="assets/docs.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<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="100px" height="20px" style="margin-bottom: -4px;"></iframe>
</span>
<span class="item">
Created by
<a href="https://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>&#xe947;</i> ss-1e <code>&amp;#xe947;</code></span>
<span class="utf"><i>&#xe948;</i> ss-2e <code>&amp;#xe948;</code></span>
<span class="utf"><i>&#xe602;</i> ss-2ed <code>&amp;#xe602;</code></span>
<span class="utf"><i>&#xe949;</i> ss-2u <code>&amp;#xe949;</code></span>
<span class="utf"><i>&#xe96e;</i> ss-2xm <code>&amp;#xe96e;</code></span>
<span class="utf"><i>&#xe94a;</i> ss-3e <code>&amp;#xe94a;</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>&#xe633;</i> ss-5dn <code>&amp;#xe633;</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>&#xe93d;</i> ss-a25 <code>&amp;#xe93d;</code></span>
<span class="utf"><i>&#xe90f;</i> ss-aer <code>&amp;#xe90f;</code></span>
<span class="utf"><i>&#xe914;</i> ss-akh <code>&amp;#xe914;</code></span>
<span class="utf"><i>&#xe970;</i> ss-akr <code>&amp;#xe970;</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>&#xe92d;</i> ss-ann <code>&amp;#xe92d;</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>&#xe942;</i> ss-bbd <code>&amp;#xe942;</code></span>
<span class="utf"><i>&#xe699;</i> ss-bfz <code>&amp;#xe699;</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-btd <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;#xe65d;</code></span>
<span class="utf"><i>&#xe900;</i> ss-c15 <code>&amp;#xe900;</code></span>
<span class="utf"><i>&#xe910;</i> ss-c16 <code>&amp;#xe910;</code></span>
<span class="utf"><i>&#xe934;</i> ss-c17 <code>&amp;#xe934;</code></span>
<span class="utf"><i>&#xe946;</i> ss-c18 <code>&amp;#xe946;</code></span>
<span class="utf"><i>&#xe95f;</i> ss-c19 <code>&amp;#xe95f;</code></span>
<span class="utf"><i>&#xe966;</i> ss-c20 <code>&amp;#xe966;</code></span>
<span class="utf"><i>&#xe968;</i> ss-cc1 <code>&amp;#xe968;</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>&#xe940;</i> ss-cm2 <code>&amp;#xe940;</code></span>
<span class="utf"><i>&#xe916;</i> ss-cma <code>&amp;#xe916;</code></span>
<span class="utf"><i>&#xe969;</i> ss-cmc <code>&amp;#xe969;</code></span>
<span class="utf"><i>&#xe658;</i> ss-cmd <code>&amp;#xe658;</code></span>
<span class="utf"><i>&#xe969;</i> ss-cmr <code>&amp;#xe969;</code></span>
<span class="utf"><i>&#xe65c;</i> ss-cns <code>&amp;#xe65c;</code></span>
<span class="utf"><i>&#xe904;</i> ss-cn2 <code>&amp;#xe904;</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>&#xe66f;</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>&#xe698;</i> ss-ddp <code>&amp;#xe698;</code></span>
<span class="utf"><i>&#xe908;</i> ss-ddq <code>&amp;#xe908;</code></span>
<span class="utf"><i>&#xe90d;</i> ss-ddr <code>&amp;#xe90d;</code></span>
<span class="utf"><i>&#xe921;</i> ss-dds <code>&amp;#xe921;</code></span>
<span class="utf"><i>&#xe933;</i> ss-ddt <code>&amp;#xe933;</code></span>
<span class="utf"><i>&#xe93e;</i> ss-ddu <code>&amp;#xe93e;</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>&#xe93f;</i> ss-dom <code>&amp;#xe93f;</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>&#xe92d;</i> ss-e01 <code>&amp;#xe92d;</code></span>
<span class="utf"><i>&#xe931;</i> ss-e02 <code>&amp;#xe931;</code></span>
<span class="utf"><i>&#xe95e;</i> ss-eld <code>&amp;#xe95e;</code></span>
<span class="utf"><i>&#xe903;</i> ss-ema <code>&amp;#xe903;</code></span>
<span class="utf"><i>&#xe90b;</i> ss-emn <code>&amp;#xe90b;</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>&#xe69a;</i> ss-exp <code>&amp;#xe69a;</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>&#xe94b;</i> ss-gk1 <code>&amp;#xe94b;</code></span>
<span class="utf"><i>&#xe959;</i> ss-gk2 <code>&amp;#xe959;</code></span>
<span class="utf"><i>&#xe964;</i> ss-gn2 <code>&amp;#xe964;</code></span>
<span class="utf"><i>&#xe94d;</i> ss-gnt <code>&amp;#xe94d;</code></span>
<span class="utf"><i>&#xe638;</i> ss-gpt <code>&amp;#xe638;</code></span>
<span class="utf"><i>&#xe94b;</i> ss-grn <code>&amp;#xe94b;</code></span>
<span class="utf"><i>&#xe945;</i> ss-gs1 <code>&amp;#xe945;</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>&#xe938;</i> ss-h17 <code>&amp;#xe938;</code></span>
<span class="utf"><i>&#xe96b;</i> ss-ha1 <code>&amp;#xe96b;</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>&#xe924;</i> ss-hou <code>&amp;#xe924;</code></span>
<span class="utf"><i>&#xe619;</i> ss-ice <code>&amp;#xe619;</code></span>
<span class="utf"><i>&#xe925;</i> ss-ice2 <code>&amp;#xe925;</code></span>
<span class="utf"><i>&#xe962;</i> ss-iko <code>&amp;#xe962;</code></span>
<span class="utf"><i>&#xe935;</i> ss-ima <code>&amp;#xe935;</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>&#xe96a;</i> ss-j20 <code>&amp;#xe96a;</code></span>
<span class="utf"><i>&#xe96f;</i> ss-jmp <code>&amp;#xe96f;</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>&#xe974;</i> ss-khm <code>&amp;#xe974;</code></span>
<span class="utf"><i>&#xe90e;</i> ss-kld <code>&amp;#xe90e;</code></span>
<span class="utf"><i>&#xe97c;</i> ss-klr <code>&amp;#xe97c;</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>&#xe941;</i> ss-m19 <code>&amp;#xe941;</code></span>
<span class="utf"><i>&#xe95d;</i> ss-m20 <code>&amp;#xe95d;</code></span>
<span class="utf"><i>&#xe960;</i> ss-m21 <code>&amp;#xe960;</code></span>
<span class="utf"><i>&#xe971;</i> ss-mb1 <code>&amp;#xe971;</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>&#xe68d;</i> ss-me1 <code>&amp;#xe68d;</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>&#xe94c;</i> ss-med <code>&amp;#xe94c;</code></span>
<span class="utf"><i>&#xe95b;</i> ss-mh1 <code>&amp;#xe95b;</code></span>
<span class="utf"><i>&#xe97b;</i> ss-mh2 <code>&amp;#xe97b;</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>&#xe912;</i> ss-mm3 <code>&amp;#xe912;</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>&#xe913;</i> ss-mp1 <code>&amp;#xe913;</code></span>
<span class="utf"><i>&#xe922;</i> ss-mp2 <code>&amp;#xe922;</code></span>
<span class="utf"><i>&#xe913;</i> ss-mps <code>&amp;#xe913;</code></span>
<span class="utf"><i>&#xe631;</i> ss-mrd <code>&amp;#xe631;</code></span>
<span class="utf"><i>&#xe626;</i> ss-nem <code>&amp;#xe626;</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>&#xe901;</i> ss-ogw <code>&amp;#xe901;</code></span>
<span class="utf"><i>&#xe62e;</i> ss-ons <code>&amp;#xe62e;</code></span>
<span class="utf"><i>&#xe697;</i> ss-ori <code>&amp;#xe697;</code></span>
<span class="utf"><i>&#xe665;</i> ss-p02 <code>&amp;#xe665;</code></span>
<span class="utf"><i>&#xe659;</i> ss-pc2 <code>&amp;#xe659;</code></span>
<span class="utf"><i>&#xe911;</i> ss-pca <code>&amp;#xe911;</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>&#xe965;</i> ss-ptg <code>&amp;#xe965;</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>&#xe92f;</i> ss-rix <code>&amp;#xe92f;</code></span>
<span class="utf"><i>&#xe917;</i> ss-xren <code>&amp;#xe917;</code></span>
<span class="utf"><i>&#xe918;</i> ss-xrin <code>&amp;#xe918;</code></span>
<span class="utf"><i>&#xe959;</i> ss-rna <code>&amp;#xe959;</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>&#xe687;</i> ss-sld <code>&amp;#xe687;</code></span>
<span class="utf"><i>&#xe687;</i> ss-slu <code>&amp;#xe687;</code></span>
<span class="utf"><i>&#xe902;</i> ss-soi <code>&amp;#xe902;</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>&#xe944;</i> ss-ss1 <code>&amp;#xe944;</code></span>
<span class="utf"><i>&#xe95c;</i> ss-ss2 <code>&amp;#xe95c;</code></span>
<span class="utf"><i>&#xe96d;</i> ss-ss3 <code>&amp;#xe96d;</code></span>
<span class="utf"><i>&#xe620;</i> ss-sth <code>&amp;#xe620;</code></span>
<span class="utf"><i>&#xe975;</i> ss-stx <code>&amp;#xe975;</code></span>
<span class="utf"><i>&#xe91c;</i> ss-td2 <code>&amp;#xe91c;</code></span>
<span class="utf"><i>&#xe961;</i> ss-thb <code>&amp;#xe961;</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>&#xe976;</i> ss-tsr <code>&amp;#xe976;</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>&#xe958;</i> ss-uma <code>&amp;#xe958;</code></span>
<span class="utf"><i>&#xe96c;</i> ss-und <code>&amp;#xe96c;</code></span>
<span class="utf"><i>&#xe692;</i> ss-unh <code>&amp;#xe692;</code></span>
<span class="utf"><i>&#xe930;</i> ss-ust <code>&amp;#xe930;</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>&#xe920;</i> ss-v0x <code>&amp;#xe920;</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>&#xe905;</i> ss-v15 <code>&amp;#xe905;</code></span>
<span class="utf"><i>&#xe906;</i> ss-v16 <code>&amp;#xe906;</code></span>
<span class="utf"><i>&#xe939;</i> ss-v17 <code>&amp;#xe939;</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>&#xe907;</i> ss-w16 <code>&amp;#xe907;</code></span>
<span class="utf"><i>&#xe923;</i> ss-w17 <code>&amp;#xe923;</code></span>
<span class="utf"><i>&#xe95a;</i> ss-war <code>&amp;#xe95a;</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>&#xe972;</i> ss-xdnd <code>&amp;#xe972;</code></span>
<span class="utf"><i>&#xe977;</i> ss-xin3 <code>&amp;#xe977;</code></span>
<span class="utf"><i>&#xe978;</i> ss-xin4 <code>&amp;#xe978;</code></span>
<span class="utf"><i>&#xe92e;</i> ss-xln <code>&amp;#xe92e;</code></span>
<span class="utf"><i>&#xe644;</i> ss-zen <code>&amp;#xe644;</code></span>
<span class="utf"><i>&#xe967;</i> ss-znc <code>&amp;#xe967;</code></span>
<span class="utf"><i>&#xe963;</i> ss-znr <code>&amp;#xe963;</code></span>
<div class="clear"></div>
</div>
<div class="vectors">
<span class="utf"><i>&#xe94e;</i> ss-azorius <code>&amp;#xe94e;</code></span>
<span class="utf"><i>&#xe94f;</i> ss-boros <code>&amp;#xe94f;</code></span>
<span class="utf"><i>&#xe950;</i> ss-dimir <code>&amp;#xe950;</code></span>
<span class="utf"><i>&#xe951;</i> ss-golgari <code>&amp;#xe951;</code></span>
<span class="utf"><i>&#xe952;</i> ss-gruul <code>&amp;#xe952;</code></span>
<span class="utf"><i>&#xe953;</i> ss-izzet <code>&amp;#xe953;</code></span>
<span class="utf"><i>&#xe954;</i> ss-orzhov <code>&amp;#xe954;</code></span>
<span class="utf"><i>&#xe955;</i> ss-rakdos <code>&amp;#xe955;</code></span>
<span class="utf"><i>&#xe956;</i> ss-selesnya <code>&amp;#xe956;</code></span>
<span class="utf"><i>&#xe957;</i> ss-simic <code>&amp;#xe957;</code></span>
<div class="clear"></div>
</div>
<div class="vectors overflow-hidden">
<span class="utf"><i>&#xe612;</i> ss-bcore <code>&amp;#xe612;</code></span>
<span class="utf"><i>&#xe687;</i> ss-htr <code>&amp;#xe687;</code></span>
<span class="utf"><i>&#xe687;</i> ss-htr17 <code>&amp;#xe687;</code></span>
<span class="utf"><i>&#xe92a;</i> ss-papac <code>&amp;#xe92a;</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>&#xe943;</i> ss-parl3 <code>&amp;#xe943;</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>&#xe93a;</i> ss-pdep <code>&amp;#xe93a;</code></span>
<span class="utf"><i>&#xe932;</i> ss-pdrc <code>&amp;#xe932;</code></span>
<span class="utf"><i>&#xe92b;</i> ss-peuro <code>&amp;#xe92b;</code></span>
<span class="utf"><i>&#xe937;</i> ss-pfnm <code>&amp;#xe937;</code></span>
<span class="utf"><i>&#xe683;</i> ss-pgru <code>&amp;#xe683;</code></span>
<span class="utf"><i>&#xe936;</i> ss-pheart <code>&amp;#xe936;</code></span>
<span class="utf"><i>&#xe92c;</i> ss-pidw <code>&amp;#xe92c;</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>&#xe91b;</i> ss-pmodo <code>&amp;#xe91b;</code></span>
<span class="utf"><i>&#xe919;</i> ss-pmps <code>&amp;#xe919;</code></span>
<span class="utf"><i>&#xe91a;</i> ss-pmpu <code>&amp;#xe91a;</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>&#xe909;</i> ss-psalvat05 <code>&amp;#xe909;</code></span>
<span class="utf"><i>&#xe90a;</i> ss-psalvat11 <code>&amp;#xe90a;</code></span>
<span class="utf"><i>&#xe93b;</i> ss-psega <code>&amp;#xe93b;</code></span>
<span class="utf"><i>&#xe687;</i> ss-psld <code>&amp;#xe687;</code></span>
<span class="utf"><i>&#xe605;</i> ss-psum <code>&amp;#xe605;</code></span>
<span class="utf"><i>&#xe93c;</i> ss-ptsa <code>&amp;#xe93c;</code></span>
<span class="utf"><i>&#xe915;</i> ss-pxbox <code>&amp;#xe915;</code></span>
<span class="utf"><i>&#xe90c;</i> ss-pz1 <code>&amp;#xe90c;</code></span>
<span class="utf"><i>&#xe91f;</i> ss-pz2 <code>&amp;#xe91f;</code></span>
<span class="utf"><i>&#xe928;</i> ss-x2ps <code>&amp;#xe928;</code></span>
<span class="utf"><i>&#xe929;</i> ss-x4ea <code>&amp;#xe929;</code></span>
<span class="utf"><i>&#xe926;</i> ss-xcle <code>&amp;#xe926;</code></span>
<span class="utf"><i>&#xe91d;</i> ss-xduels <code>&amp;#xe91d;</code></span>
<span class="utf"><i>&#xe927;</i> ss-xice <code>&amp;#xe927;</code></span>
<span class="utf"><i>&#xe91e;</i> ss-xmods <code>&amp;#xe91e;</code></span>
<span class="utf"><i>&#xe97a;</i> ss-zne <code>&amp;#xe97a;</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>

155
docs/examples.html Normal file
View File

@ -0,0 +1,155 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Examples | Keyrune</title>
<link rel="stylesheet" href="../css/keyrune.min.css" />
<link rel="stylesheet" href="assets/main.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<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="100px" 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">Options &amp; Examples</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">Built-in size, position, and rarity options</h2>
</div>
</header>
<main>
<div class="wrapper">
<section>
<h3><strong>Keyrune</strong> has some built in icon options to easily change the <strong>size, position, and rarity color</strong> of the set symbols. Take a look below at examples of each option with the class names to implement them.</h3>
</section>
<section class="content">
<h4>Displaying a Set Icon</h4>
<div class="example float-left">
<i class="ss ss-zen"></i> ss-zen
</div>
<div class="explanation">
<p>You can place Keyrune icons anywhere using the CSS classname prefix <code>ss</code> (for set symbol) and then the set icon's code. Inline elements like <code>&lt;i&gt;</code> and <code>&lt;span&gt;</code> are preferred, but any can be used.</p>
<blockquote>
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-zen
</blockquote>
</div>
<div class="clear"></div>
</section>
<section class="content">
<h4>Icon Sizes</h4>
<div class="example float-left">
<span class="each"><i class="ss ss-sth ss-2x"></i> ss-2x</span>
<span class="each"><i class="ss ss-sth ss-3x"></i> ss-3x</span>
<span class="each"><i class="ss ss-sth ss-4x"></i> ss-4x</span>
<span class="each"><i class="ss ss-sth ss-5x"></i> ss-5x</span>
<span class="each"><i class="ss ss-sth ss-6x"></i> ss-6x</span>
</div>
<div class="explanation">
<p>To conveniently increase the size of a set symbol you can append the classes <code>ss-2x</code>, <code>ss-3x</code>, <code>ss-4x</code>, <code>ss-4x</code>, and <code>ss-6x</code>. These classes increase the size by a factor equal to class name number.</p>
<blockquote>
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-2x"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-2x<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-3x"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-3x<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-4x"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-4x<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-5x"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-5x<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-6x"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-6x
</blockquote>
</div>
<div class="clear"></div>
</section>
<section class="content">
<h4>Fixed Width</h4>
<div class="example float-left">
<div style="padding-bottom: 5px;">Fixed width:</div>
<span class="each"><i class="ss ss-inv ss-fw"></i> Invasion</span>
<span class="each"><i class="ss ss-nms ss-fw"></i> Nemesis</span>
<div style="padding: 15px 0 5px;">Default (to compare):</div>
<span class="each"><i class="ss ss-inv"></i> Invasion</span>
<span class="each"><i class="ss ss-nms"></i> Nemesis</span>
</div>
<div class="explanation">
<p>All of the set symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width just append the class <code>.ss-fw</code> and the set symbols will have a constant width and centered icon.</p>
<blockquote>
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-inv ss-fw"</span>&gt;&lt;/<span class="e">i</span>&gt; Invasion<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-nms ss-fw"</span>&gt;&lt;/<span class="e">i</span>&gt; Nemesis
</blockquote>
</div>
<div class="clear"></div>
</section>
<section class="content">
<h4>Rarity Colors</h4>
<div class="example float-left">
<span class="each"><i class="ss ss-fw ss-ons ss-common"></i> ss-common</span>
<span class="each"><i class="ss ss-fw ss-ons ss-uncommon"></i> ss-uncommon</span>
<span class="each"><i class="ss ss-fw ss-ons ss-rare"></i> ss-rare</span>
<span class="each"><i class="ss ss-fw ss-ons ss-mythic"></i> ss-mythic</span>
<span class="each"><i class="ss ss-fw ss-tsp ss-timeshifted"></i> ss-timeshifted</span>
</div>
<div class="explanation">
<p>You can add a rarity color to each set symbol by appending the classes <code>ss-common</code>, <code>ss-uncommon</code>, <code>ss-rare</code>, and <code>ss-mythic</code>.</p>
<blockquote>
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-common"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-common<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-uncommon"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-uncommon<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-rare"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-rare<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-mythic"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-mythic<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-tsp ss-timeshifted"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-timeshifted
</blockquote>
</div>
<div class="clear"></div>
<div class="example float-left">
<span class="each"><i class="ss ss-mor ss-rare ss-grad ss-3x"></i> ss-grad</span>
<span class="each">&nbsp;<i class="ss ss-tsp ss-timeshifted ss-grad ss-3x"></i> ss-grad</span>
<span class="each"><i class="ss ss-isd ss-foil ss-grad ss-3x"></i> ss-foil</span>
</div>
<div class="explanation">
<p>Webkit browsers suport the <code>background-clip: text</code> property which opens up some exciting options for rarities: true text gradients! Append the <code>.ss-grad</code> class to add a modern rarity gradient.</p>
<blockquote>
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-mor ss-rare ss-grad ss-3x"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-grad<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-tsp ss-timeshifted ss-grad ss-3x"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-grad<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-isd ss-foil ss-grad ss-3x"</span>&gt;&lt;/<span class="e">i</span>&gt; ss-foil<br />
</blockquote>
<p><strong>Note:</strong> You will only see a gradient while using a Webkit browser (i.e., Chrome or Safari).</p>
</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>

BIN
docs/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

1127
docs/icons.html Normal file
View File

File diff suppressed because it is too large Load Diff

136
docs/index.html Normal file
View File

@ -0,0 +1,136 @@
<!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="../css/keyrune.min.css" />
<link rel="stylesheet" href="assets/docs.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<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">
<iframe src="https://ghbtns.com/github-btn.html?user=andrewgioia&repo=keyrune&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px" style="margin-bottom: -4px;"></iframe>
</span>
<span class="item">
Created by
<a href="https://andrewgioia.com">Andrew Gioia</a>
</span>
</div>
</section>
<header class="main">
<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="https://github.com/andrewgioia/Keyrune/archive/master.zip">
<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 3.7.1 includes all sets to Kaldheim and Time Spiral Remastered.
</p>
</div>
</header>
<main>
<div class="wrapper">
<section>
<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">
<h4>Using Keyrune in your project</h4>
<p>Keyrune is CSS and font package you can use in your project to easily display MTG set symbols as font icons. You can download the source and manually include it in your application, or include it via Bower or NPM (project name "keyrune" for both).</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>&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>
<h5>Including Keyrune in your project</h5>
<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;<span class="e">link</span> <span class="a">href</span>=<span class="v">"css/keyrune.css"</span> <span class="a">rel</span>=<span class="v">"stylesheet"</span> <span class="a">type</span>=<span class="v">"text/css"</span> /&gt;
</blockquote>
<p><strong>New!</strong> You can also now use Keyrune via CDN thanks to the amazing <a href="https://jsdelivr.com">jsDelivr</a> project! Include the latest version, reference:</p>
<blockquote>
&lt;<span class="e">link</span> <span class="a">href</span>=<span class="v">"//cdn.jsdelivr.net/npm/keyrune@latest/css/keyrune.css"</span> <span class="a">rel</span>=<span class="v">"stylesheet"</span> <span class="a">type</span>=<span class="v">"text/css"</span> /&gt;
</blockquote>
<p><strong>Note:</strong> as of v3.1.1 (June 2017) the URL structure at jsDelivr changed to the above. Also, you do not need to explicitly include the font-family via @font-face, but if you still would like to here is the css ruleset:</p> <blockquote>
&lt;<span class="e">link</span> <span class="a">href</span>="<span class="v">//cdn.jsdelivr.net/npm/keyrune@latest/css/keyrune.min.css</span>" <span class="a">rel</span>="<span class="v">stylesheet</span>" <span class="a">type</span>="<span class="v">text/css</span>" /&gt;<br />
&lt;<span class="e">style</span> <span class="a">type</span>="<span class="v">text/css</span>"&gt;<br />
&nbsp;&nbsp;<span class="a">@font-face</span> {<br />
&nbsp;&nbsp;&nbsp;&nbsp;font-family: '<span class="e">Keyrune</span>';<br />
&nbsp;&nbsp;&nbsp;&nbsp;src: <span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.eot</span>');<br />
&nbsp;&nbsp;&nbsp;&nbsp;src: <span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.eot?#iefix</span>') <span class="v">format</span>('<span class="e">embedded-opentype</span>'),<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.woff2</span>') <span class="v">format</span>('<span class="e">woff2</span>'),<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.woff</span>') <span class="v">format</span>('<span class="e">woff</span>'),<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.ttf</span>') <span class="v">format</span>('<span class="e">truetype</span>'),<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="v">url</span>('<span class="e">//cdn.jsdelivr.net/npm/keyrune@latest/fonts/keyrune.svg</span>') <span class="v">format</span>('<span class="e">svg</span>');<br />
&nbsp;&nbsp;&nbsp;&nbsp;font-weight: <span class="o">normal</span>;<br />
&nbsp;&nbsp;&nbsp;&nbsp;font-style: <span class="o">normal</span>;<br />
&nbsp;&nbsp;}<br />
&lt;/<span class="e">style</span>&gt;
</blockquote>
<h5>Creating icons in your project</h5>
<p>Insert set symbol icons by using the <code>.ss</code> class and then the set code class, such as <code>.ss-mor</code> for Morningtide: <i class="ss ss-mor"></i></p>
<blockquote>
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-mor"</span>&gt;&lt;/<span class="e">i</span>&gt;
</blockquote>
</section>
<section class="content">
<h4>Using Keyrune in desktop software</h4>
<p>You can also install Keyrune just like you would with any font, for use in desktop applications like Word, Pages, or Illustrator. This can be useful if you're designing and printing binder covers or set dividers.</p>
<p><strong>Note:</strong> For those unfamiliar with CSS projects like this, none of the styling in the documentation will be available when using Keyrune in a desktop app&mdash;you have to style everything manually like you would with any other font or "Word Art", for instance.</p>
<p>Follow these steps to work with Keyrune on your desktop:</p>
<ol>
<li><strong>Install the Keyrune font.</strong> To do this, click the "Download" button above, unzip the archive that downloads, then navigate to Keyrune-master/fonts. Double click on <strong>keyrune.ttf</strong> and install it.</li>
<li><strong>Open up your desktop application.</strong> Check to see that "Keyrune" shows up in your list of available fonts.</li>
<li><strong>Go to the <a href="cheatsheet.html">Cheatsheet</a>.</strong> Copy the symbol that you want to use and then paste it into the application you're using. You should see it show up correctly in there, with the font "Keyrune" active. You can't "type" this font like you would with any other (like Times New Roman), as it uses a reserved character set; you can only copy and paste from the Cheatsheet.</li>
<li><strong>Style the symbol however you want.</strong> Unfortunately you're going to have to do this manually :( I've created a <a href="https://www.dropbox.com/s/gp45uuuejfy089n/Keyrune_desktop_example.docx?dl=1">sample Word document</a> that you can use as a reference with rare Urza's Saga, mythic Morningtide, and uncommon Mercadian Masques symbols as examples. In that doc, each symbol has a 2.5pt black border (on 144pt font) and a gradient applied to each one for their rarities.</li>
</ol>
<p>Every time new set symbols are added to Keyrune you need to reinstall the keyrune.ttf. If you don't see the updated glyphs, try uninstalling the font first and then installing it.</p>
<p>Feel free to use the font and symbols however you like in your project, subject to the license terms below.</p>
</section>
<section class="content">
<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">
<h4>License</h4>
<p>Please review the following licenses for each component of Keyrune:</p>
<ul>
<li>All set symbol images are copyright Wizards of the Coast (<a href="http://magicthegathering.com">http://magicthegathering.com</a>)</li>
<li>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>)</li>
<li>Keyrune CSS, LESS, Sass, and other project files are licensed under the GPL 3.0 License at (<a href="https://opensource.org/licenses/GPL-3.0">https://opensource.org/licenses/GPL-3.0</a>)</li>
</ul>
<p>Attribution is <strong>greatly appreciated</strong> but not required!</p>
</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, Sass, and other project files are licensed under the <a href="https://opensource.org/licenses/GPL-3.0">GPL 3.0 License</a><br />
</p>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>

2
less/icons.less
View File

@ -155,7 +155,9 @@
.@{ss-prefix}-iko:before { content: "\e962"; } // Ikoria: Lair of Behemoths
.@{ss-prefix}-znr:before { content: "\e963"; } // Zendikar Rising
/* 2021 Sets */
.@{ss-prefix}-xkld:before,
.@{ss-prefix}-khm:before { content: "\e974"; } // Kaldheim
.@{ss-prefix}-xssm:before,
.@{ss-prefix}-stx:before { content: "\e975"; } // Strixhaven: School of Mages
/**

13
package-lock.json generated
View File

@ -1,5 +1,14 @@
{
"name": "keyrune",
"version": "3.6.0",
"lockfileVersion": 1
"version": "3.7.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"zepto": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/zepto/-/zepto-1.2.0.tgz",
"integrity": "sha1-4Se9nmb9hGvl6rSME5SIL3wOT5g=",
"dev": true
}
}
}

6
package.json
View File

@ -21,7 +21,9 @@
"keywords": [],
"homepage": "https://keyrune.andrewgioia.com",
"dependencies": {},
"devDependencies": {},
"devDependencies": {
"zepto": "^1.2.0"
},
"license": "(OFL-1.1 AND GPL-3.0-only)",
"main": "css/keyrune.css",
"scripts": {
@ -43,4 +45,4 @@
"engines": {
"node": "*"
}
}
}