andrew/keyrune
andrew/keyrune
1
0
Fork 0
mirror of https://github.com/andrewgioia/keyrune.git synced 2024-12-22 23:49:56 +00:00
Code Issues Projects Releases Wiki Activity

Colorizing code blocks

Browse Source
This commit is contained in:
Andrew Gioia 2015-03-15 18:42:31 -04:00
parent 694d8a314e
commit 465e2af6a9
3 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -258,3 +258,7 @@ footer {
.clear { .clear {
clear: both; clear: both;
} }
.e { color: #63A35C; }
.a { color: #795DA3; }
.v { color: #183691; }

20
examples.html
View File

@ -51,7 +51,7 @@
<div class="explanation"> <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>&lt;i&gt;</code> and <code>&lt;span&gt;</code> are preferred, but any can be used.</p> <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>&lt;i&gt;</code> and <code>&lt;span&gt;</code> are preferred, but any can be used.</p>
<blockquote> <blockquote>
&lt;i class="ss ss-zen"&gt;&lt/i&gt; ss-zen &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-zen"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-zen
</blockquote> </blockquote>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
@ -68,11 +68,11 @@
<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;i class="ss ss-zen ss-2x"&gt;&lt/i&gt; ss-2x<br /> &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;i class="ss ss-zen ss-3x"&gt;&lt/i&gt; ss-3x<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;i class="ss ss-zen ss-4x"&gt;&lt/i&gt; ss-4x<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;i class="ss ss-zen ss-5x"&gt;&lt/i&gt; ss-5x<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;i class="ss ss-zen ss-6x"&gt;&lt/i&gt; ss-6x &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
</blockquote> </blockquote>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
@ -88,10 +88,10 @@
<div class="explanation"> <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> <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> <blockquote>
&lt;i class="ss ss-ons ss-common"&gt;&lt/i&gt; ss-common<br /> &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-common"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-common<br />
&lt;i class="ss ss-ons ss-uncommon"&gt;&lt/i&gt; ss-uncommon<br /> &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-uncommon"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-uncommon<br />
&lt;i class="ss ss-ons ss-rare"&gt;&lt/i&gt; ss-rare<br /> &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-rare"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-rare<br />
&lt;i class="ss ss-ons ss-mythic"&gt;&lt/i&gt; ss-mythic &lt;<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-ons ss-mythic"</span>&gt;&lt;/<span class="a">i</span>&gt; ss-mythic
</blockquote> </blockquote>
</div> </div>
<div class="clear"></div> <div class="clear"></div>

3
index.html
View File

@ -59,7 +59,8 @@
<p>Each set symbol has its own font character. Display them in a manner similar to <a href="http://fontawesome.io">Font Awesome</a> using the <code>&lt;i class="ss ss-exp"&gt;&lt;/i&gt;</code> element. Class name codes are based on the expansion codes from <a href="http://mtgjson.com">MTG JSON</a>.</p> <p>Each set symbol has its own font character. Display them in a manner similar to <a href="http://fontawesome.io">Font Awesome</a> using the <code>&lt;i class="ss ss-exp"&gt;&lt;/i&gt;</code> element. Class name codes are based on the expansion codes from <a href="http://mtgjson.com">MTG JSON</a>.</p>
<p>To use Keyrune, move the font files to your /fonts directory and include the <code>keyrune.css</code> stylesheet in your <code>&lt;head&gt;</code>:</p> <p>To use Keyrune, move the font files to your /fonts directory and include the <code>keyrune.css</code> stylesheet in your <code>&lt;head&gt;</code>:</p>
<blockquote> <blockquote>
&lt;link href="css/keyrune.css" rel="stylesheet" type="text/css" /&gt;</blockquote> &lt;<span class="e">link</span> <span class="a">href</span>=<span class="v">"css/keyrune.css"</span> <span class="a">rel</span>=<span class="v">"stylesheet"</span> <span class="a">type</span>=<span class="v">"text/css"</span> /&gt;
</blockquote>
</section> </section>
<section class="content"> <section class="content">
<h4>Editing the Source</h4> <h4>Editing the Source</h4>