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
src/css/main.scss
+13 -6
View File
@@ -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 ////////////////////////////////////////////////////////////////////////////////////
src/css/tags.scss
+12 -10
View File
@@ -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;
}
}
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;
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;
src/css/templates/feedback.scss
+2 -2
View File
@@ -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;
}
}
src/css/templates/mod.scss
+5 -8
View File
@@ -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;
}
}
src/css/templates/mod_pack.scss
+1
View File
@@ -13,6 +13,7 @@ All rights reserved.
.mods {
position: relative; width: 100%;
padding: 1em;
}
.panel {
src/css/templates/recipe.scss
+3 -3
View File
@@ -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;
}
src/css/templates/stack.scss
+1 -2
View File
@@ -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 {
src/css/views.scss
+6 -32
View File
@@ -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 {