Refresh of project page layout and some initial copy

This commit is contained in:
Andrew Gioia 2015-03-14 20:40:19 -04:00
parent 97f9bc966c
commit 0d82d3a4db
8 changed files with 3821 additions and 75 deletions

View File

@ -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 { body {
background: #fff; background: #fff;
color: #333; color: #333;
@ -8,8 +18,138 @@ body {
padding: 0; 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 { header {
background: #E6E2D7; background: #E6E2D7;
border-bottom: 1px solid #CFCDC7;
color: #333; color: #333;
margin: 0; 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;
} }

View File

@ -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 }

BIN
fonts/beleren.eot Executable file

Binary file not shown.

BIN
fonts/beleren.otf Executable file

Binary file not shown.

3634
fonts/beleren.svg Executable file

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 219 KiB

BIN
fonts/beleren.ttf Executable file

Binary file not shown.

BIN
fonts/beleren.woff Executable file

Binary file not shown.

View File

@ -10,19 +10,60 @@
</head> </head>
<body> <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>
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> </header>
<main> <main>
<div class="wrapper">
<section> <section>
<p>Main body</p> <h3>Keyrune is a complete set of <strong>scalable vector icons</strong> for Magic set symbols.</h3>
<p>Tempest: <i class="ss ss-tmp"></i></p> <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>
<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> </main>
<footer> <footer>
Footer <div class="wrapper">
Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
</div>
</footer> </footer>
</body> </body>