Add initial version of the Browse page

src/css/templates/browse_page.scss

@@ -0,0 +1,14 @@
+/*
+Crafting Guide - browse_page.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__browse_page {
+
+    .view__mod {
+        margin: 0 1em 1em 0;
+        width: 37em;
+    }
+}

src/css/templates/index.scss

@@ -5,6 +5,7 @@ Copyright (c) 2014-2015 by Redwood Labs
 All rights reserved.
 */
 
+@import 'browse_page';
 @import 'crafting_grid';
 @import 'craft_page';
 @import 'crafting_table';
@@ -16,6 +17,7 @@ All rights reserved.
 @import 'item';
 @import 'item_page';
 @import 'minimal_recipe';
+@import 'mod';
 @import 'mod_pack';
 @import 'mod_page';
 @import 'mod_selector';

src/css/templates/mod.scss

@@ -0,0 +1,58 @@
+/*
+Crafting Guide - mod.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__mod {
+    position: relative; height: 18em;
+
+    background: $color-background-panel;
+    display: inline-block;
+    padding: 0.2em;
+    text-decoration: none;
+    vertical-align: top;
+
+    transition:
+        height $animate-normal,
+        opacity $animate-normal;
+
+    &:hover {
+        border: 0.2em solid $color-link;
+        padding: 0;
+
+        .name {
+            color: $color-link;
+            text-decoration: underline;
+        }
+    }
+
+    &.empty {
+        height: 0;
+    }
+
+    &.removing {
+        height: 0;
+        opacity: 0;
+    }
+
+    .description {
+        margin: 1em;
+    }
+
+    a {
+        color: $color-text;
+        text-decoration: none;
+    }
+
+    h3 {
+        font-size: $font-size-normal;
+        margin-top: 1em;
+    }
+
+    img {
+        float: left;
+        margin: 1em;
+    }
+}

src/css/templates/mod_selector.scss

@@ -5,7 +5,7 @@ Copyright (c) 2014-2015 by Redwood Labs
 All rights reserved.
 */
 
-.view__mod {
+.view__mod_selector {
     position: relative; width: 100%;
     display: table-row;