Updating the docs for v0.2; examples page hover state changes

This commit is contained in:
Andrew Gioia 2015-03-21 18:23:07 -04:00
parent 465e2af6a9
commit 633777a103
8 changed files with 182 additions and 160 deletions

View File

@ -18,11 +18,11 @@
"*.json", "*.json",
"*.md" "*.md"
], ],
"_release": "cc07053943", "_release": "cb8a2fa161",
"_resolution": { "_resolution": {
"type": "branch", "type": "branch",
"branch": "master", "branch": "master",
"commit": "cc07053943316927705e298280032671e77b98bc" "commit": "cb8a2fa16152cc833f8cc2d71f617dd96ac3eac1"
}, },
"_source": "git://github.com/andrewgioia/keyrune.git", "_source": "git://github.com/andrewgioia/keyrune.git",
"_target": "*", "_target": "*",

Binary file not shown.

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 208 KiB

After

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

Binary file not shown.

View File

@ -64,8 +64,9 @@ header {
.bigicon { .bigicon {
float: right; float: right;
font-size: 240px; font-size: 272px;
line-height: 200px; line-height: 200px;
margin-top: -10px;
text-shadow: 0 2px 0 #fff; text-shadow: 0 2px 0 #fff;
} }
@ -79,6 +80,14 @@ p {
margin: 20px 0; margin: 20px 0;
} }
ul {
margin: 0;
}
li {
margin: 0 0 10px;
}
h1 { h1 {
color: #444; color: #444;
margin: 0; margin: 0;
@ -207,18 +216,28 @@ blockquote {
.icon span { .icon span {
display: inline-block; display: inline-block;
padding: 9px 15px; padding: 9px 10px;
white-space: nowrap; white-space: nowrap;
} }
.icon:hover { .icon:hover {
background: #eee; background: #eee;
position: relative;
margin-top: -4px;
margin-bottom: -5px;
} }
.icon .ss { .icon .ss {
font-size: 22px; font-size: 22px;
margin-right: 5px; margin-right: 5px;
margin-top: -2px; margin-top: -2px;
text-align: right;
width: 32px;
}
.icon:hover .ss {
font-size: 32px;
text-shadow: 0 1px 0 #fff;
} }
.icon em { .icon em {

View File

@ -59,20 +59,20 @@
<section class="content"> <section class="content">
<h4>Icon Sizes</h4> <h4>Icon Sizes</h4>
<div class="example float-left"> <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-sth 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-sth 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-sth 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-sth ss-5x"></i> ss-5x</span>
<span class="each"><i class="ss ss-wth ss-6x"></i> ss-6x</span> <span class="each"><i class="ss ss-sth ss-6x"></i> ss-6x</span>
</div> </div>
<div class="explanation"> <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> <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> <blockquote>
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen ss-2x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-2x<br /> &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-2x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-2x<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen ss-3x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-3x<br /> &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-3x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-3x<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen ss-4x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-4x<br /> &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-4x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-4x<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen ss-5x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-5x<br /> &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-5x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-5x<br />
&lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen ss-6x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-6x &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-sth ss-6x"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-6x
</blockquote> </blockquote>
</div> </div>
<div class="clear"></div> <div class="clear"></div>

View File

@ -44,7 +44,7 @@
</a> </a>
</div> </div>
<p> <p>
Current version 0.1 includes all sets to Fate Reforged. Current version 0.2 includes all sets to Fate Reforged.
</p> </p>
</div> </div>
</header> </header>
@ -68,9 +68,12 @@
</section> </section>
<section class="content"> <section class="content">
<h4>License</h4> <h4>License</h4>
<p>All set symbol images are copyright Wizards of the Coast (<a href="http://magicthegathering.com">http://magicthegathering.com</a>)</p> <p>Please review the following licenses for each component of Keyrune:</p>
<p>The Keyrune font is licensed under the the SIL OFL 1.1 (<a href="http://scripts.sil.org/OFL">http://scripts.sil.org/OFL</a>)</p> <ul>
<p>Keyrune CSS, LESS, and Sass files are licensed under the MIT License (<a href="http://opensource.org/licenses/mit-license.html">http://opensource.org/licenses/mit-license.html</a>)</p> <li>All set symbol images are copyright Wizards of the Coast (<a href="http://magicthegathering.com">http://magicthegathering.com</a>)</li>
<li>The Keyrune font is licensed under the the SIL OFL 1.1 (<a href="http://scripts.sil.org/OFL">http://scripts.sil.org/OFL</a>)</li>
<li>Keyrune CSS, LESS, and Sass files are licensed under the MIT License (<a href="http://opensource.org/licenses/mit-license.html">http://opensource.org/licenses/mit-license.html</a>)</li>
</ul>
<p>Attribution is <strong>greatly appreciated</strong> but not required!</p> <p>Attribution is <strong>greatly appreciated</strong> but not required!</p>
</section> </section>
</div> </div>