craftingguide/website
1
0
Fork 0
Code Pull Requests Actions Activity

Switch to Silkscreen for pixel font

Browse Source
This commit is contained in:
Andrew Miner
2015-02-02 12:05:22 -08:00
parent 54997a2c89
commit 04014356f4
12 changed files with 47 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gruntfile.coffee
+1 -1
View File
@@ -50,7 +50,7 @@ module.exports = (grunt)->
data_images: data_images:
files: [expand:true, cwd:'./src/data', src:'**/*.png', dest:'./dist/data'] files: [expand:true, cwd:'./src/data', src:'**/*.png', dest:'./dist/data']
fonts: fonts:
files: [expand:true, cwd:'./src/fonts', src:'**/*.ttf', dest:'./dist/fonts'] files: [expand:true, cwd:'./src/fonts', src:['**/*.ttf', '**/*.woff'], dest:'./dist/fonts']
images: images:
files: [expand:true, cwd:'./src/images/', src:['**/*.png', '**/*.jpg'], dest:'./dist/images'] files: [expand:true, cwd:'./src/images/', src:['**/*.png', '**/*.jpg'], dest:'./dist/images']
jquery_ui_images: jquery_ui_images:
src/css/main.scss
+13 -6
View File
@@ -17,21 +17,28 @@ All rights reserved.
src: url('/fonts/press_start.ttf') format('truetype'); src: url('/fonts/press_start.ttf') format('truetype');
} }
@font-face {
font-family: 'Silkscreen';
font-style: normal;
font-weight: 400;
src: url('/fonts/silkscreen.ttf') format('truetype');
}
// Constants /////////////////////////////////////////////////////////////////////////////////////////////////////////// // Constants ///////////////////////////////////////////////////////////////////////////////////////////////////////////
// Font Faces ////////////////////////////////////////////////////////////////////////////////////// // Font Faces //////////////////////////////////////////////////////////////////////////////////////
$font-family-header: 'PressStart'; $font-family-header: 'Silkscreen';
$font-family-normal: sans-serif; $font-family-normal: sans-serif;
$font-family-input: monospace; $font-family-input: monospace;
// Font Sizes ////////////////////////////////////////////////////////////////////////////////////// // Font Sizes //////////////////////////////////////////////////////////////////////////////////////
$font-size-small: 1.2em; $font-size-small: 1.0em;
$font-size-normal: 1.3em; $font-size-normal: 1.5em;
$font-size-large: 1.6em; $font-size-large: 2.0em;
$font-size-x-large: 2.0em; $font-size-x-large: 2.5em;
$font-size-xx-large: 3.0em; $font-size-xx-large: 4.0em;
// Gray Palette //////////////////////////////////////////////////////////////////////////////////// // Gray Palette ////////////////////////////////////////////////////////////////////////////////////
src/css/tags.scss
+12 -10
View File
@@ -29,36 +29,38 @@ button {
h1 { h1 {
margin-bottom: 1em; margin-bottom: 1em;
* { display: inline; } & > * {
display: inline-block;
vertical-align: middle;
}
img { img {
position: relative; height: 10em; width: 10em; height: 6.4em; width: 6.4em;
margin-right: 1em; margin-right: 1em;
vertical-align: bottom;
} }
p { p {
font-family: $font-family-header; font-family: $font-family-header;
font-size: $font-size-x-large; font-size: $font-size-xx-large;
position: relative; top: -0.5em;
} }
} }
h2 { h2 {
margin-bottom: 0.5em; margin-bottom: 0.5em;
* { display: inline; } & > * {
display: inline-block;
vertical-align: middle;
}
img { img {
position: relative; height: 3.2em; width: 3.2em; height: 3.2em; width: 3.2em;
margin-right: 1em; margin-right: 1em;
vertical-align: bottom;
} }
p { p {
font-family: $font-family-header; font-family: $font-family-header;
font-size: $font-size-large; font-size: $font-size-x-large;
position: relative; top: -0.25em;
} }
} }
src/css/templates/crafting_table.scss
-7
View File
@@ -13,13 +13,6 @@ All rights reserved.
position: absolute; top: 3.6em; right: 2em; bottom: 0; left: 2em; position: absolute; top: 3.6em; right: 2em; bottom: 0; left: 2em;
background: $color-background-panel; background: $color-background-panel;
.multiplier {
position: absolute; bottom: -3em; left: 0; right: 0; height: 1.5em;
font-family: PressStart;
font-size: $font-size-large;
text-align: center;
}
.next { .next {
background: url('/images/arrow-right-disabled.png'); background: url('/images/arrow-right-disabled.png');
position: absolute; top: 50%; right: 1em; height: 8em; width: 4em; position: absolute; top: 50%; right: 1em; height: 8em; width: 4em;
src/css/templates/feedback.scss
+2 -2
View File
@@ -54,8 +54,8 @@ All rights reserved.
position: absolute; top: 50%; left: 50%; position: absolute; top: 50%; left: 50%;
@include transform(translateX(-50%) rotate(-90deg)); @include transform(translateX(-50%) rotate(-90deg));
font-family: PressStart; font-family: $font-family-header;
font-size: $font-size-large; font-size: $font-size-x-large;
} }
} }
src/css/templates/mod.scss
+5 -8
View File
@@ -7,24 +7,21 @@ All rights reserved.
.view__mod { .view__mod {
position: relative; width: 100%; position: relative; width: 100%;
padding: 1em; display: table-row;
div, p { div, p {
display: inline-block; display: table-cell;
padding: 0.4em;
} }
.version { .version {
position: relative; width: 10em; width: 10em;
margin-right: 1em;
} }
.name { .name {
position: relative; width: 15em; width: 18em;
margin-right: 1em;
p { p {
font-family: $font-family-normal;
font-size: $font-size-normal;
text-decoration: underline; text-decoration: underline;
} }
} }
src/css/templates/mod_pack.scss
+1
View File
@@ -13,6 +13,7 @@ All rights reserved.
.mods { .mods {
position: relative; width: 100%; position: relative; width: 100%;
padding: 1em;
} }
.panel { .panel {
src/css/templates/recipe.scss
+3 -3
View File
@@ -34,8 +34,8 @@ All rights reserved.
} }
.multiplier { .multiplier {
position: absolute; bottom: -3em; left: 0; right: 0; height: 1.5em; position: absolute; bottom: -2.0em; left: 0; right: 0; height: 1.5em;
font-family: PressStart; font-family: $font-family-header;
font-size: $font-size-large; font-size: $font-size-large;
text-align: center; text-align: center;
} }
@@ -43,7 +43,7 @@ All rights reserved.
.quantity { .quantity {
position: absolute; right: 0.1em; bottom: 0.1em; position: absolute; right: 0.1em; bottom: 0.1em;
color: white; color: white;
font-family: PressStart; font-family: $font-family-header;
font-size: $font-size-large; font-size: $font-size-large;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
} }
src/css/templates/stack.scss
+1 -2
View File
@@ -16,8 +16,7 @@ All rights reserved.
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
min-width: 3em; min-width: 3em;
padding: 0.2em 0.5em 0.1em 0.5em; padding: 0.1em 0.5em;
height: $font-size-small + 0.2em;
} }
.name p { .name p {
src/css/views.scss
+6 -32
View File
@@ -24,30 +24,10 @@ All rights reserved.
} }
.left, .center, .right { .left, .center, .right {
position: relative; width: 33%; height: 22em; position: relative; width: 33%; height: 23em;
float: left; float: left;
padding: 2em; padding: 2em;
p {
font-family: sans-serif;
font-size: $font-size-small;
line-height: $font-size-small + 0.2em;
padding-bottom: 1.0em;
&:last-child {
padding-bottom: 0;
}
}
h2 {
padding-bottom: 1.0em;
p {
font-family: $font-family-header;
font-size: 1.5em;
}
}
.action { .action {
position: absolute; bottom: 3em; left: 50%; position: absolute; bottom: 3em; left: 50%;
@include transform(translateX(-50%)); @include transform(translateX(-50%));
@@ -64,18 +44,12 @@ All rights reserved.
position: relative; height: 8em; position: relative; height: 8em;
margin-top: 3.2em; margin-top: 3.2em;
a {
position: absolute; left: -1.6em; top: -1.6em;
img {
width: 6.4em; height: 6.4em;
}
}
h1 { h1 {
position: absolute; top: 0.8em; left: 3.2em; position: relative; top: -1.6em; left: -1.6em;
font-family: PressStart;
font-size: $font-size-x-large; p {
position: relative; top: 0.2em;
}
} }
.divider { .divider {
src/fonts/silkscreen.ttf
Executable
BIN
View File
Binary file not shown.
src/pages/includes/_header.jade
+3 -2
View File
@@ -6,6 +6,7 @@
//- //-
.view__header .view__header
a.logo(href="/"): img(src="/images/workbench_front.png") h1
h1 Crafting Guide for Minecraft a.logo(href="/"): img(src="/images/workbench_front.png")
p Crafting Guide for Minecraft
.divider.bottom .divider.bottom