diff --git a/src/client/site/browse_page/browse_page.scss b/src/client/site/browse_page/browse_page.scss
index fd4ed0048..ed0c825a4 100644
--- a/src/client/site/browse_page/browse_page.scss
+++ b/src/client/site/browse_page/browse_page.scss
@@ -13,17 +13,24 @@
display : flex;
flex-wrap : wrap;
- @include screen-size(tablet) {
- flex-direction: column;
- align-items: stretch;
- }
-
.view__mod_tile {
flex : 1 1 calc(50% - 12px); // $size-margin-large / 2
margin-right : $size-margin-medium;
margin-bottom : $size-margin-large;
+ }
+ }
+ }
+}
- @include screen-size(tablet) {
+@include screen-size(tablet) {
+ .view__browse_page {
+ .right {
+ .tile_container {
+ flex-direction: column;
+ flex-wrap: nowrap;
+ align-items: stretch;
+
+ .view__mod_tile {
flex: 0 0 auto;
margin-right: 0;
}
@@ -31,3 +38,15 @@
}
}
}
+
+@include screen-size(mobile) {
+ .view__browse_page {
+ .right {
+ .tile_container {
+ .view__mod_tile {
+ flex: 1 1 50%;
+ }
+ }
+ }
+ }
+}
diff --git a/src/client/site/browse_page/mod_tile/mod_tile.scss b/src/client/site/browse_page/mod_tile/mod_tile.scss
index f615fb418..66e79c494 100644
--- a/src/client/site/browse_page/mod_tile/mod_tile.scss
+++ b/src/client/site/browse_page/mod_tile/mod_tile.scss
@@ -6,15 +6,13 @@
//
.view__mod_tile {
- min-width : $size-minecraft-block * 9;
+ min-width : $size-minecraft-block * 9;
display : flex;
justify-content : stretch;
align-items : stretch;
a {
- width: 100%;
-
@include floating-panel;
border : $size-border-medium solid $color-background-panel;
color : $color-text;
@@ -39,6 +37,7 @@
overflow : hidden;
.title {
+ max-width: 0;
margin-bottom : $size-margin-medium;
font-family : $font-family-header;
@@ -86,3 +85,20 @@
}
}
}
+
+@include screen-size(mobile) {
+ .view__mod_tile {
+ min-width: 0;
+
+ a {
+ & > .left {
+ flex: 0 0 $size-minecraft-block * 2;
+
+ img {
+ width: $size-minecraft-block * 2;
+ max-height: $size-minecraft-block * 2;
+ }
+ }
+ }
+ }
+}
diff --git a/src/client/site/common/inventory/inventory.jade b/src/client/site/common/inventory/inventory.jade
index 48df8182d..33d2792e7 100644
--- a/src/client/site/common/inventory/inventory.jade
+++ b/src/client/site/common/inventory/inventory.jade
@@ -9,5 +9,5 @@
.item_container
.empty_placeholder nothing
.buttons
- .button.item-selector: .bezel: p add an item...
+ .button.item-selector: .bezel: p add an item...
.button.clear: .bezel: p clear
diff --git a/src/client/site/common/inventory/inventory.scss b/src/client/site/common/inventory/inventory.scss
index a079077a7..dd3b52737 100644
--- a/src/client/site/common/inventory/inventory.scss
+++ b/src/client/site/common/inventory/inventory.scss
@@ -40,10 +40,22 @@
.item-selector {
flex : 80%;
margin-right : $size-margin-medium;
+
+ @include screen-size(mobile) {
+ flex: 50%;
+
+ .full {
+ display: none;
+ }
+ }
}
.clear {
flex : 20%;
+
+ @include screen-size(mobile) {
+ flex: 50%;
+ }
}
}
}
@@ -61,8 +73,12 @@
.quantity {
padding-right : $size-margin-medium;
input {
- width: 3em;
- font-size : $font-size-xlarge;
+ width : 3em;
+ font-size : $font-size-xlarge;
+
+ @include screen-size(mobile) {
+ width : 2em;
+ }
}
}
diff --git a/src/client/site/common/item_group/item_group.scss b/src/client/site/common/item_group/item_group.scss
index 8443f7167..4f001a8fe 100644
--- a/src/client/site/common/item_group/item_group.scss
+++ b/src/client/site/common/item_group/item_group.scss
@@ -14,10 +14,26 @@
.view__item_tile {
margin-bottom: $size-margin-medium;
width: calc(33% - 8px); // $size-margin-xsmall * 2
+ }
+ }
+}
- @include screen-size(tablet) {
+@include screen-size(tablet) {
+ .view__item_group {
+ .panel {
+ .view__item_tile {
width: calc(50% - 8px); // $size-margin-xsmall * 2
}
}
}
}
+
+@include screen-size(mobile) {
+ .view__item_group {
+ .panel {
+ .view__item_tile {
+ width: 100%;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/client/site/common/item_group/item_tile/item_tile.scss b/src/client/site/common/item_group/item_tile/item_tile.scss
index 4b5543dbc..492511137 100644
--- a/src/client/site/common/item_group/item_tile/item_tile.scss
+++ b/src/client/site/common/item_group/item_tile/item_tile.scss
@@ -10,7 +10,7 @@
overflow: visible;
display: flex;
- align-items: center;
+ align-items: flex-start;
img {
height: $size-minecraft-block;
@@ -22,9 +22,19 @@
font-family: $font-family-text;
font-size: $font-size-medium;
line-height: $size-minecraft-block;
- overflow-x: hidden;
+ overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
+
+@include screen-size(mobile) {
+ .view__item_tile {
+ a {
+ p {
+ white-space: normal;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/client/site/common/item_selector/item_selector.scss b/src/client/site/common/item_selector/item_selector.scss
index 76996c0b9..b784ca9a1 100644
--- a/src/client/site/common/item_selector/item_selector.scss
+++ b/src/client/site/common/item_selector/item_selector.scss
@@ -9,8 +9,14 @@
}
.view__item_selector_popup {
+ max-width: $size-minecraft-block * 20;
height : 66%;
+ @include screen-size(mobile) {
+ max-width: 98%;
+ height: 80%;
+ }
+
background : $color-background-panel;
border : 1px solid $color-gray-medium;
@@ -35,6 +41,7 @@
input {
flex: 1 1 100%;
+ min-width: $font-size-large * 10;
background: none;
border: 0;
diff --git a/src/client/site/craft_page/craftsman_working/craftsman_working.jade b/src/client/site/craft_page/craftsman_working/craftsman_working.jade
index 811282ec2..44c252e4b 100644
--- a/src/client/site/craft_page/craftsman_working/craftsman_working.jade
+++ b/src/client/site/craft_page/craftsman_working/craftsman_working.jade
@@ -16,5 +16,5 @@
.button: .bezel: p Calculate
.outdated
- .message Crafting plan is out of date!
+ .message Your crafting plan is out of date!
.button: .bezel: p Recalculate
\ No newline at end of file
diff --git a/src/client/site/craft_page/craftsman_working/craftsman_working.scss b/src/client/site/craft_page/craftsman_working/craftsman_working.scss
index 18f1e0b6c..eaf791e39 100644
--- a/src/client/site/craft_page/craftsman_working/craftsman_working.scss
+++ b/src/client/site/craft_page/craftsman_working/craftsman_working.scss
@@ -13,34 +13,30 @@ All rights reserved.
padding : $size-margin-xlarge;
.waiting {
- margin-bottom: $size-margin-xlarge;
+ margin-bottom : $size-margin-xlarge;
}
.message {
- margin-bottom: $size-margin-medium;
+ margin-bottom : $size-margin-medium;
p {
- font-family: $font-family-header;
- font-size: $font-size-large;
+ font-family : $font-family-header;
+ font-size : $font-size-large;
+ text-align : center;
}
}
.count {
p {
- font-family: $font-family-header;
- font-size: $font-size-medium;
+ font-family : $font-family-header;
+ font-size : $font-size-medium;
+ text-align : center;
}
}
.button {
- margin-top: $size-margin-large;
- height: $size-minecraft-block * 2;
- width: $size-minecraft-block * 10;
-
- p {
- font-size: $font-size-xxlarge;
- transform: translateY(-25%);
- }
+ margin-top : $size-margin-large;
+ min-width: $size-minecraft-block * 6;
}
}
@@ -48,22 +44,41 @@ All rights reserved.
position: fixed; top: 0; left: 0; right: 0;
- background: fade-out($color-white, 0.15) url('/images/panel-background-outdated.png');
- border-bottom: $size-border-medium solid $color-black;
+ background : fade-out($color-white, 0.15) url('/images/panel-background-outdated.png');
+ border-bottom : $size-border-medium solid $color-black;
- display: flex;
- flex-direction: column;
- align-items: center;
+ display : flex;
+ flex-direction : column;
+ align-items : center;
.message {
- margin-top: $size-margin-medium;
- font-family: $font-family-header;
- font-size: $font-size-xlarge;
+ margin-top : $size-margin-medium;
+
+ font-family : $font-family-header;
+ font-size : $font-size-xlarge;
+ text-align : center;
}
.button {
- width: $size-minecraft-block * 10;
- margin: $size-margin-medium;
+ width : $size-minecraft-block * 6;
+ margin : $size-margin-medium;
+ }
+ }
+}
+
+@include screen-size(not-mobile) {
+ .view__craftsman_working {
+ .panel {
+ .button {
+ margin-top : $size-margin-large;
+ height : $size-minecraft-block * 2;
+ width : $size-minecraft-block * 10;
+
+ p {
+ font-size : $font-size-xxlarge;
+ transform : translateY(-25%);
+ }
+ }
}
}
}
diff --git a/src/client/site/craft_page/step/step.jade b/src/client/site/craft_page/step/step.jade
index eb1e3806d..89a2fbdc0 100644
--- a/src/client/site/craft_page/step/step.jade
+++ b/src/client/site/craft_page/step/step.jade
@@ -11,5 +11,5 @@
.view__inventory
.view__recipe
.buttons
- a.button.tool: .bezel: p show plan for tools
- .button.complete: .bezel: p complete step
+ a.button.tool: .bezel: p show plan for tools
+ .button.complete: .bezel: p complete step
diff --git a/src/client/site/craft_page/step/step.scss b/src/client/site/craft_page/step/step.scss
index 59d0fb16c..67f7f5471 100644
--- a/src/client/site/craft_page/step/step.scss
+++ b/src/client/site/craft_page/step/step.scss
@@ -28,9 +28,22 @@
.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;
+ }
}
.view__recipe {
@@ -42,6 +55,9 @@
margin-top: $size-margin-large;
opacity: 0;
+ @include screen-size(mobile) {
+ opacity: 1.0;
+ }
display: flex;
@@ -51,6 +67,12 @@
&:not(:first-child) {
margin-left: $size-margin-medium;
}
+
+ @include screen-size(mobile) {
+ .full {
+ display: none;
+ }
+ }
}
a {
diff --git a/src/client/site/feedback/feedback.scss b/src/client/site/feedback/feedback.scss
index 5d8e3a429..acab624d1 100644
--- a/src/client/site/feedback/feedback.scss
+++ b/src/client/site/feedback/feedback.scss
@@ -15,6 +15,10 @@
display: flex;
+ @include screen-size(mobile) {
+ display: none;
+ }
+
.form-content {
flex: 1 1 100%;
diff --git a/src/client/site/footer/footer.scss b/src/client/site/footer/footer.scss
index 364f7fd5c..2b4763154 100644
--- a/src/client/site/footer/footer.scss
+++ b/src/client/site/footer/footer.scss
@@ -19,12 +19,20 @@
> .content {
display: flex;
+ @include screen-size(mobile) {
+ flex-direction: column;
+ }
+
color: $color-text-light;
.left, .center, .right {
flex: 1 1 33%;
margin: $size-margin-large $size-margin-large $size-margin-large 0;
+ @include screen-size(mobile) {
+ margin-left: $size-margin-large;
+ }
+
display: flex;
flex-direction: column;
@@ -38,6 +46,7 @@
.action {
flex: 1 1 auto;
align-self: center;
+ margin-top: $size-margin-large;
margin-bottom: $size-margin-large;
display: flex;
diff --git a/src/client/site/header/header.scss b/src/client/site/header/header.scss
index bb6bfa214..22c892d6e 100644
--- a/src/client/site/header/header.scss
+++ b/src/client/site/header/header.scss
@@ -15,6 +15,10 @@
display : flex;
align-items : center;
+ @include screen-size(mobile) {
+ display : none;
+ }
+
a {
flex : 0 0 auto;
height : $size-minecraft-block * 1.5;
@@ -27,10 +31,10 @@
width : $size-minecraft-block * 1.5;
@include screen-size(desktop) {
- top : -$size-minecraft-block * 0.5;
- left : -$size-minecraft-block * 0.5;
- height : $size-minecraft-block * 2.0;
- width : $size-minecraft-block * 2.0;
+ top : -$size-minecraft-block * 0.5;
+ left : -$size-minecraft-block * 0.5;
+ height : $size-minecraft-block * 2.0;
+ width : $size-minecraft-block * 2.0;
}
}
}
@@ -40,13 +44,17 @@
white-space: nowrap;
@include screen-size(tablet) {
- font-size: $font-size-xlarge;
+ font-size : $font-size-xlarge;
}
}
.addthis_sharing_toolbox {
+ @include screen-size(mobile) {
+ display: none;
+ }
+
flex : 0 0 auto;
- min-height : 37px;
+ min-height : 37px; // actual size of addthis component
min-width : 144px;
margin-right : $size-margin-small;
diff --git a/src/client/site/index.scss b/src/client/site/index.scss
index 8bba5661f..c150bfc35 100644
--- a/src/client/site/index.scss
+++ b/src/client/site/index.scss
@@ -36,26 +36,23 @@ html {
}
& > *:first-child {
- flex: 0 0 50%;
-
- @include screen-size(tablet) {
- flex: 0 0 75%;
- }
+ flex: 1 1 100%;
box-shadow : $size-margin-small $size-margin-small $size-margin-large $color-shadow;
}
}
.page {
- background : $color-background-page;
+ max-width : $size-page-width;
+ width : 100%;
@include screen-size(desktop) {
margin : $size-margin-large 0;
- max-width : $size-page-width;
- width : 100%;
box-shadow : $size-margin-small $size-margin-small $size-margin-large $color-shadow;
}
+ background : $color-background-page;
+
display : flex;
flex-direction : column;
diff --git a/src/client/site/mod_page/mod_page.scss b/src/client/site/mod_page/mod_page.scss
index 494859596..2f22aa07f 100644
--- a/src/client/site/mod_page/mod_page.scss
+++ b/src/client/site/mod_page/mod_page.scss
@@ -128,3 +128,41 @@
}
}
}
+
+@include screen-size(mobile) {
+ .view__mod_page {
+ .about {
+ flex-direction: column;
+
+ & > * {
+ margin-left: $size-margin-medium;
+ margin-right: $size-margin-medium;
+ }
+
+ .left {
+ margin-bottom: $size-margin-large;
+ margin-left: $size-margin-medium;
+ margin-right: $size-margin-medium;
+
+ display : flex;
+ flex-direction : column;
+ align-items : center;
+ }
+
+ .center {
+ margin-bottom: $size-margin-xlarge;
+ margin-left: $size-margin-medium;
+ margin-right: $size-margin-medium;
+
+ .author, .title {
+ text-align: center;
+ }
+ }
+
+ .right {
+ margin-left: $size-margin-medium;
+ margin-right: $size-margin-medium;
+ }
+ }
+ }
+}
diff --git a/src/client/styles/media.scss b/src/client/styles/media.scss
index 373e176e5..677dc04b1 100644
--- a/src/client/styles/media.scss
+++ b/src/client/styles/media.scss
@@ -7,7 +7,7 @@
$tablet : 960px;
-$mobile : 320px;
+$mobile : 568px;
@mixin screen-size($screenType) {
@if $screenType == desktop {
@@ -16,5 +16,7 @@ $mobile : 320px;
@media (max-width: $tablet) { @content; }
} @else if $screenType == mobile {
@media (max-width: $mobile) { @content; }
+ } @else if $screenType == not-mobile {
+ @media (min-width: $mobile + 1) { @content }
}
}
diff --git a/src/client/styles/mixins.scss b/src/client/styles/mixins.scss
index 1b5f30470..962bebece 100644
--- a/src/client/styles/mixins.scss
+++ b/src/client/styles/mixins.scss
@@ -44,6 +44,9 @@
@include screen-size(tablet) {
margin: 0 $size-margin-xlarge;
}
+ @include screen-size(mobile) {
+ margin: 0;
+ }
section {
margin-bottom: $size-margin-large;