mirror of
https://github.com/andrewgioia/keyrune.git
synced 2024-11-05 08:34:45 +00:00
193 lines
7.3 KiB
HTML
193 lines
7.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<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.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" />
|
|
<style type="text/css">
|
|
body {
|
|
background: #fff;
|
|
border-top: 3px solid #CBC8BB;
|
|
color: #333;
|
|
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
|
|
Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.6em;
|
|
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;
|
|
margin: 0;
|
|
}
|
|
p {
|
|
margin: 10px 0 20px;
|
|
}
|
|
footer {
|
|
border-top: 1px solid #eee;
|
|
margin: 40px 0 0;
|
|
padding: 20px 0 30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 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>
|
|
</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>
|
|
<i class="ss ss-default ss-common ss-5x"></i>
|
|
<i class="ss ss-default ss-common ss-4x"></i>
|
|
<i class="ss ss-default ss-common ss-3x"></i>
|
|
<i class="ss ss-default ss-common ss-2x"></i>
|
|
<i class="ss ss-default ss-common ss-1x"></i>
|
|
</p>
|
|
</div>
|
|
<h3>Default Setsymbol, Common <small>(w/ gradient)</small></h3>
|
|
<p>
|
|
<i class="ss ss-default ss-common ss-grad ss-6x"></i>
|
|
<i class="ss ss-default ss-common ss-grad ss-5x"></i>
|
|
<i class="ss ss-default ss-common ss-grad ss-4x"></i>
|
|
<i class="ss ss-default ss-common ss-grad ss-3x"></i>
|
|
<i class="ss ss-default ss-common ss-grad ss-2x"></i>
|
|
<i class="ss ss-default ss-common ss-grad ss-1x"></i>
|
|
</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>
|
|
<i class="ss ss-default ss-uncommon ss-5x"></i>
|
|
<i class="ss ss-default ss-uncommon ss-4x"></i>
|
|
<i class="ss ss-default ss-uncommon ss-3x"></i>
|
|
<i class="ss ss-default ss-uncommon ss-2x"></i>
|
|
<i class="ss ss-default ss-uncommon ss-1x"></i>
|
|
</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>
|
|
<i class="ss ss-default ss-uncommon ss-grad ss-5x"></i>
|
|
<i class="ss ss-default ss-uncommon ss-grad ss-4x"></i>
|
|
<i class="ss ss-default ss-uncommon ss-grad ss-3x"></i>
|
|
<i class="ss ss-default ss-uncommon ss-grad ss-2x"></i>
|
|
<i class="ss ss-default ss-uncommon ss-grad ss-1x"></i>
|
|
</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>
|
|
<i class="ss ss-default ss-rare ss-5x"></i>
|
|
<i class="ss ss-default ss-rare ss-4x"></i>
|
|
<i class="ss ss-default ss-rare ss-3x"></i>
|
|
<i class="ss ss-default ss-rare ss-2x"></i>
|
|
<i class="ss ss-default ss-rare ss-1x"></i>
|
|
</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>
|
|
<i class="ss ss-default ss-rare ss-grad ss-5x"></i>
|
|
<i class="ss ss-default ss-rare ss-grad ss-4x"></i>
|
|
<i class="ss ss-default ss-rare ss-grad ss-3x"></i>
|
|
<i class="ss ss-default ss-rare ss-grad ss-2x"></i>
|
|
<i class="ss ss-default ss-rare ss-grad ss-1x"></i>
|
|
</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>
|
|
<i class="ss ss-default ss-mythic ss-5x"></i>
|
|
<i class="ss ss-default ss-mythic ss-4x"></i>
|
|
<i class="ss ss-default ss-mythic ss-3x"></i>
|
|
<i class="ss ss-default ss-mythic ss-2x"></i>
|
|
<i class="ss ss-default ss-mythic ss-1x"></i>
|
|
</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>
|
|
<i class="ss ss-default ss-mythic ss-grad ss-5x"></i>
|
|
<i class="ss ss-default ss-mythic ss-grad ss-4x"></i>
|
|
<i class="ss ss-default ss-mythic ss-grad ss-3x"></i>
|
|
<i class="ss ss-default ss-mythic ss-grad ss-2x"></i>
|
|
<i class="ss ss-default ss-mythic ss-grad ss-1x"></i>
|
|
</p>
|
|
</div>
|
|
</div> <!-- /.row -->
|
|
|
|
<!-- old set symbol examples -->
|
|
<!--
|
|
<p>
|
|
<i class="ss ss-leg ss-3x ss-common"></i>
|
|
<i class="ss ss-leg ss-2x ss-common"></i>
|
|
<i class="ss ss-leg ss-common"></i>
|
|
Common (Legends)
|
|
</p>
|
|
<p>
|
|
<i class="ss ss-ons ss-3x ss-uncommon ss-grad"></i>
|
|
<i class="ss ss-ons ss-2x ss-uncommon"></i>
|
|
<i class="ss ss-ons ss-uncommon"></i>
|
|
Uncommon (Onslaught)
|
|
</p>
|
|
<p>
|
|
<i class="ss ss-fut ss-3x ss-rare ss-grad"></i>
|
|
<i class="ss ss-fut ss-2x ss-rare"></i>
|
|
<i class="ss ss-fut ss-rare"></i>
|
|
Rare (Future Sight)
|
|
</p>
|
|
<p>
|
|
<i class="ss ss-wwk ss-3x ss-mythic ss-grad"></i>
|
|
<i class="ss ss-wwk ss-2x ss-mythic"></i>
|
|
<i class="ss ss-wwk ss-mythic"></i>
|
|
Mythic Rare (Worldwake)
|
|
</p>
|
|
-->
|
|
|
|
<!-- footer -->
|
|
<div class="row column">
|
|
<footer>
|
|
Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a>
|
|
</footer>
|
|
</div> <!-- /.row -->
|
|
</body>
|
|
</html>
|