Refresh of project page layout and some initial copy

css/main.css

@@ -1,3 +1,13 @@
+@font-face {
+    font-family: 'Beleren';
+    src: url( '../fonts/Beleren.eot' );
+    src: url( '../fonts/Beleren.woff' ) format( 'woff' ),
+         url( '../fonts/Beleren.ttf' ) format( 'truetype' ),
+         url( '../fonts/Beleren.svg' ) format( 'svg' );
+    font-weight: normal;
+    font-style: normal;
+ }
+
 body {
     background: #fff;
     color: #333;
@@ -8,8 +18,138 @@ body {
     padding: 0;
 }
 
+.wrapper {
+    max-width: 1080px;
+    width: 80%;
+    margin: 0 auto;
+}
+
+a {
+     color: #008eae;
+     text-decoration: none;
+ }
+
+     a:hover {
+         color: #166075;
+     }
+
+section#banner {
+    background: #D5D2C8;
+    color: #555;
+    padding: 10px 0;
+    text-align: right;
+    text-shadow: 0 1px 0 #E6E2D7;
+}
+
+    section#banner .item {
+        display: inline-block;
+        margin-left: 15px;
+    }
+
 header {
     background: #E6E2D7;
+    border-bottom: 1px solid #CFCDC7;
     color: #333;
     margin: 0;
+    padding: 20px 0 15px;
+}
+
+    .bigicon {
+        float: right;
+        font-size: 240px;
+        line-height: 200px;
+        text-shadow: 0 2px 0 #fff;
+    }
+
+    header .vs {
+        margin-left: 5px;
+    }
+
+p {
+    line-height: 1.5em;
+    margin: 20px 0;
+}
+
+h1 {
+    color: #444;
+    margin: 0;
+    font-family: Beleren;
+    font-size: 64px;
+    font-weight: lighter;
+    padding: 0 0 15px;
+    text-shadow: 0 2px 0 #fff;
+}
+
+h2 {
+    color: #444;
+    font-family: Beleren;
+    font-size: 30px;
+    font-weight: lighter;
+    margin: 0;
+    padding: 0 0 30px;
+    text-shadow: 0 1px 0 #fff;
+}
+
+h3 {
+    color: #333;
+    font-size: 20px;
+    font-weight: normal;
+    margin: 15px 0 10px;
+}
+
+h4 {
+    color: #444;
+    font-size: 18px;
+    font-weight: normal;
+    line-height: 1.6em;
+}
+
+main {
+    margin: 0;
+    padding: 20px 0 25px;
+}
+
+    main h2 {
+        font-size: 24px;
+        margin: 30px 0 0;
+        padding: 0 0 5px;
+    }
+
+.button {
+    background: #008eae;
+    border-bottom: 2px solid #166075;
+    color: #fff;
+    display: inline-block;
+    font-size: 20px;
+    padding: 10px 18px 9px;
+    border-radius: 4px;
+    text-shadow: 0 1px 0 #333;
+}
+
+    .button:hover {
+        background: #00809F;
+        border-bottom-color: #155A6E;
+        color: #fff;
+    }
+
+    .button .ss {
+        margin-right: 5px;
+        position: relative;
+        top: -2px;
+    }
+
+    .button.vs {
+        background: #666;
+        border-bottom-color: #333;
+    }
+
+        .button.vs:hover {
+            background: #555;
+            border-bottom-color: #222;
+        }
+
+footer {
+    border-top: 1px solid #eee;
+    margin-top: 20px;
+    padding: 30px 0 50px;
 }

css/pygment_trac.css

@@ -1,69 +0,0 @@
-.highlight  { background: #ffffff; }
-.highlight .c { color: #999988; font-style: italic } /* Comment */
-.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
-.highlight .k { font-weight: bold } /* Keyword */
-.highlight .o { font-weight: bold } /* Operator */
-.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
-.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
-.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
-.highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #aa0000 } /* Generic.Error */
-.highlight .gh { color: #999999 } /* Generic.Heading */
-.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
-.highlight .go { color: #888888 } /* Generic.Output */
-.highlight .gp { color: #555555 } /* Generic.Prompt */
-.highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */
-.highlight .gt { color: #aa0000 } /* Generic.Traceback */
-.highlight .kc { font-weight: bold } /* Keyword.Constant */
-.highlight .kd { font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
-.highlight .kr { font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
-.highlight .m { color: #009999 } /* Literal.Number */
-.highlight .s { color: #d14 } /* Literal.String */
-.highlight .na { color: #008080 } /* Name.Attribute */
-.highlight .nb { color: #0086B3 } /* Name.Builtin */
-.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
-.highlight .no { color: #008080 } /* Name.Constant */
-.highlight .ni { color: #800080 } /* Name.Entity */
-.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
-.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
-.highlight .nn { color: #555555 } /* Name.Namespace */
-.highlight .nt { color: #000080 } /* Name.Tag */
-.highlight .nv { color: #008080 } /* Name.Variable */
-.highlight .ow { font-weight: bold } /* Operator.Word */
-.highlight .w { color: #bbbbbb } /* Text.Whitespace */
-.highlight .mf { color: #009999 } /* Literal.Number.Float */
-.highlight .mh { color: #009999 } /* Literal.Number.Hex */
-.highlight .mi { color: #009999 } /* Literal.Number.Integer */
-.highlight .mo { color: #009999 } /* Literal.Number.Oct */
-.highlight .sb { color: #d14 } /* Literal.String.Backtick */
-.highlight .sc { color: #d14 } /* Literal.String.Char */
-.highlight .sd { color: #d14 } /* Literal.String.Doc */
-.highlight .s2 { color: #d14 } /* Literal.String.Double */
-.highlight .se { color: #d14 } /* Literal.String.Escape */
-.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
-.highlight .si { color: #d14 } /* Literal.String.Interpol */
-.highlight .sx { color: #d14 } /* Literal.String.Other */
-.highlight .sr { color: #009926 } /* Literal.String.Regex */
-.highlight .s1 { color: #d14 } /* Literal.String.Single */
-.highlight .ss { color: #990073 } /* Literal.String.Symbol */
-.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #008080 } /* Name.Variable.Class */
-.highlight .vg { color: #008080 } /* Name.Variable.Global */
-.highlight .vi { color: #008080 } /* Name.Variable.Instance */
-.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
-
-.type-csharp .highlight .k { color: #0000FF }
-.type-csharp .highlight .kt { color: #0000FF }
-.type-csharp .highlight .nf { color: #000000; font-weight: normal }
-.type-csharp .highlight .nc { color: #2B91AF }
-.type-csharp .highlight .nn { color: #000000 }
-.type-csharp .highlight .s { color: #A31515 }
-.type-csharp .highlight .sc { color: #A31515 }

index.html

@@ -10,19 +10,60 @@
 </head>
 <body>
 
+    <section id="banner">
+        <div class="wrapper">
+            <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">
+                Created by
+                <a href="http://andrewgioia.com">Andrew Gioia</a>
+            </span>
+        </div>
+    </section>
+
     <header>
-        Header
+        <div class="wrapper">
+            <div class="bigicon">
+                <i class="ss ss-leg"></i>
+            </div>
+            <h1>Keyrune</h1>
+            <h2>Magic: the Gathering set symbol font</h2>
+            <div class="actions">
+                <a class="dl button" href="http://github.com/andrewgioia/Keyrune">
+                    <i class="ss ss-pmtg2"></i>
+                    Download
+                </a>
+                <a class="vs button" href="icons.html">
+                    <i class="ss ss-mmq"></i>
+                    View Set Icons
+                </a>
+            </div>
+            <p>
+                Current version 0.1 includes all sets to Fate Reforged.
+            </p>
+        </div>
     </header>
 
     <main>
-        <section>
+        <div class="wrapper">
-            <p>Main body</p>
+            <section>
-            <p>Tempest: <i class="ss ss-tmp"></i></p>
+                <h3>Keyrune is a complete set of <strong>scalable vector icons</strong> for Magic set symbols.</h3>
-        </section>
+                <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>
+            </section>
+            <section>
+                <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>
+            </section>
+        </div>
     </main>
 
     <footer>
-        Footer
+        <div class="wrapper">
+            Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
+        </div>
     </footer>
 
 </body>