mirror of
https://github.com/andrewgioia/keyrune.git
synced 2024-12-22 23:49:56 +00:00
Examples page added, still need to add rarity colors to master
This commit is contained in:
parent
e043dcd4f5
commit
f2f8db2454
38
css/main.css
38
css/main.css
@ -36,7 +36,7 @@ a {
|
|||||||
section#banner {
|
section#banner {
|
||||||
background: #D5D2C8;
|
background: #D5D2C8;
|
||||||
color: #555;
|
color: #555;
|
||||||
padding: 10px 0;
|
padding: 12px 0;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
text-shadow: 0 1px 0 #E6E2D7;
|
text-shadow: 0 1px 0 #E6E2D7;
|
||||||
}
|
}
|
||||||
@ -141,10 +141,18 @@ code {
|
|||||||
font-family: Inconsolate, 'Courier New', Courier, monospace;
|
font-family: Inconsolate, 'Courier New', Courier, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: #F7EEF1;
|
||||||
|
color: #BB073B;
|
||||||
|
padding: 1px 3px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
background: #EFEDE8;
|
background: #EFEDE8;
|
||||||
border-bottom: 1px solid #E0DCCD;
|
border-bottom: 1px solid #E0DCCD;
|
||||||
padding: 20px;
|
line-height: 1.4em;
|
||||||
|
padding: 20px 20px 18px;
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
@ -187,7 +195,7 @@ blockquote {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icons {
|
.icons {
|
||||||
padding: 10px 0 0;
|
padding: 10px 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
@ -219,12 +227,34 @@ blockquote {
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.example {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 15px 0 0;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example .each {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explanation {
|
||||||
|
margin-left: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #eee;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
padding: 30px 0 50px;
|
padding: 10px 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-left {
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.float-right {
|
.float-right {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
119
examples.html
Normal file
119
examples.html
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
<!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="bower_components/keyrune/css/keyrune.css" />
|
||||||
|
<link rel="stylesheet" href="css/main.css" />
|
||||||
|
<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="75px" 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 & 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><i></code> and <code><span></code> are preferred, but any can be used.</p>
|
||||||
|
<blockquote>
|
||||||
|
<i class="ss ss-zen"></i> 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-wth ss-2x"></i> ss-2x</span>
|
||||||
|
<span class="each"><i class="ss ss-wth ss-3x"></i> ss-3x</span>
|
||||||
|
<span class="each"><i class="ss ss-wth ss-4x"></i> ss-4x</span>
|
||||||
|
<span class="each"><i class="ss ss-wth ss-5x"></i> ss-5x</span>
|
||||||
|
<span class="each"><i class="ss ss-wth 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>
|
||||||
|
<i class="ss ss-zen ss-2x"></i> ss-2x<br />
|
||||||
|
<i class="ss ss-zen ss-3x"></i> ss-3x<br />
|
||||||
|
<i class="ss ss-zen ss-4x"></i> ss-4x<br />
|
||||||
|
<i class="ss ss-zen ss-5x"></i> ss-5x<br />
|
||||||
|
<i class="ss ss-zen ss-6x"></i> ss-6x
|
||||||
|
</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-ons ss-common"></i> ss-common</span>
|
||||||
|
<span class="each"><i class="ss ss-ons ss-uncommon"></i> ss-uncommon</span>
|
||||||
|
<span class="each"><i class="ss ss-ons ss-rare"></i> ss-rare</span>
|
||||||
|
<span class="each"><i class="ss ss-ons ss-mythic"></i> ss-mythic</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>
|
||||||
|
<i class="ss ss-ons ss-common"></i> ss-common<br />
|
||||||
|
<i class="ss ss-ons ss-uncommon"></i> ss-uncommon<br />
|
||||||
|
<i class="ss ss-ons ss-rare"></i> ss-rare<br />
|
||||||
|
<i class="ss ss-ons ss-mythic"></i> ss-mythic
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
<div class="clear"></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="float-left">
|
||||||
|
<p>Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="float-right" style="text-align: right;">
|
||||||
|
<p>
|
||||||
|
All set images © <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>
|
15
icons.html
15
icons.html
@ -17,6 +17,9 @@
|
|||||||
<a href="icons.html" class="item">Set Icons</a>
|
<a href="icons.html" class="item">Set Icons</a>
|
||||||
<a href="examples.html" class="item">Examples</a>
|
<a href="examples.html" class="item">Examples</a>
|
||||||
<a href="http://github.com/andrewgioia/Keyrune" class="item">GitHub Project</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="75px" height="20px" style="margin-bottom: -4px;"></iframe>
|
||||||
|
</span>
|
||||||
<span class="item">
|
<span class="item">
|
||||||
Created by
|
Created by
|
||||||
<a href="http://andrewgioia.com">Andrew Gioia</a>
|
<a href="http://andrewgioia.com">Andrew Gioia</a>
|
||||||
@ -541,7 +544,17 @@
|
|||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a>
|
<div class="float-left">
|
||||||
|
<p>Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="float-right" style="text-align: right;">
|
||||||
|
<p>
|
||||||
|
All set images © <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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
15
index.html
15
index.html
@ -16,6 +16,9 @@
|
|||||||
<a href="icons.html" class="item">Set Icons</a>
|
<a href="icons.html" class="item">Set Icons</a>
|
||||||
<a href="examples.html" class="item">Examples</a>
|
<a href="examples.html" class="item">Examples</a>
|
||||||
<a href="http://github.com/andrewgioia/Keyrune" class="item">GitHub Project</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="75px" height="20px" style="margin-bottom: -4px;"></iframe>
|
||||||
|
</span>
|
||||||
<span class="item">
|
<span class="item">
|
||||||
Created by
|
Created by
|
||||||
<a href="http://andrewgioia.com">Andrew Gioia</a>
|
<a href="http://andrewgioia.com">Andrew Gioia</a>
|
||||||
@ -74,7 +77,17 @@
|
|||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a>
|
<div class="float-left">
|
||||||
|
<p>Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a></p>
|
||||||
|
</div>
|
||||||
|
<div class="float-right" style="text-align: right;">
|
||||||
|
<p>
|
||||||
|
All set images © <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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user