craftingguide/website
1
0
Fork 0
Code Pull Requests Actions Activity

Initial progress towards responsive for mobile

Browse Source
This commit is contained in:
Andrew Miner
2016-04-29 22:30:37 -07:00
parent 636a8d061c
commit 83156c30c7
18 changed files with 239 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/site/browse_page/browse_page.scss
+25 -6
View File
@@ -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%;
}
}
}
}
}
src/client/site/browse_page/mod_tile/mod_tile.scss
+19 -3
View File
@@ -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;
}
}
}
}
}