Andrew Miner
0b07bdb482
Update the crafting page so that the check mark for each step only appears when hovering over that step, and so that the check also has some descriptive text helping the user understand what it does.
102 lines
3.0 KiB
SCSS
102 lines
3.0 KiB
SCSS
/*
|
|
Crafting Guide - main.scss
|
|
|
|
Copyright (c) 2014-2015 by Redwood Labs
|
|
All rights reserved.
|
|
*/
|
|
|
|
@import 'mixins';
|
|
@import 'reset';
|
|
|
|
// Fonts ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@font-face {
|
|
font-family: 'PressStart';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
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 ///////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
// Animation Speeds ////////////////////////////////////////////////////////////////////////////////
|
|
|
|
$animate-fast: 0.200s;
|
|
$animate-normal: 0.400s;
|
|
$animate-slow: 1.200s;
|
|
|
|
// Font Faces //////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
$font-family-header: 'Silkscreen';
|
|
$font-family-normal: sans-serif;
|
|
$font-family-input: monospace;
|
|
|
|
// Font Sizes //////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
$font-size-small: 1.25em;
|
|
$font-size-normal: 1.5em;
|
|
$font-size-large: 2.0em;
|
|
$font-size-x-large: 3.0em;
|
|
$font-size-xx-large: 4.0em;
|
|
|
|
// Gray Palette ////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
$color-gray-faint: #F2F2F2;
|
|
$color-gray-light: #CCCCCC;
|
|
$color-gray-medium: #A6A6A6;
|
|
$color-gray-dark: #8B8B8B;
|
|
$color-gray-shadow: #444444;
|
|
|
|
// Object Background Colors ////////////////////////////////////////////////////////////////////////
|
|
|
|
$color-bedrock: #0A0A0A;
|
|
$color-brick-dark: #7A7A7A;
|
|
$color-brick-light: #D9D9D9;
|
|
$color-dirt: #906647;
|
|
$color-ice: #8AA7E6;
|
|
|
|
// Opacity Values //////////////////////////////////////////////////////////////////////////////////
|
|
|
|
$opacity-hidden: 0.000001;
|
|
$opacity-shown: 1.0;
|
|
|
|
// Style Colors ////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
$color-active: #5C8AE6;
|
|
$color-active-hover: #2E6BE6;
|
|
$color-background: #AAC9FF;
|
|
$color-background-panel: #FFFFFF;
|
|
$color-background-toolbar: rgba(255, 255, 255, 0.75);
|
|
$color-checkmark: #7EDD7B;
|
|
$color-content: rgba(230, 230, 230, 0.90);
|
|
$color-error: #F3C2C2;
|
|
$color-error-new: #CD0000;
|
|
$color-footer: #3D1D09;
|
|
$color-footer-text: #FFFFFF;
|
|
$color-link: #0000FF;
|
|
$color-link-subtle: #545A99;
|
|
$color-text: #000000;
|
|
$color-text-light: #FFFFFF;
|
|
|
|
// Z-Index Layers //////////////////////////////////////////////////////////////////////////////////
|
|
|
|
$layer-normal: 100;
|
|
$layer-screen: 500;
|
|
$layer-dialog: 1000;
|
|
|
|
// Child Stylesheets ///////////////////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@import 'classes';
|
|
@import 'markdown';
|
|
@import 'tags';
|
|
@import 'views';
|
|
|
|
@import 'templates/index';
|
|
@import 'addthis'; |