Step 1 in converting to a Backbone-based website

2014-12-22 16:36:04 -08:00
parent dc9fd0de07
commit 16832e02dd
95 changed files with 41866 additions and 17 deletions
@@ -0,0 +1,152 @@
+/*
+Crafting Guide - main.scss
+
+Copyright (c) 2014 by Redwood Labs
+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 {
+  font-family: 'PressStart';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/press_start.ttf') format('truetype');
+}
+
+// Common //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+body {
+    background: $color-background url('/images/ice.png');
+    font-size: 10px;
+}
+
+h1 {
+    margin-bottom: 1em;
+
+    * { display: inline; }
+
+    img {
+        position: relative; height: 10em; width: 10em;
+        margin-right: 1em;
+        vertical-align: bottom;
+    }
+
+    p {
+        font-family: PressStart;
+        font-size: 3em;
+        position: relative; top: -0.5em;
+    }
+}
+
+h2 {
+    margin-bottom: 1em;
+
+    * { display: inline; }
+
+    img {
+        position: relative; height: 7.5em; width: 7.5em;
+        margin-right: 1em;
+        vertical-align: bottom;
+    }
+
+    p {
+        font-family: PressStart;
+        font-size: 2em;
+        position: relative; top: -0.25em;
+    }
+}
+
+.centered {
+    text-align: center;
+}
+
+.content {
+    background: $color-content;
+    box-shadow: 10px 10px 20px #666;
+    margin: 2em auto;
+    max-width: 96em;
+    position: relative;
+    width: 100%;
+}
+
+// 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: 1.25em;
+            padding-bottom: 1.0em;
+
+            &:last-child {
+                padding-bottom: 0;
+            }
+        }
+
+        h2 {
+            padding-bottom: 1.0em;
+
+            p {
+                font-family: PressStart;
+                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: 5em 0 2em 0;
+
+    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%;
+    }
+}
+
+// Child Stylesheets ///////////////////////////////////////////////////////////////////////////////////////////////////
+
+@import 'templates/index';