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

Update to the example (index.html) layout/content.

This commit is contained in:
jordanbrauer 2016-10-05 11:02:19 -05:00
parent 0eef150a51
commit 09790f2442
1 changed files with 147 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
index.html
View File

@ -4,10 +4,10 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Keyrune</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css" />
<link rel="stylesheet" href="css/keyrune.min.css" />
<!-- <link rel="stylesheet" href="css/keyrune.css" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background: #fff;
@ -20,6 +20,9 @@
margin: 0;
padding: 0 100px;
}
h1 > small > code { /* i know this is lazy solution lol, but its a quick fix for now. */
font-size: 14px;
}
h3 {
font-size: 16px;
font-weight: bold;
@ -36,39 +39,154 @@
</style>
</head>
<body>
<h1>Keyrune</h1>
<h2>Set Symbol Demos</h2>
<p>
<!-- header -->
<div class="row column">
<header>
<h1>Keyrune <small><code>ver 1.7.2_sass</code></small></h1>
<h2 class="subheader">Set Symbol Demos</h2>
<p>
This HTML file is for demo purposes and is not necessary for Keyrune installation or use.
You can view a few of the set symbol font icons and the available examples below
(some may only be available for specific browsers).
</p>
</p>
</header>
</div> <!-- /.row -->
<!-- common examples -->
<div class="row text-center">
<div class="columns small-12 medium-12 large-6">
<h3>Default Setsymbol, Common <small>(w/out gradient)</small></h3>
<p>
<i class="ss ss-default ss-common ss-6x"></i> &nbsp;
<i class="ss ss-default ss-common ss-5x"></i> &nbsp;
<i class="ss ss-default ss-common ss-4x"></i> &nbsp;
<i class="ss ss-default ss-common ss-3x"></i> &nbsp;
<i class="ss ss-default ss-common ss-2x"></i> &nbsp;
<i class="ss ss-default ss-common ss-1x"></i> &nbsp;
</p>
</div>
<h3>Default Setsymbol, Common <small>(w/ gradient)</small></h3>
<p>
<i class="ss ss-leg ss-3x ss-common"></i>&nbsp;
<i class="ss ss-leg ss-2x ss-common"></i>&nbsp;
<i class="ss ss-leg ss-common"></i>&nbsp;
Common (Legends)
</p>
<p>
<i class="ss ss-ons ss-3x ss-uncommon ss-grad"></i>&nbsp;
<i class="ss ss-ons ss-2x ss-uncommon"></i>&nbsp;
<i class="ss ss-ons ss-uncommon"></i>&nbsp;
Uncommon (Onslaught)
</p>
<p>
<i class="ss ss-fut ss-3x ss-rare ss-grad"></i>&nbsp;
<i class="ss ss-fut ss-2x ss-rare"></i>&nbsp;
<i class="ss ss-fut ss-rare"></i>&nbsp;
Rare (Future Sight)
</p>
<p>
<i class="ss ss-wwk ss-3x ss-mythic ss-grad"></i>&nbsp;
<i class="ss ss-wwk ss-2x ss-mythic"></i>&nbsp;
<i class="ss ss-wwk ss-mythic"></i>&nbsp;
Mythic Rare (Worldwake)
<i class="ss ss-default ss-common ss-grad ss-6x"></i> &nbsp;
<i class="ss ss-default ss-common ss-grad ss-5x"></i> &nbsp;
<i class="ss ss-default ss-common ss-grad ss-4x"></i> &nbsp;
<i class="ss ss-default ss-common ss-grad ss-3x"></i> &nbsp;
<i class="ss ss-default ss-common ss-grad ss-2x"></i> &nbsp;
<i class="ss ss-default ss-common ss-grad ss-1x"></i> &nbsp;
</p>
</div> <!-- /.row -->
<!-- uncommon examples -->
<div class="row text-center">
<div class="columns small-12 medium-12 large-6">
<h3>Default Setsymbol, Uncommon <small>(w/out gradient)</small></h3>
<p>
<i class="ss ss-default ss-uncommon ss-6x"></i> &nbsp;
<i class="ss ss-default ss-uncommon ss-5x"></i> &nbsp;
<i class="ss ss-default ss-uncommon ss-4x"></i> &nbsp;
<i class="ss ss-default ss-uncommon ss-3x"></i> &nbsp;
<i class="ss ss-default ss-uncommon ss-2x"></i> &nbsp;
<i class="ss ss-default ss-uncommon ss-1x"></i> &nbsp;
</p>
</div>
<div class="columns small-12 medium-12 large-6">
<h3>Default Setsymbol, Uncommon <small>(w/ gradient)</small></h3>
<p>
<i class="ss ss-default ss-uncommon ss-grad ss-6x"></i> &nbsp;
<i class="ss ss-default ss-uncommon ss-grad ss-5x"></i> &nbsp;
<i class="ss ss-default ss-uncommon ss-grad ss-4x"></i> &nbsp;
<i class="ss ss-default ss-uncommon ss-grad ss-3x"></i> &nbsp;
<i class="ss ss-default ss-uncommon ss-grad ss-2x"></i> &nbsp;
<i class="ss ss-default ss-uncommon ss-grad ss-1x"></i> &nbsp;
</p>
</div>
</div> <!-- /.row -->
<!-- rare examples -->
<div class="row text-center">
<div class="columns small-12 medium-12 large-6">
<h3>Default Setsymbol, Rare <small>(w/out gradient)</small></h3>
<p>
<i class="ss ss-default ss-rare ss-6x"></i> &nbsp;
<i class="ss ss-default ss-rare ss-5x"></i> &nbsp;
<i class="ss ss-default ss-rare ss-4x"></i> &nbsp;
<i class="ss ss-default ss-rare ss-3x"></i> &nbsp;
<i class="ss ss-default ss-rare ss-2x"></i> &nbsp;
<i class="ss ss-default ss-rare ss-1x"></i> &nbsp;
</p>
</div>
<div class="columns small-12 medium-12 large-6">
<h3>Default Setsymbol, Rare <small>(w/ gradient)</small></h3>
<p>
<i class="ss ss-default ss-rare ss-grad ss-6x"></i> &nbsp;
<i class="ss ss-default ss-rare ss-grad ss-5x"></i> &nbsp;
<i class="ss ss-default ss-rare ss-grad ss-4x"></i> &nbsp;
<i class="ss ss-default ss-rare ss-grad ss-3x"></i> &nbsp;
<i class="ss ss-default ss-rare ss-grad ss-2x"></i> &nbsp;
<i class="ss ss-default ss-rare ss-grad ss-1x"></i> &nbsp;
</p>
</div>
</div> <!-- /.row -->
<!-- mythic examples -->
<div class="row text-center">
<div class="columns small-12 medium-12 large-6">
<h3>Default Setsymbol, Mythic <small>(w/out gradient)</small></h3>
<p>
<i class="ss ss-default ss-mythic ss-6x"></i> &nbsp;
<i class="ss ss-default ss-mythic ss-5x"></i> &nbsp;
<i class="ss ss-default ss-mythic ss-4x"></i> &nbsp;
<i class="ss ss-default ss-mythic ss-3x"></i> &nbsp;
<i class="ss ss-default ss-mythic ss-2x"></i> &nbsp;
<i class="ss ss-default ss-mythic ss-1x"></i> &nbsp;
</p>
</div>
<div class="columns small-12 medium-12 large-6">
<h3>Default Setsymbol, Mythic <small>(w/ gradient)</small></h3>
<p>
<i class="ss ss-default ss-mythic ss-grad ss-6x"></i> &nbsp;
<i class="ss ss-default ss-mythic ss-grad ss-5x"></i> &nbsp;
<i class="ss ss-default ss-mythic ss-grad ss-4x"></i> &nbsp;
<i class="ss ss-default ss-mythic ss-grad ss-3x"></i> &nbsp;
<i class="ss ss-default ss-mythic ss-grad ss-2x"></i> &nbsp;
<i class="ss ss-default ss-mythic ss-grad ss-1x"></i> &nbsp;
</p>
</div>
</div> <!-- /.row -->
<!-- old set symbol examples -->
<!--
<p>
<i class="ss ss-leg ss-3x ss-common"></i>&nbsp;
<i class="ss ss-leg ss-2x ss-common"></i>&nbsp;
<i class="ss ss-leg ss-common"></i>&nbsp;
Common (Legends)
</p>
<p>
<i class="ss ss-ons ss-3x ss-uncommon ss-grad"></i>&nbsp;
<i class="ss ss-ons ss-2x ss-uncommon"></i>&nbsp;
<i class="ss ss-ons ss-uncommon"></i>&nbsp;
Uncommon (Onslaught)
</p>
<p>
<i class="ss ss-fut ss-3x ss-rare ss-grad"></i>&nbsp;
<i class="ss ss-fut ss-2x ss-rare"></i>&nbsp;
<i class="ss ss-fut ss-rare"></i>&nbsp;
Rare (Future Sight)
</p>
<p>
<i class="ss ss-wwk ss-3x ss-mythic ss-grad"></i>&nbsp;
<i class="ss ss-wwk ss-2x ss-mythic"></i>&nbsp;
<i class="ss ss-wwk ss-mythic"></i>&nbsp;
Mythic Rare (Worldwake)
</p>
-->
<!-- footer -->
<div class="row column">
<footer>
Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
</footer>
</div> <!-- /.row -->
</body>
</html>