diff --git a/src/client/site/common/recipe/recipe.scss b/src/client/site/common/recipe/recipe.scss index 6ae4b3584..30814e056 100644 --- a/src/client/site/common/recipe/recipe.scss +++ b/src/client/site/common/recipe/recipe.scss @@ -9,12 +9,17 @@ display: flex; .input { - flex: 1 1 50%; + flex: 0 0 auto; align-items : center; display : flex; flex-direction : column; + .view__crafting_grid { + flex: 1 1 auto; + width: 100%; + } + .tool { margin-top : $size-margin-small; @@ -24,7 +29,7 @@ } .output { - flex: 1 1 50%; + flex: 1 1 100%; margin-left: $size-margin-medium; display : flex; @@ -42,4 +47,4 @@ margin-top : $size-margin-medium; } } -} +} \ No newline at end of file diff --git a/src/client/site/craft_page/step/step.scss b/src/client/site/craft_page/step/step.scss index 67f7f5471..7952dff2c 100644 --- a/src/client/site/craft_page/step/step.scss +++ b/src/client/site/craft_page/step/step.scss @@ -28,19 +28,10 @@ .main_content { display: flex; - @include screen-size(mobile) { - flex-direction: column-reverse; - align-items: stretch; - } - .view__inventory { flex: 50%; margin-left: $size-margin-large; - @include screen-size(mobile) { - margin: $size-margin-large $size-margin-large 0 $size-margin-large; - } - .buttons { display: none; } @@ -55,9 +46,6 @@ margin-top: $size-margin-large; opacity: 0; - @include screen-size(mobile) { - opacity: 1.0; - } display: flex; @@ -67,12 +55,6 @@ &:not(:first-child) { margin-left: $size-margin-medium; } - - @include screen-size(mobile) { - .full { - display: none; - } - } } a { @@ -94,4 +76,31 @@ text-decoration: line-through; } } -} \ No newline at end of file +} + +@include screen-size(mobile) { + .view__step { + .main_content { + flex-direction: column-reverse; + + .view__inventory { + flex: 0 0 auto; + margin: $size-margin-large $size-margin-large 0 $size-margin-large; + } + + .view__recipe { + flex: 0 0 auto; + } + } + + .buttons { + opacity: 1.0; + + .button { + .full { + display: none; + } + } + } + } +} diff --git a/src/client/site/footer/footer.scss b/src/client/site/footer/footer.scss index 2b4763154..cf93c2252 100644 --- a/src/client/site/footer/footer.scss +++ b/src/client/site/footer/footer.scss @@ -64,3 +64,13 @@ height: $size-minecraft-block; } } + +@include screen-size(mobile) { + .view__footer { + > .content { + .left, .center, .right { + flex: 0 0 auto; + } + } + } +} \ No newline at end of file diff --git a/src/client/site/header/header.scss b/src/client/site/header/header.scss index 22c892d6e..26bdce2cf 100644 --- a/src/client/site/header/header.scss +++ b/src/client/site/header/header.scss @@ -84,7 +84,8 @@ padding-top : 0; .button { - flex : 1 1 calc(20% - 8px); + flex-grow : 1; + flex-shrink : 1; min-width : 3 * $size-minecraft-block; max-width : 5 * $size-minecraft-block; margin-top : $size-margin-medium;