Initial implementation of item page (disabled)

src/css/main.scss

@@ -37,7 +37,7 @@ $font-family-input:  monospace;
 $font-size-small:    1.0em;
 $font-size-normal:   1.5em;
 $font-size-large:    2.0em;
-$font-size-x-large:  2.5em;
+$font-size-x-large:  3.0em;
 $font-size-xx-large: 4.0em;
 
 // Gray Palette ////////////////////////////////////////////////////////////////////////////////////

src/css/mixins.scss

@@ -24,3 +24,11 @@ All rights reserved.
     -webkit-transform: $transforms;
     transform: $transforms;
 }
+
+@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) */
+}

src/css/templates/index.scss

@@ -10,6 +10,7 @@ All rights reserved.
 @import 'feedback';
 @import 'inventory';
 @import 'item';
+@import 'item_page';
 @import 'crafting_page';
 @import 'mod';
 @import 'mod_pack';

src/css/templates/item_page.scss

@@ -0,0 +1,68 @@
+/*
+Crafting Guide - item_page.scss
+
+Copyright (c) 2014 by Redwood Labs
+All rights reserved.
+*/
+
+.view__item_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%;
+                @include pixel-image;
+            }
+        }
+    }
+
+    .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 {
+            display: none;
+            margin: 0.25em 0 2em 0;
+
+            p {
+                font-family: $font-family-normal;
+                font-size: $font-size-normal;
+                font-style: italic;
+            }
+        }
+
+        .description {
+            margin-bottom: 4em;
+
+            p {
+                font-family: $font-family-normal;
+                font-size: $font-size-large;
+            }
+        }
+
+        .usedInMaking {
+            display: none;
+        }
+
+        .similar {
+            display: none;
+        }
+    }
+}

src/css/templates/mod.scss

@@ -15,7 +15,11 @@ All rights reserved.
     }
 
     .version {
-        width: 10em;
+        width: 12em;
+
+        select {
+            position: relative; width: 100%;
+        }
     }
 
     .name {

src/css/templates/mod_page.scss

@@ -21,6 +21,7 @@ All rights reserved.
 
             img {
                 position: relative; width: 100%;
+                @include pixel-image;
             }
         }
 
@@ -59,7 +60,7 @@ All rights reserved.
 
             p {
                 font-family: $font-family-normal;
-                font-size: $font-size-small;
+                font-size: $font-size-normal;
                 font-style: italic;
             }
         }
@@ -72,23 +73,5 @@ All rights reserved.
                 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;
-                }
-            }
-        }
     }
 }