Restructure static files into a single directory

2015-03-08 15:05:24 -07:00
parent 997b37ab7d
commit 0a6c185965
5053 changed files with 383 additions and 175 deletions
@@ -0,0 +1,121 @@
+/*
+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%; height: 23em;
+        float: left;
+        padding: 2em;
+
+        .action {
+            position: absolute; bottom: 3em; left: 50%;
+            @include transform(translateX(-50%));
+        }
+    }
+
+    .divider.bottom {
+        background: $color-bedrock url('/images/bedrock.png');
+    }
+}
+
+.view__header {
+    background: $color-gray-light;
+    position: relative; height: 13em;
+    margin-top: 3.2em;
+
+    h1 {
+        position: relative; top: -1.6em; left: -1.6em;
+
+        p {
+            position: relative; top: 0.2em;
+        }
+    }
+
+    .divider {
+        background: $color-brick-dark url('/images/stone_brick.png');
+        position: absolute; bottom: 5em; height: 3.2em; width: 100%;
+    }
+
+    .navBar {
+        position: absolute; right: 2em; bottom: 1em; left: 2em; height: 3em;
+
+        a {
+            position: relative; height: 3em; width: 15em;
+            background: $color-gray-faint;
+            border: 0.1em solid $color-gray-medium;
+            border-radius: 0 1.5em 1.5em 0;
+            cursor: pointer;
+            display: inline-block;
+            margin-left: -1.5em;
+
+            transition: background $animate-normal;
+
+            &:first-child {
+                border-radius: 1.5em;
+                margin-left: 0;
+            }
+
+            &:hover {
+                background: $color-background-panel;
+            }
+
+            &.selected {
+                background: $color-active;
+
+                p {
+                    color: $color-background-panel;
+                }
+            }
+
+            .dot {
+                position: absolute; top: 50%; right: 1em; height: 1.5em; width: 1.5em;
+                @include transform(translateY(-50%));
+
+                background: $color-active;
+                border-radius: 0.75em;
+                opacity: 0;
+            }
+
+            p {
+                position: absolute; top: 50%; left: 50%; width: 100%;
+                @include transform(translateX(-50%) translateY(-50%));
+
+                color: $color-active;
+                font-family: $font-family-normal;
+                font-size: $font-size-normal;
+                font-weight: bold;
+                text-align: center;
+                vertical-align: middle;
+
+                transition: color $animate-normal;
+            }
+        }
+    }
+}
+
+.view__screen {
+    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
+    display: none;
+    z-index: $layer-screen;
+}