diff --git a/css/main.css b/css/main.css index afee8df..d2d462d 100644 --- a/css/main.css +++ b/css/main.css @@ -36,7 +36,7 @@ a { section#banner { background: #D5D2C8; color: #555; - padding: 10px 0; + padding: 12px 0; text-align: right; text-shadow: 0 1px 0 #E6E2D7; } @@ -141,10 +141,18 @@ code { font-family: Inconsolate, 'Courier New', Courier, monospace; } +code { + background: #F7EEF1; + color: #BB073B; + padding: 1px 3px; + border-radius: 2px; +} + blockquote { background: #EFEDE8; border-bottom: 1px solid #E0DCCD; - padding: 20px; + line-height: 1.4em; + padding: 20px 20px 18px; margin: 20px 0; border-radius: 4px; } @@ -187,7 +195,7 @@ blockquote { } .icons { - padding: 10px 0 0; + padding: 10px 0 5px; } .icon { @@ -219,12 +227,34 @@ blockquote { font-style: normal; } +.example { + font-size: 16px; + padding: 15px 0 0; + width: 200px; +} + + .example .each { + display: block; + } + +.explanation { + margin-left: 200px; +} + footer { border-top: 1px solid #eee; margin-top: 20px; - padding: 30px 0 50px; + padding: 10px 0 30px; +} + +.float-left { + float: left; } .float-right { float: right; } + +.clear { + clear: both; +} diff --git a/examples.html b/examples.html new file mode 100644 index 0000000..525b527 --- /dev/null +++ b/examples.html @@ -0,0 +1,119 @@ + + + + + + Examples | Keyrune + + + + + + + + +
+
+

Options & Examples

+ + + Download + +

Built-in size, position, and rarity options

+
+
+ +
+
+
+

Keyrune has some built in icon options to easily change the size, position, and rarity color of the set symbols. Take a look below at examples of each option with the class names to implement them.

+
+
+

Displaying a Set Icon

+
+ ss-zen +
+
+

You can place Keyrune icons anywhere using the CSS classname prefix ss (for set symbol) and then the set icon's code. Inline elements like <i> and <span> are preferred, but any can be used.

+
+ <i class="ss ss-zen"></i> ss-zen +
+
+
+
+
+

Icon Sizes

+
+ ss-2x + ss-3x + ss-4x + ss-5x + ss-6x +
+
+

To conveniently increase the size of a set symbol you can append the classes ss-2x, ss-3x, ss-4x, ss-4x, and ss-6x. These classes increase the size by a factor equal to class name number.

+
+ <i class="ss ss-zen ss-2x"></i> ss-2x
+ <i class="ss ss-zen ss-3x"></i> ss-3x
+ <i class="ss ss-zen ss-4x"></i> ss-4x
+ <i class="ss ss-zen ss-5x"></i> ss-5x
+ <i class="ss ss-zen ss-6x"></i> ss-6x +
+
+
+
+
+

Rarity Colors

+
+ ss-common + ss-uncommon + ss-rare + ss-mythic +
+
+

You can add a rarity color to each set symbol by appending the classes ss-common, ss-uncommon, ss-rare, and ss-mythic.

+
+ <i class="ss ss-ons ss-common"></i> ss-common
+ <i class="ss ss-ons ss-uncommon"></i> ss-uncommon
+ <i class="ss ss-ons ss-rare"></i> ss-rare
+ <i class="ss ss-ons ss-mythic"></i> ss-mythic +
+
+
+
+
+
+ + + + + diff --git a/icons.html b/icons.html index 7242d6e..797b25b 100644 --- a/icons.html +++ b/icons.html @@ -17,6 +17,9 @@ Set Icons Examples GitHub Project + + + Created by Andrew Gioia @@ -541,7 +544,17 @@ diff --git a/index.html b/index.html index 01649e0..3253966 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,9 @@ Set Icons Examples GitHub Project + + + Created by Andrew Gioia @@ -74,7 +77,17 @@