diff --git a/Gruntfile.coffee b/Gruntfile.coffee index b3831729a..f2819fe7d 100644 --- a/Gruntfile.coffee +++ b/Gruntfile.coffee @@ -50,7 +50,7 @@ module.exports = (grunt)-> data_images: files: [expand:true, cwd:'./src/data', src:'**/*.png', dest:'./dist/data'] 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: files: [expand:true, cwd:'./src/images/', src:['**/*.png', '**/*.jpg'], dest:'./dist/images'] jquery_ui_images: diff --git a/src/css/main.scss b/src/css/main.scss index 04bc2b1c1..2e943ce51 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -17,21 +17,28 @@ All rights reserved. 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 /////////////////////////////////////////////////////////////////////////////////////////////////////////// // Font Faces ////////////////////////////////////////////////////////////////////////////////////// -$font-family-header: 'PressStart'; +$font-family-header: 'Silkscreen'; $font-family-normal: sans-serif; $font-family-input: monospace; // Font Sizes ////////////////////////////////////////////////////////////////////////////////////// -$font-size-small: 1.2em; -$font-size-normal: 1.3em; -$font-size-large: 1.6em; -$font-size-x-large: 2.0em; -$font-size-xx-large: 3.0em; +$font-size-small: 1.0em; +$font-size-normal: 1.5em; +$font-size-large: 2.0em; +$font-size-x-large: 2.5em; +$font-size-xx-large: 4.0em; // Gray Palette //////////////////////////////////////////////////////////////////////////////////// diff --git a/src/css/tags.scss b/src/css/tags.scss index f612593c1..d986fbbcb 100644 --- a/src/css/tags.scss +++ b/src/css/tags.scss @@ -29,36 +29,38 @@ button { h1 { margin-bottom: 1em; - * { display: inline; } + & > * { + display: inline-block; + vertical-align: middle; + } img { - position: relative; height: 10em; width: 10em; + height: 6.4em; width: 6.4em; margin-right: 1em; - vertical-align: bottom; } p { font-family: $font-family-header; - font-size: $font-size-x-large; - position: relative; top: -0.5em; + font-size: $font-size-xx-large; } } h2 { margin-bottom: 0.5em; - * { display: inline; } + & > * { + display: inline-block; + vertical-align: middle; + } img { - position: relative; height: 3.2em; width: 3.2em; + height: 3.2em; width: 3.2em; margin-right: 1em; - vertical-align: bottom; } p { font-family: $font-family-header; - font-size: $font-size-large; - position: relative; top: -0.25em; + font-size: $font-size-x-large; } } diff --git a/src/css/templates/crafting_table.scss b/src/css/templates/crafting_table.scss index 375d57383..81b35558d 100644 --- a/src/css/templates/crafting_table.scss +++ b/src/css/templates/crafting_table.scss @@ -13,13 +13,6 @@ All rights reserved. position: absolute; top: 3.6em; right: 2em; bottom: 0; left: 2em; 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 { background: url('/images/arrow-right-disabled.png'); position: absolute; top: 50%; right: 1em; height: 8em; width: 4em; diff --git a/src/css/templates/feedback.scss b/src/css/templates/feedback.scss index cc7965adf..21f5dbf38 100644 --- a/src/css/templates/feedback.scss +++ b/src/css/templates/feedback.scss @@ -54,8 +54,8 @@ All rights reserved. position: absolute; top: 50%; left: 50%; @include transform(translateX(-50%) rotate(-90deg)); - font-family: PressStart; - font-size: $font-size-large; + font-family: $font-family-header; + font-size: $font-size-x-large; } } diff --git a/src/css/templates/mod.scss b/src/css/templates/mod.scss index 0538e3a3c..1e002d6a5 100644 --- a/src/css/templates/mod.scss +++ b/src/css/templates/mod.scss @@ -7,24 +7,21 @@ All rights reserved. .view__mod { position: relative; width: 100%; - padding: 1em; + display: table-row; div, p { - display: inline-block; + display: table-cell; + padding: 0.4em; } .version { - position: relative; width: 10em; - margin-right: 1em; + width: 10em; } .name { - position: relative; width: 15em; - margin-right: 1em; + width: 18em; p { - font-family: $font-family-normal; - font-size: $font-size-normal; text-decoration: underline; } } diff --git a/src/css/templates/mod_pack.scss b/src/css/templates/mod_pack.scss index 761eda5f3..a50f29d2a 100644 --- a/src/css/templates/mod_pack.scss +++ b/src/css/templates/mod_pack.scss @@ -13,6 +13,7 @@ All rights reserved. .mods { position: relative; width: 100%; + padding: 1em; } .panel { diff --git a/src/css/templates/recipe.scss b/src/css/templates/recipe.scss index 146ed931a..ed868582a 100644 --- a/src/css/templates/recipe.scss +++ b/src/css/templates/recipe.scss @@ -34,8 +34,8 @@ All rights reserved. } .multiplier { - position: absolute; bottom: -3em; left: 0; right: 0; height: 1.5em; - font-family: PressStart; + position: absolute; bottom: -2.0em; left: 0; right: 0; height: 1.5em; + font-family: $font-family-header; font-size: $font-size-large; text-align: center; } @@ -43,7 +43,7 @@ All rights reserved. .quantity { position: absolute; right: 0.1em; bottom: 0.1em; color: white; - font-family: PressStart; + font-family: $font-family-header; font-size: $font-size-large; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; } diff --git a/src/css/templates/stack.scss b/src/css/templates/stack.scss index 852741fda..2e729e557 100644 --- a/src/css/templates/stack.scss +++ b/src/css/templates/stack.scss @@ -16,8 +16,7 @@ All rights reserved. font-weight: bold; text-align: center; min-width: 3em; - padding: 0.2em 0.5em 0.1em 0.5em; - height: $font-size-small + 0.2em; + padding: 0.1em 0.5em; } .name p { diff --git a/src/css/views.scss b/src/css/views.scss index e4b77b2ea..47dbd1a07 100644 --- a/src/css/views.scss +++ b/src/css/views.scss @@ -24,30 +24,10 @@ All rights reserved. } .left, .center, .right { - position: relative; width: 33%; height: 22em; + position: relative; width: 33%; height: 23em; float: left; 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 { position: absolute; bottom: 3em; left: 50%; @include transform(translateX(-50%)); @@ -64,18 +44,12 @@ All rights reserved. position: relative; height: 8em; margin-top: 3.2em; - a { - position: absolute; left: -1.6em; top: -1.6em; - - img { - width: 6.4em; height: 6.4em; - } - } - h1 { - position: absolute; top: 0.8em; left: 3.2em; - font-family: PressStart; - font-size: $font-size-x-large; + position: relative; top: -1.6em; left: -1.6em; + + p { + position: relative; top: 0.2em; + } } .divider { diff --git a/src/fonts/silkscreen.ttf b/src/fonts/silkscreen.ttf new file mode 100755 index 000000000..e2dd974b1 Binary files /dev/null and b/src/fonts/silkscreen.ttf differ diff --git a/src/pages/includes/_header.jade b/src/pages/includes/_header.jade index 967f4d7ec..0aa1d53ca 100644 --- a/src/pages/includes/_header.jade +++ b/src/pages/includes/_header.jade @@ -6,6 +6,7 @@ //- .view__header - a.logo(href="/"): img(src="/images/workbench_front.png") - h1 Crafting Guide for Minecraft + h1 + a.logo(href="/"): img(src="/images/workbench_front.png") + p Crafting Guide for Minecraft .divider.bottom