Updates to the main project page

css/main.css

@@ -51,7 +51,7 @@ header {
     border-bottom: 1px solid #CFCDC7;
     color: #333;
     margin: 0;
-    padding: 20px 0 15px;
+    padding: 25px 0 15px;
 }
 
     .bigicon {
@@ -66,7 +66,8 @@ header {
     }
 
 p {
-    line-height: 1.5em;
+    font-size: 16px;
+    line-height: 1.6em;
     margin: 20px 0;
 }
 
@@ -76,7 +77,7 @@ h1 {
     font-family: Beleren;
     font-size: 64px;
     font-weight: lighter;
-    padding: 0 0 15px;
+    padding: 0 0 20px;
     text-shadow: 0 2px 0 #fff;
 }
 
@@ -91,10 +92,12 @@ h2 {
 }
 
 h3 {
-    color: #333;
+    color: #61605B;
-    font-size: 20px;
+    font-family: Beleren;
-    font-weight: normal;
+    font-size: 24px;
-    margin: 15px 0 10px;
+    font-weight: lighter;
+    margin: 15px 0 5px;
+    text-align: left;
 }
 
 h4 {
@@ -102,6 +105,7 @@ h4 {
     font-size: 18px;
     font-weight: normal;
     line-height: 1.6em;
+    text-align: left;
 }
 
 main {
@@ -109,12 +113,28 @@ main {
     padding: 20px 0 25px;
 }
 
+    main section.content {
+        padding: 10px 0 10px;
+    }
+
     main h2 {
         font-size: 24px;
-        margin: 30px 0 0;
         padding: 0 0 5px;
     }
 
+blockquote,
+code {
+    font-family: Inconsolate, 'Courier New', Courier, monospace;
+}
+
+blockquote {
+    background: #EFEDE8;
+    border-bottom: 1px solid #E0DCCD;
+    padding: 20px;
+    margin: 20px 0;
+    border-radius: 4px;
+}
+
 .button {
     background: #008eae;
     border-bottom: 2px solid #166075;

index.html

@@ -50,12 +50,25 @@
         <div class="wrapper">
             <section>
                 <h3>Keyrune is a complete set of <strong>scalable vector icons</strong> for Magic set symbols.</h3>
-                <h4>Drop them into your application, website, or custom cards and control their size, color, drop shadow, or any dimension just as you would with any text!</h4>
+                <h4>Drop them into your application, website, or custom cards and control their size, color, drop shadow, or any dimension just as you would with text!</h4>
             </section>
-            <section>
+            <section class="content">
                 <h2>Using Keyrune</h2>
                 <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>
+                <blockquote>
+                    &lt;link href="css/keyrune.css" rel="stylesheet" type="text/css" /&gt;</blockquote>
+            </section>
+            <section class="content">
+                <h2>Editing the Source</h2>
+                <p>Feel free to edit the source files and compile Keyrune to fit your needs. All SVG glyphs are compiled into font files using the wonderful <a href="http://icomoon.io">IcoMoon</a> app. For styling, currently LESS is supported with Sass coming soon.</p>
+            </section>
+            <section class="content">
+                <h2>License</h2>
+                <p>All set symbol images are copyright Wizards of the Coast (<a href="http://magicthegathering.com">http://magicthegathering.com</a>)</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>
+                <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>
+                <p>Attribution is <strong>greatly appreciated</strong> but not required!</p>
             </section>
         </div>
     </main>