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

View File

@ -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,13 +39,123 @@
</style> </style>
</head> </head>
<body> <body>
<h1>Keyrune</h1> <!-- header -->
<h2>Set Symbol Demos</h2> <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> <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> &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-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> <p>
<i class="ss ss-leg ss-3x ss-common"></i>&nbsp; <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-2x ss-common"></i>&nbsp;
@ -67,8 +180,13 @@
<i class="ss ss-wwk ss-mythic"></i>&nbsp; <i class="ss ss-wwk ss-mythic"></i>&nbsp;
Mythic Rare (Worldwake) Mythic Rare (Worldwake)
</p> </p>
-->
<!-- footer -->
<div class="row column">
<footer> <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> </footer>
</div> <!-- /.row -->
</body> </body>
</html> </html>