Initial version of mod detail pages

src/css/main.scss

@@ -57,10 +57,12 @@ $color-background:         #AAC9FF;
 $color-background-panel:   #FFFFFF;
 $color-background-toolbar: rgba(255, 255, 255, 0.75);
 $color-content:            rgba(230, 230, 230, 0.90);
-$color-error-new:          #CD0000;
 $color-error:              #F3C2C2;
+$color-error-new:          #CD0000;
 $color-footer:             #3D1D09;
 $color-footer-text:        #FFFFFF;
+$color-link:               #0000FF;
+$color-text:               #000000;
 
 // Z-Index Layers //////////////////////////////////////////////////////////////////////////////////
 

src/css/templates/index.scss

@@ -9,8 +9,10 @@ All rights reserved.
 @import 'crafting_table';
 @import 'feedback';
 @import 'inventory';
+@import 'item';
 @import 'item_page';
 @import 'mod';
 @import 'mod_pack';
+@import 'mod_page';
 @import 'recipe';
 @import 'stack';

src/css/templates/item.scss

@@ -0,0 +1,46 @@
+/*
+Crafting Guide - item.scss
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__item {
+    a {
+        text-decoration: none;
+        width: 100%;
+
+        &:hover {
+            .itemName {
+                color: $color-link;
+                text-decoration: underline;
+            }
+
+            table {
+                background: $color-gray-faint;
+            }
+        }
+    }
+
+    table {
+        width: 100%;
+    }
+
+    td.itemName {
+        color: $color-text;
+        font-family: $font-family-normal;
+        font-size: $font-size-normal;
+        font-weight: bold;
+        padding-left: 1em;
+        text-align: left;
+        vertical-align: middle;
+    }
+
+    td.itemIcon {
+        width: 3.6em;
+
+        img {
+            height: 3.6em; width: 3.6em;
+        }
+    }
+}

src/css/templates/mod.scss

@@ -25,7 +25,7 @@ All rights reserved.
         p {
             font-family: $font-family-normal;
             font-size: $font-size-normal;
-//            text-decoration: underline;
+            text-decoration: underline;
         }
     }
 

src/css/templates/mod_page.scss

@@ -0,0 +1,93 @@
+/*
+Crafting Guide - mod_page.scss
+
+Copyright (c) 2014 by Redwood Labs
+All rights reserved.
+*/
+
+.view__mod_page {
+    & > div {
+        vertical-align: top;
+        display: inline-block;
+    }
+
+    .sidebar {
+        position: relative; width: 18.75%;
+        padding: 1em;
+
+        .titleImage {
+            position: relative; height: 16em; width: 16em;
+            margin-bottom: 2em;
+
+            img {
+                position: relative; width: 100%;
+            }
+        }
+
+        .version {
+            position: relative; width: 80%;
+            margin: 0 10%;
+            margin-bottom: 1em;
+        }
+
+        .homePage {
+            position: relative; width: 80%;
+            margin: 0 10%;
+
+            p {
+                font-family: $font-family-normal;
+                font-size: $font-size-normal;
+                text-align: center;
+            }
+        }
+    }
+
+    .mainBody {
+        position: relative; width: 81.25%;
+        padding: 1em;
+        padding-top: 2em;
+
+        .name {
+            font-family: $font-family-header;
+            font-size: $font-size-x-large;
+            margin: 0;
+        }
+
+        .byline {
+            margin: 0.25em 0 2em 0;
+
+            p {
+                font-family: $font-family-normal;
+                font-size: $font-size-small;
+                font-style: italic;
+            }
+        }
+
+        .description {
+            margin-bottom: 4em;
+
+            p {
+                font-family: $font-family-normal;
+                font-size: $font-size-large;
+            }
+        }
+
+        .section {
+            h2 {
+                font-family: $font-family-header;
+                font-size: $font-size-large;
+            }
+
+            .panel {
+                background: white;
+                padding: 1em;
+
+                & > div {
+                    position: relative; width: 33%;
+                    display: inline-block;
+                    padding: 0.5em;
+                }
+            }
+        }
+    }
+}