diff --git a/src/css/classes.scss b/src/css/classes.scss new file mode 100644 index 000000000..4ea6421b6 --- /dev/null +++ b/src/css/classes.scss @@ -0,0 +1,23 @@ +/* +Crafting Guide - classes.scss + +Copyright (C) 2015 by Redwood Labs +All rights reserved. +*/ + +.centered { + text-align: center; +} + +.content { + background: $color-content; + box-shadow: 10px 10px 20px #666; + margin: 2em auto; + max-width: 96em; + position: relative; + width: 100%; +} + +.error { background: $color-error; } + +.error-new { background: $color-error-new; } diff --git a/src/css/main.scss b/src/css/main.scss index f0868f76c..c13a335a7 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -70,173 +70,10 @@ $layer-normal: 0; $layer-screen: 5; $layer-dialog: 10; -// Common ////////////////////////////////////////////////////////////////////////////////////////////////////////////// - -body { - background: $color-background url('/images/ice.png'); - font-size: 10px; -} - -button { - background: $color-gray-faint; - border: 0.1em solid $color-gray-medium; - border-radius: 1em; - color: $color-active; - cursor: pointer; - font-size: $font-size-normal; - font-weight: bold; - padding: 0.1em 1em; - - &:hover { - background: white; - color: $color-active-hover; - } -} - -h1 { - margin-bottom: 1em; - - * { display: inline; } - - img { - position: relative; height: 10em; width: 10em; - margin-right: 1em; - vertical-align: bottom; - } - - p { - font-family: $font-family-header; - font-size: $font-size-xx-large; - position: relative; top: -0.5em; - } -} - -h2 { - margin-bottom: 1em; - - * { display: inline; } - - img { - position: relative; height: 4em; width: 4em; - margin-right: 1em; - vertical-align: bottom; - } - - p { - font-family: $font-family-header; - font-size: $font-size-x-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; -} - -.content { - background: $color-content; - box-shadow: 10px 10px 20px #666; - margin: 2em auto; - max-width: 96em; - position: relative; - width: 100%; -} - -.error { background: $color-error; } - -.error-new { background: $color-error-new; } - -// Views /////////////////////////////////////////////////////////////////////////////////////////////////////////////// - -.view__footer { - background: $color-footer; - color: $color-footer-text; - margin-top: 2em; - - a { - color: $color-footer-text; - } - - .divider { - position: relative; height: 3.2em; width: 100%; - clear: both; - } - - .divider.top { - background: $color-dirt url('/images/grass_side.png'); - } - - .left, .center, .right { - position: relative; width: 33%; - float: left; - padding: 2em; - - p { - font-family: sans-serif; - font-size: $font-size-small; - padding-bottom: 1.0em; - - &:last-child { - padding-bottom: 0; - } - } - - h2 { - padding-bottom: 1.0em; - - p { - font-family: $font-family-header; - font-size: 1.5em; - } - } - } - - .divider.bottom { - background: $color-bedrock url('/images/bedrock.png'); - } -} - -.view__header { - background: $color-brick-light url('/images/stone_brick_light.png'); - position: relative; height: 10em; - margin-top: 5em; - - h1 { position: relative; top: -3em; left: -3em; } - - .divider { - background: $color-brick-dark url('/images/stone_brick.png'); - position: absolute; bottom: 0; height: 3.2em; width: 100%; - } -} - -.view__screen { - position: fixed; top: 0; right: 0; bottom: 0; left: 0; - display: none; - z-index: $layer-screen; -} - // Child Stylesheets /////////////////////////////////////////////////////////////////////////////////////////////////// +@import 'classes'; +@import 'tags'; +@import 'views'; + @import 'templates/index'; diff --git a/src/css/tags.scss b/src/css/tags.scss new file mode 100644 index 000000000..4995c715a --- /dev/null +++ b/src/css/tags.scss @@ -0,0 +1,85 @@ +/* +Crafting Guide - tags.scss + +Copyright (C) 2015 by Redwood Labs +All rights reserved. +*/ + +body { + background: $color-background url('/images/ice.png'); + font-size: 10px; +} + +button { + background: $color-gray-faint; + border: 0.1em solid $color-gray-medium; + border-radius: 1em; + color: $color-active; + cursor: pointer; + font-size: $font-size-normal; + font-weight: bold; + padding: 0.1em 1em; + + &:hover { + background: white; + color: $color-active-hover; + } +} + +h1 { + margin-bottom: 1em; + + * { display: inline; } + + img { + position: relative; height: 10em; width: 10em; + margin-right: 1em; + vertical-align: bottom; + } + + p { + font-family: $font-family-header; + font-size: $font-size-xx-large; + position: relative; top: -0.5em; + } +} + +h2 { + margin-bottom: 1em; + + * { display: inline; } + + img { + position: relative; height: 4em; width: 4em; + margin-right: 1em; + vertical-align: bottom; + } + + p { + font-family: $font-family-header; + font-size: $font-size-x-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; +} \ No newline at end of file diff --git a/src/css/views.scss b/src/css/views.scss new file mode 100644 index 000000000..cabc425cb --- /dev/null +++ b/src/css/views.scss @@ -0,0 +1,73 @@ +/* +Crafting Guide - views.scss + +Copyright (c) 2015 by Redwood Labs +All rights reserved. +*/ + +.view__footer { + background: $color-footer; + color: $color-footer-text; + margin-top: 2em; + + a { + color: $color-footer-text; + } + + .divider { + position: relative; height: 3.2em; width: 100%; + clear: both; + } + + .divider.top { + background: $color-dirt url('/images/grass_side.png'); + } + + .left, .center, .right { + position: relative; width: 33%; + float: left; + padding: 2em; + + p { + font-family: sans-serif; + font-size: $font-size-small; + padding-bottom: 1.0em; + + &:last-child { + padding-bottom: 0; + } + } + + h2 { + padding-bottom: 1.0em; + + p { + font-family: $font-family-header; + font-size: 1.5em; + } + } + } + + .divider.bottom { + background: $color-bedrock url('/images/bedrock.png'); + } +} + +.view__header { + background: $color-brick-light url('/images/stone_brick_light.png'); + position: relative; height: 10em; + margin-top: 5em; + + h1 { position: relative; top: -3em; left: -3em; } + + .divider { + background: $color-brick-dark url('/images/stone_brick.png'); + position: absolute; bottom: 0; height: 3.2em; width: 100%; + } +} + +.view__screen { + position: fixed; top: 0; right: 0; bottom: 0; left: 0; + display: none; + z-index: $layer-screen; +} \ No newline at end of file