diff --git a/css/main.css b/css/main.css index 4ccc8d7..aa7eccd 100644 --- a/css/main.css +++ b/css/main.css @@ -46,6 +46,14 @@ section#banner { margin-left: 15px; } + section#banner .logo { + color: #333; + float: left; + font-family: Beleren; + font-size: 18px; + margin-top: -2px; + } + header { background: #E6E2D7; border-bottom: 1px solid #CFCDC7; @@ -78,9 +86,14 @@ h1 { font-size: 64px; font-weight: lighter; padding: 0 0 20px; - text-shadow: 0 2px 0 #fff; + text-shadow: 0 1px 0 #fff; } + h1.sub { + font-size: 48px; + padding: 0 0 15px; + } + h2 { color: #444; font-family: Beleren; @@ -91,7 +104,21 @@ h2 { text-shadow: 0 1px 0 #fff; } + h2.sub { + font-size: 26px; + padding: 0 0 20px; + } + h3 { + color: #444; + font-size: 19px; + font-weight: normal; + line-height: 1.6em; + padding-bottom: 20px; + text-align: left; +} + +h4 { color: #61605B; font-family: Beleren; font-size: 24px; @@ -100,26 +127,13 @@ h3 { text-align: left; } -h4 { - color: #444; - font-size: 18px; - font-weight: normal; - line-height: 1.6em; - text-align: left; -} - main { margin: 0; padding: 20px 0 25px; } main section.content { - padding: 10px 0 10px; - } - - main h2 { - font-size: 24px; - padding: 0 0 5px; + padding: 0 0 10px; } blockquote, @@ -168,8 +182,46 @@ blockquote { border-bottom-color: #222; } + .button.dl.float-right { + margin-top: -10px; + } + +.icons { + padding: 10px 0 0; +} + +.icon { + border-radius: 3px; + display: inline-block; + width: 24.5%; +} + + .icon span { + display: inline-block; + padding: 10px 15px; + } + + .icon:hover { + background: #eee; + } + + .icon .ss { + font-size: 22px; + margin-right: 5px; + margin-top: -2px; + } + + .icon em { + color: #999; + font-style: normal; + } + footer { border-top: 1px solid #eee; margin-top: 20px; padding: 30px 0 50px; } + +.float-right { + float: right; +} diff --git a/icons.html b/icons.html new file mode 100644 index 0000000..2bf41e4 --- /dev/null +++ b/icons.html @@ -0,0 +1,112 @@ + + +
+ + +Each set symbol has its own font character. Display them in a manner similar to Font Awesome using the <i class="ss ss-exp"></i>
element. Class name codes are based on the expansion codes from MTG JSON.
To use Keyrune, move the font files to your /fonts directory and include the keyrune.css
stylesheet in your <head>
:
<link href="css/keyrune.css" rel="stylesheet" type="text/css" />
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 IcoMoon app. For styling, currently LESS is supported with Sass coming soon.
All set symbol images are copyright Wizards of the Coast (http://magicthegathering.com)
The Keyrune font is licensed under the the SIL OFL 1.1 (http://scripts.sil.org/OFL)
Keyrune CSS, LESS, and Sass files are licensed under the MIT License (http://opensource.org/licenses/mit-license.html)