Add initial version of configure page

src/css/classes.scss

@@ -30,13 +30,11 @@ All rights reserved.
     vertical-align: top;
 
     .titleImage {
-        position: relative; height: 16em; width: 16em;
         margin-bottom: 2em;
 
         a {
-            position: relative; width: 100%;
-
             img {
+                position: relative; width: 16em; min-height: 16em;
                 @include pixel-image;
             }
         }
@@ -44,7 +42,7 @@ All rights reserved.
 
     .externalLink {
         position: relative; width: 80%;
-        margin: 0 10%;
+        margin: 0.5em 10%;
         display: none;
 
         p {

src/css/templates/craft_page.scss

@@ -15,11 +15,9 @@ All rights reserved.
         vertical-align: top;
     }
 
-    .view__inventory { width: 50%; height: 26em; }
+    .view__inventory { width: 50%; height: 30em; }
 
-    .view__crafting_table { width: 50%; height: 26em; }
-
-    .view__mod_pack { margin-top: 2em; width: 100%; }
+    .view__crafting_table { width: 50%; height: 30em; }
 
     .want label {
         position: absolute; top: 50%; left: 0.5em;

src/css/templates/item.scss

@@ -6,6 +6,9 @@ All rights reserved.
 */
 
 .view__item {
+    display: inline-block;
+    padding: 0.5em;
+
     a {
         text-decoration: none;
         width: 100%;

src/css/templates/item_page.scss

@@ -62,11 +62,7 @@ All rights reserved.
         }
     }
 
-    .panel {
-        & > div {
-            position: relative; width: 33%;
-            display: inline-block;
-            padding: 0.5em;
-        }
+    .view__item {
+        position: relative; width: 33%;
     }
 }

src/css/templates/mod_page.scss

@@ -14,7 +14,6 @@ All rights reserved.
     }
 
     .sidebar {
-
         .version {
             position: relative; width: 80%;
             margin: 0 10%;
@@ -49,4 +48,8 @@ All rights reserved.
             }
         }
     }
+
+    .view__item {
+        position: relative; width: 33%;
+    }
 }

src/css/views.scss

@@ -88,6 +88,15 @@ All rights reserved.
                 }
             }
 
+            .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%));