mirror of
https://github.com/andrewgioia/keyrune.git
synced 2024-11-05 16:34:45 +00:00
Update to the example (index.html) layout/content.
This commit is contained in:
jordanbrauer
parent
0eef150a51
commit
09790f2442
176
index.html
176
index.html
@ -4,10 +4,10 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<title>Keyrune</title>
|
<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.min.css" />
|
||||||
<!-- <link rel="stylesheet" href="css/keyrune.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">
|
<style type="text/css">
|
||||||
body {
|
body {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@ -20,6 +20,9 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 100px;
|
padding: 0 100px;
|
||||||
}
|
}
|
||||||
|
h1 > small > code { /* i know this is lazy solution lol, but its a quick fix for now. */
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -36,39 +39,154 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Keyrune</h1>
|
<!-- header -->
|
||||||
<h2>Set Symbol Demos</h2>
|
<div class="row column">
|
||||||
<p>
|
<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.
|
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
|
You can view a few of the set symbol font icons and the available examples below
|
||||||
(some may only be available for specific browsers).
|
(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>
|
||||||
|
<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>
|
<p>
|
||||||
<i class="ss ss-leg ss-3x ss-common"></i>
|
<i class="ss ss-default ss-common ss-grad ss-6x"></i>
|
||||||
<i class="ss ss-leg ss-2x ss-common"></i>
|
<i class="ss ss-default ss-common ss-grad ss-5x"></i>
|
||||||
<i class="ss ss-leg ss-common"></i>
|
<i class="ss ss-default ss-common ss-grad ss-4x"></i>
|
||||||
Common (Legends)
|
<i class="ss ss-default ss-common ss-grad ss-3x"></i>
|
||||||
</p>
|
<i class="ss ss-default ss-common ss-grad ss-2x"></i>
|
||||||
<p>
|
<i class="ss ss-default ss-common ss-grad ss-1x"></i>
|
||||||
<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>
|
</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>
|
<footer>
|
||||||
Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a>
|
Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
</div> <!-- /.row -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user