Refresh of project page layout and some initial copy
This commit is contained in:
Andrew Gioia
parent
97f9bc966c
commit
0d82d3a4db
140
css/main.css
140
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 219 KiB |
Binary file not shown.
Binary file not shown.
53
index.html
53
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>
|
||||
<p>Main body</p>
|
||||
<p>Tempest: <i class="ss ss-tmp"></i></p>
|
||||
</section>
|
||||
<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>
|
||||
</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><i class="ss ss-exp"></i></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><head></code>:</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
Footer
|
||||
<div class="wrapper">
|
||||
Made with ♥ by <a href="http://andrewgioia.com">Andrew Gioia</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue