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

Refactor website with new design & structure

Browse Source
This commit is contained in:
Andrew Miner
2016-04-03 19:30:15 -07:00
parent ec7e8c883d
commit d69585facd
406 changed files with 7411 additions and 37859 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/styles/classes.scss
+88
View File
@@ -0,0 +1,88 @@
//
// Crafting Guide - classes.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//
.blur {
@include blur(2px);
}
.button {
min-height : $size-button-height;
position : relative;
background : $color-button-background url('/images/button-background-normal.png') repeat;
cursor : pointer;
@include no-select;
.bezel {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
border-top : 3px solid $color-button-highlight;
border-left : 3px solid $color-button-highlight;
border-bottom : 6px solid $color-button-shadow;
border-right : 3px solid $color-button-shadow;
p {
position : absolute;
min-height : 100%;
top : 50%;
width : 100%;
transform : translateY(-8px);
color : $color-white;
font-family : $font-family-header;
font-size : 20px;
overflow-x : hidden;
text-align : center;
text-overflow : ellipsis;
user-select : none;
white-space : nowrap;
}
}
&:hover {
background : url('/images/button-background-hover.png') repeat;
}
&:active {
background : url('/images/button-background-active.png') repeat;
.bezel {
border: 0;
}
}
&.disabled {
background : $color-gray-faint;
cursor : default;
.bezel {
border: 2px solid $color-gray-light;
p {
color: $color-gray-light;
}
}
}
}
.page > .content {
min-height: $size-skyscraper-height;
}
.skyscraper {
height : $size-skyscraper-height - 2px;
width : $size-skyscraper-width - 2px;
border : 1px solid $color-gray-medium;
}
.scrollDisabled {
position : fixed;
margin-top : 0;
width : 100%;
overflow-y : scroll;
}
src/client/styles/colors.scss
+51
View File
@@ -0,0 +1,51 @@
//
// Crafting Guide - colors.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//
// Raw Colors //////////////////////////////////////////////////////////////////////////////////////////////////////////
$color-bedrock : #0A0A0A;
$color-black : #000000;
$color-blue-dark : #484880;
$color-blue-faint : #EFEDFF;
$color-blue-light : #6256EF;
$color-blue-medium : #5E5ABF;
$color-brown-dark : #3D1D09;
$color-dirt : #906647;
$color-gray-dark : #474747;
$color-gray-faint : #EFEFEF;
$color-gray-light : #D0D0D0;
$color-gray-medium : #6C6C6C;
$color-ice : #AAC9FF;
$color-planks : #B7955E;
$color-shadow : #666666;
$color-white : #FFFFFF;
// Semantic Colors /////////////////////////////////////////////////////////////////////////////////////////////////////
$color-active : #5C8AE6;
$color-active-hover : #2E6BE6;
$color-background-footer : $color-brown-dark;
$color-background-page : rgba(230, 230, 230, 0.75);
$color-background-panel : rgba(255, 255, 255, 0.90);
$color-background-window : $color-ice;
$color-button-background : #6F6F6F;
$color-button-highlight : rgba(255, 255, 255, 0.66);
$color-button-shadow : rgba(0, 0, 0, 0.33);
$color-error : #DD444A;
$color-link-normal : $color-blue-medium;
$color-link-active : $color-blue-light;
$color-link-visited : $color-blue-dark;
$color-screen : rgba(255, 255, 255, 0.50);
$color-text : $color-black;
$color-text-secondary : $color-gray-medium;
$color-text-light : $color-white;
src/client/styles/fonts.scss
+36
View File
@@ -0,0 +1,36 @@
//
// Crafting Guide - fonts.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//
// Raw Fonts ///////////////////////////////////////////////////////////////////////////////////////////////////////////
@font-face {
font-family : 'silkscreen';
font-style : normal;
font-weight : 400;
src : url('/fonts/silkscreen.ttf') format('truetype');
}
@font-face {
font-family : 'aller';
font-style : normal;
font-weight : 400;
src : url('/fonts/aller-regular.ttf') format('truetype');
}
// Semantic Fonts //////////////////////////////////////////////////////////////////////////////////////////////////////
$font-family-control : 'aller', sans-serif;
$font-family-header : 'silkscreen', monospace;
$font-family-input : monospace;
$font-family-text : 'aller', sans-serif;
$font-size-xsmall : 10px;
$font-size-small : 12px;
$font-size-medium : 16px;
$font-size-large : 18px;
$font-size-xlarge : 24px;
$font-size-xxlarge : 36px;
src/client/styles/layers.scss
+10
View File
@@ -0,0 +1,10 @@
//
// Crafting Guide - layers.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//
$layer-normal: 100;
$layer-screen: 1000;
$layer-dialog: 10000;
src/client/styles/main.scss
+23
View File
@@ -0,0 +1,23 @@
//
// Crafting Guide - main.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//
// normalize all values
@import './reset';
// define variables
@import './colors';
@import './fonts';
@import './layers';
@import './mixins';
@import './sizes';
// define globals styles
@import './classes';
@import './tags';
// define special styles for markdown translation
@import './markdown';
src/client/styles/markdown.scss
+97
View File
@@ -0,0 +1,97 @@
//
// Crafting Guide - markdown.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//
.markdown {
a {
color: $color-link-normal;
text-decoration: none;
&:hover {
color: $color-link-active;
text-decoration: underline;
}
}
h1 {
font-family: $font-family-text;
font-size: $font-size-large;
font-weight: bold;
margin: $size-margin-large 0 $size-margin-small 0;
}
img {
max-width: 100%;
}
p {
font-family: $font-family-text;
font-size: $font-size-medium;
line-height: $font-size-medium * 1.25;
margin-top: $size-margin-medium;
}
table {
margin: 2em auto 0 auto;
td {
font-family: $font-family-text;
font-size: $font-size-medium;
padding: $size-margin-xxsmall $size-margin-medium;
vertical-align: middle;
}
th {
font-family: $font-family-text;
font-size: $font-size-medium;
font-weight: bold;
padding: $size-margin-xxsmall $size-margin-medium;
vertical-align: middle;
text-align: center;
}
td[align="center"] {
text-align: center;
}
td[align="right"] {
text-align: right;
}
}
ol {
margin: $size-margin-large;
margin-bottom: 0;
li {
font-family: $font-family-text;
font-size: $font-size-medium;
line-height: $font-size-medium * 1.25;
list-style: decimal;
margin: $size-margin-medium 0 0 $size-margin-large;
}
}
ul {
margin: $size-margin-large;
margin-bottom: 0;
li {
font-family: $font-family-text;
font-size: $font-size-medium;
line-height: $font-size-medium * 1.25;
list-style: disc;
margin: $size-margin-medium 0 0 $size-margin-large;
}
}
& > * {
&:first-child {
margin-top: 0;
}
}
}
src/client/styles/mixins.scss
+82
View File
@@ -0,0 +1,82 @@
//
// Crafting Guide - mixins.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//
@mixin blur($radius) {
-webkit-filter : blur($radius);
filter : blur($radius);
}
@mixin grayscale {
-webkit-filter : grayscale(100%);
-moz-filter : grayscale(100%);
-ms-filter : grayscale(100%);
-o-filter : grayscale(100%);
filter : gray;
}
@mixin no-select {
-webkit-touch-callout : none; /* iOS Safari */
-webkit-user-select : none; /* Chrome/Safari/Opera */
-moz-user-select : none; /* Firefox */
-ms-user-select : none; /* IE/Edge */
user-select : none; /* non-prefixed version, currently not supported by any browser */
}
@mixin floating-panel {
background: $color-background-panel;
box-shadow: $size-margin-xxsmall $size-margin-xxsmall $size-margin-xsmall $color-shadow;
}
@mixin layout-link-list {
display: flex;
flex-direction: column;
justify-content: center;
p {
margin-bottom: $size-margin-small;
font-family: $font-family-text;
font-size: $font-size-large;
}
a {
margin-left: $size-margin-medium;
font-family: $font-family-text;
font-size: $font-size-medium;
text-decoration: underline;
&:not(:last-child) {
margin-bottom: $size-margin-medium;
}
}
}
@mixin pixel-image {
image-rendering : -moz-crisp-edges; /* Firefox */
image-rendering : -o-crisp-edges; /* Opera */
image-rendering : -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering : crisp-edges;
-ms-interpolation-mode : nearest-neighbor; /* IE (non-standard property) */
}
@mixin layout-body-with-sidebar {
display: flex;
& > .left {
flex: 0 0 $size-skyscraper-width + $size-margin-medium;
padding-right: $size-margin-medium;
}
& > .right {
flex: 1 1 auto;
section {
margin-bottom: $size-margin-large;
}
}
}
src/client/styles/reset.scss
+50
View File
@@ -0,0 +1,50 @@
//
// http://meyerweb.com/eric/tools/css/reset/
// v2.0 | 20110126
// License: none (public domain)
//
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
textarea, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, ins, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
src/client/styles/sizes.scss
+29
View File
@@ -0,0 +1,29 @@
//
// Crafting Guide - sizes.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//
$size-rem : 12px; // must be first
$size-border-small : 1px;
$size-border-medium : 2px;
$size-border-large : 3px;
$size-button-height : 40px;
$size-margin-xxsmall : 2px;
$size-margin-xsmall : 4px;
$size-margin-small : 8px;
$size-margin-medium : 12px;
$size-margin-large : 24px;
$size-margin-xlarge : 48px;
$size-minecraft-block : 32px;
$size-page-width : $size-rem * 80;
$size-skyscraper-height : 600px;
$size-skyscraper-width : 160px;
src/client/styles/tags.scss
+54
View File
@@ -0,0 +1,54 @@
//
// Crafting Guide - tags.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//
a {
color: $color-link-normal;
text-decoration: none;
&:active {
color: $color-link-active;
}
&:hover {
text-decoration: underline;
}
&:visited {
color: $color-link-visited;
}
}
button {
outline: none;
}
h1 {
font-family: $font-family-header;
font-size: $font-size-xxlarge;
}
h2 {
font-family: $font-family-header;
font-size: $font-size-xlarge;
}
h3 {
font-family: $font-family-header;
font-size: $font-size-large;
}
section {
display: flex;
flex-direction: column;
.panel {
min-height: $size-margin-xlarge * 2;
@include floating-panel;
padding: $size-margin-medium;
}
}