Complete mobile reactiveness in CSS layer

src/client/site/browse_page/browse_page.scss

@@ -33,18 +33,7 @@
                 .view__mod_tile {
                     flex: 0 0 auto;
                     margin-right: 0;
-                }
-            }
-        }
-    }
-}
-
-@include screen-size(mobile) {
-    .view__browse_page {
-        .right {
-            .tile_container {
-                .view__mod_tile {
-                    flex: 1 1 50%;
+                    width: 100%;
                 }
             }
         }

src/client/site/browse_page/mod_tile/mod_tile.scss

@@ -14,6 +14,8 @@
 
     a {
         @include floating-panel;
+        width : 100%;
+
         border          : $size-border-medium solid $color-background-panel;
         color           : $color-text;
         text-decoration : none;

src/client/site/common/markdown_section/markdown_section.scss

@@ -128,3 +128,15 @@
         }
     }
 }
+
+@include screen-size(mobile) {
+    .view__markdown_section {
+        .creating {
+            padding-bottom: $size-margin-xlarge;
+        }
+
+        .footer {
+            display: none;
+        }
+    }
+}

src/client/site/header/header.scss

@@ -102,7 +102,9 @@
         font-family: $font-family-control;
         font-size: $font-size-medium;
 
-        padding: $size-margin-small $size-margin-medium;
+        padding-left: $size-margin-medium + $size-margin-large;
+        line-height: $font-size-medium + 2 * $size-margin-small;
+        text-indent: -$size-margin-large;
 
         &:before {
             content: "⟩";
@@ -118,3 +120,71 @@
         }
     }
 }
+
+@include screen-size(desktop) {
+    .view__header {
+        .top-row {
+            a {
+                img {
+                    top    : -$size-minecraft-block * 0.5;
+                    left   : -$size-minecraft-block * 0.5;
+                    height : $size-minecraft-block * 2.0;
+                    width  : $size-minecraft-block * 2.0;
+                }
+            }
+        }
+    }
+}
+
+@include screen-size(tablet) {
+    .view__header {
+        .top-row {
+            h1 {
+                font-size : $font-size-xlarge;
+            }
+        }
+    }
+}
+
+@include screen-size(mobile) {
+    .view__header {
+        .top-row {
+            display : none;
+
+            a {
+                img {
+                }
+            }
+
+            h1 {
+            }
+
+            .addthis_sharing_toolbox {
+                display: none;
+
+                &.placeholder {
+                    &:before {
+                    }
+                }
+            }
+        }
+
+        .divider {
+            .button {
+                &:last-child {
+                }
+            }
+        }
+
+        .breadcrumbs {
+            &:before {
+            }
+
+            a {
+            }
+
+            span {
+            }
+        }
+    }
+}

src/client/site/item_page/item_page.jade

@@ -17,7 +17,7 @@
                 .title
                 a.sourceMod
                 .button-row
-                    .button.craftingPlan: .bezel: p View Crafting Plan
+                    .button.craftingPlan: .bezel: p View <span class="full">Crafting </span>Plan
             .right
                 p Official Link:
                     a.officialLink project page

src/client/site/item_page/item_page.scss

@@ -48,7 +48,7 @@
 
                 .button {
                     flex: 1 1 100%;
-                    max-width: 66%;
+                    max-width: $size-minecraft-block * 10;
                 }
             }
         }
@@ -58,3 +58,50 @@
         }
     }
 }
+
+@include screen-size(mobile) {
+    .view__item_page {
+        .about {
+            flex-direction: column;
+
+            & > .left {
+                margin: 0 $size-margin-medium;
+
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                img {
+                }
+            }
+
+            & > .center {
+                flex: 0 0 auto;
+                margin: 0 $size-margin-medium;
+
+                .sourceMod, .title {
+                    text-align: center;
+                }
+
+                a.sourceMod {
+                }
+
+                .button-row {
+                    flex: 0 0 auto;
+                    margin: $size-margin-large 0;
+
+                    .button {
+                        max-width: $size-minecraft-block * 8;
+                        .full {
+                            display: none;
+                        }
+                    }
+                }
+            }
+
+            & > .right {
+                margin: 0 $size-margin-medium;
+            }
+        }
+    }
+}

src/client/site/item_page/multiblock_viewer/multiblock_viewer.scss

@@ -75,3 +75,20 @@
         }
     }
 }
+
+@include screen-size(mobile) {
+    .view__multiblock_viewer {
+        flex-direction: column-reverse;
+
+        .left {
+            flex: 0 0 auto;
+
+            border: 0;
+        }
+
+        .right {
+            flex: 0 0 auto;
+            margin-bottom: $size-margin-large;
+        }
+    }
+}

src/client/site/item_page/recipe_detail/recipe_detail.scss

@@ -8,7 +8,7 @@
 .view__recipe_detail {
     display : flex;
 
-    .input, .output{
+    .input, .output {
         flex : 0 1 33%;
 
         h3 {
@@ -20,8 +20,13 @@
         }
     }
 
+    .input {
+        order: 10;
+    }
+
     .pattern {
         flex : 0 1 33%;
+        order: 20;
 
         display        : flex;
         flex-direction : column;
@@ -36,9 +41,48 @@
         }
     }
 
+    .output {
+        order: 30;
+    }
+
     &:not(:first-child) {
         border-top  : 1px solid $color-gray-light;
         margin-top  : $size-margin-medium;
         padding-top : $size-margin-large;
     }
 }
+
+@include screen-size(mobile) {
+    .view__recipe_detail {
+        flex-direction: column;
+
+        > :not(:last-child) {
+            margin-bottom: $size-margin-large;
+        }
+
+        .input, .output {
+            flex: 0 0 auto;
+
+
+            h3 {
+            }
+
+            .view__inventory {
+            }
+        }
+
+        .input {
+            order: 21;
+        }
+
+        .pattern {
+            flex: 0 0 auto;
+
+            .tool {
+            }
+        }
+
+        &:not(:first-child) {
+        }
+    }
+}

src/client/site/mod_page/mod_page.scss

@@ -150,6 +150,7 @@
             }
 
             .center {
+                flex: 0 0 auto;
                 margin-bottom: $size-margin-xlarge;
                 margin-left: $size-margin-medium;
                 margin-right: $size-margin-medium;