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

Added CraftingTable* components and UI

Browse Source
This commit is contained in:
Andrew Miner
2014-12-23 20:26:36 -08:00
parent b05fc4c5c9
commit 95c15abe10
30 changed files with 866 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/main.scss
+59 -18
View File
@@ -8,17 +8,6 @@ All rights reserved.
@import 'mixins';
@import 'reset';
// Constants ///////////////////////////////////////////////////////////////////////////////////////////////////////////
$color-background: #AAC9FF;
$color-bedrock: #0A0A0A;
$color-content: rgba(230, 230, 230, 0.90);
$color-brick-dark: #7A7A7A;
$color-brick-light: #D9D9D9;
$color-footer: #3D1D09;
$color-footer-text: white;
$color-dirt: #906647;
// Fonts ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
@font-face {
@@ -28,6 +17,29 @@ $color-dirt: #906647;
src: url('/fonts/press_start.ttf') format('truetype');
}
// Constants ///////////////////////////////////////////////////////////////////////////////////////////////////////////
$color-background: #AAC9FF;
$color-bedrock: #0A0A0A;
$color-brick-dark: #7A7A7A;
$color-brick-light: #D9D9D9;
$color-content: rgba(230, 230, 230, 0.90);
$color-dirt: #906647;
$color-footer: #3D1D09;
$color-footer-text: white;
$color-gray-faint: #F2F2F2;
$color-gray-light: #CCCCCC;
$color-table-background: white;
$font-family-header: 'PressStart';
$font-family-normal: sans-serif;
$font-family-input: monospace;
$font-size-small: 1.1em;
$font-size-normal: 1.3em;
$font-size-large: 2.0em;
$font-size-x-large: 3.0em;
// Common //////////////////////////////////////////////////////////////////////////////////////////////////////////////
body {
@@ -47,8 +59,8 @@ h1 {
}
p {
font-family: PressStart;
font-size: 3em;
font-family: $font-family-header;
font-size: $font-size-x-large;
position: relative; top: -0.5em;
}
}
@@ -59,18 +71,40 @@ h2 {
* { display: inline; }
img {
position: relative; height: 6em; width: 6em;
position: relative; height: 4em; width: 4em;
margin-right: 1em;
vertical-align: bottom;
}
p {
font-family: PressStart;
font-size: 2em;
font-family: $font-family-header;
font-size: $font-size-large;
position: relative; top: -0.25em;
}
}
h3 {
font-family: $font-family-normal;
font-weight: bold;
p { font-size: $font-size-normal; }
}
p {
font-family: $font-family-normal;
font-size: $font-size-normal;
}
input {
font-family: $font-family-input;
font-size: $font-size-normal;
}
label {
font-family: $font-family-normal;
font-size: $font-size-normal;
}
.centered {
text-align: center;
}
@@ -84,6 +118,13 @@ h2 {
width: 100%;
}
.page > div {
position: relative; width: 100%;
padding: 2em 2em 0 2em;
&:first-child { padding-top: 0; }
}
// Views ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
.view__footer {
@@ -111,7 +152,7 @@ h2 {
p {
font-family: sans-serif;
font-size: 1.25em;
font-size: $font-size-small;
padding-bottom: 1.0em;
&:last-child {
@@ -123,7 +164,7 @@ h2 {
padding-bottom: 1.0em;
p {
font-family: PressStart;
font-family: $font-family-header;
font-size: 1.5em;
}
}
src/css/reset.scss
+1 -1
View File
@@ -1,4 +1,4 @@
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp {
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp {
border: 0;
margin: 0;
padding: 0;
src/css/templates/crafting_table.scss
+45
View File
@@ -0,0 +1,45 @@
/*
Crafting Table - crafting_table.scss
Copyright (c) 2014 by Redwood Labs
All rights reserved.
*/
.view__crafting_table {
.recipe_selector {
background: $color-table-background;
padding: 1em;
position: relative; width: 100%;
& > * {
display: inline;
margin-left: 0.5em;
&:first-child { margin-left: 0; }
}
input[type="checkbox"] + label { margin-left: 0; }
input[name="name"] { width: 60%; }
}
h3 {
margin-bottom: 0.5em;
}
table {
background: white;
width: 100%;
td { padding: 0 1em 1em 1em; width: 33%; }
}
textarea, ul {
border: 0.1em solid $color-gray-light;
width: 100%;
height: 100%;
min-height: 6em;
padding: 0.2em;
}
}
src/css/templates/index.scss
+1
View File
@@ -5,4 +5,5 @@ Copyright (c) 2014 by Redwood Labs
All rights reserved.
*/
@import 'crafting_table';
@import 'recipe_catalog';
src/css/templates/recipe_catalog.scss
+4 -7
View File
@@ -6,9 +6,6 @@ All rights reserved.
*/
.view__recipe_catalog {
position: relative; width: 100%;
padding: 0 2em;
button {
@include center-vertical;
position: absolute; right: 1em;
@@ -19,12 +16,12 @@ All rights reserved.
table {
background: white;
margin: 0 auto;
width: 98%;
width: 100%;
td {
height: 3em; padding: 0 1em; position: relative; vertical-align: middle;
p { font-size: 1.5em; }
position: relative; height: 2 * $font-size-normal;
padding: 0 1em;
vertical-align: middle;
}
td:nth-child(1) { width: 30%; }