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

Add reactive styles for Tablets

Browse Source
This commit is contained in:
Andrew Miner
2016-04-23 20:10:09 -07:00
parent 64e118a2c8
commit a8d08b93c5
13 changed files with 126 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/site/browse_page/browse_page.scss
+14 -4
View File
@@ -10,13 +10,23 @@
.right {
.tile_container {
display : flex;
flex-wrap : wrap;
justify-content : space-between;
display : flex;
flex-wrap : wrap;
@include screen-size(tablet) {
flex-direction: column;
align-items: stretch;
}
.view__mod_tile {
width : calc(50% - 12px); // $size-margin-large / 2
flex : 1 1 calc(50% - 12px); // $size-margin-large / 2
margin-right : $size-margin-medium;
margin-bottom : $size-margin-large;
@include screen-size(tablet) {
flex: 0 0 auto;
margin-right: 0;
}
}
}
}
src/client/site/browse_page/mod_tile/mod_tile.scss
+1 -1
View File
@@ -13,7 +13,7 @@
align-items : stretch;
a {
max-width: 100%;
width: 100%;
@include floating-panel;
border : $size-border-medium solid $color-background-panel;
src/client/site/common/inventory/inventory.scss
+2 -2
View File
@@ -38,12 +38,12 @@
margin-top: $size-margin-large;
.item-selector {
flex : 85%;
flex : 80%;
margin-right : $size-margin-medium;
}
.clear {
flex : 15%;
flex : 20%;
}
}
}
src/client/site/common/item_group/item_group.scss
+4
View File
@@ -14,6 +14,10 @@
.view__item_tile {
margin-bottom: $size-margin-medium;
width: calc(33% - 8px); // $size-margin-xsmall * 2
@include screen-size(tablet) {
width: calc(50% - 8px); // $size-margin-xsmall * 2
}
}
}
}
src/client/site/common/video/video.jade
+1 -1
View File
@@ -6,5 +6,5 @@
//-
.view__video
iframe(width="356", height="267", src="", frameborder="0", allowfullscreen="true")
iframe(src="", frameborder="0", allowfullscreen="true")
.caption: p
src/client/site/craft_page/craftsman_working/craftsman_working.scss
+1 -1
View File
@@ -35,7 +35,7 @@ All rights reserved.
.button {
margin-top: $size-margin-large;
height: $size-minecraft-block * 2;
width: 50%;
width: $size-minecraft-block * 10;
p {
font-size: $font-size-xxlarge;
src/client/site/feedback/feedback.scss
+3 -5
View File
@@ -73,13 +73,11 @@
background: $color-gray-light;
border: $size-border-medium solid $color-black;
border-left: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
p {
transform: rotate(-90deg);
position: absolute; top: 50%; left: 50%;
transform: translateX(-50%) rotate(-90deg) translateX(10%);
font-family: $font-family-header;
font-size: $label-size;
src/client/site/header/header.scss
+24 -10
View File
@@ -23,15 +23,25 @@
img {
position : relative;
top : -$size-minecraft-block * 0.5;
left : -$size-minecraft-block * 0.5;
height : $size-minecraft-block * 2.0;
width : $size-minecraft-block * 2.0;
height : $size-minecraft-block * 1.5;
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;
}
}
}
h1 {
flex: 1 1 auto;
white-space: nowrap;
@include screen-size(tablet) {
font-size: $font-size-xlarge;
}
}
.addthis_sharing_toolbox {
@@ -40,7 +50,6 @@
min-width : 144px;
margin-right : $size-margin-small;
&.placeholder {
border : 1px solid orange;
text-align : center;
@@ -62,15 +71,20 @@
align-items : center;
display : flex;
flex-wrap : wrap;
justify-content : space-around;
justify-content : center;
padding : $size-margin-medium $size-margin-medium;
padding-top : 0;
.button {
flex : 1 1 20%;
min-width : 4 * $size-minecraft-block;
max-width : 5 * $size-minecraft-block;
margin-top: $size-margin-medium;
flex : 1 1 calc(20% - 8px);
min-width : 3 * $size-minecraft-block;
max-width : 5 * $size-minecraft-block;
margin-top : $size-margin-medium;
margin-right : $size-margin-small;
&:last-child {
margin-right: 0;
}
}
}
src/client/site/index.scss
+11 -5
View File
@@ -38,17 +38,23 @@ html {
& > *:first-child {
flex: 0 0 50%;
@include screen-size(tablet) {
flex: 0 0 75%;
}
box-shadow : $size-margin-small $size-margin-small $size-margin-large $color-shadow;
}
}
.page {
margin : $size-margin-large 0;
max-width : $size-page-width;
width : 100%;
background : $color-background-page;
box-shadow : $size-margin-small $size-margin-small $size-margin-large $color-shadow;
@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;
}
display : flex;
flex-direction : column;
src/client/site/tutorial_page/tutorial_page.scss
+4 -2
View File
@@ -51,12 +51,14 @@
margin-top : -$size-margin-medium;
display : flex;
flex-wrap : wrap;
justify-content: space-between;
padding-right : -$size-margin-medium;
& > * {
flex : 1 1 100%;
margin-right : $size-margin-medium;
margin-top : $size-margin-medium;
max-width : calc(50% - 12px); // $size-margin-medium
width : calc(50% - 12px); // $size-margin-medium;
}
}
}
src/client/styles/main.scss
+3
View File
@@ -8,6 +8,9 @@
// normalize all values
@import './reset';
// define media breakpoints
@import './media';
// define variables
@import './colors';
@import './fonts';
src/client/styles/media.scss
+20
View File
@@ -0,0 +1,20 @@
//
// Crafting Guide - fonts.scss
//
// Copyright © 2014-2016 by Redwood Labs
// All rights reserved.
//
$tablet : 960px;
$mobile : 320px;
@mixin screen-size($screenType) {
@if $screenType == desktop {
@media (min-width: $tablet + 1) { @content; }
} @else if $screenType == tablet {
@media (max-width: $tablet) { @content; }
} @else if $screenType == mobile {
@media (max-width: $mobile) { @content; }
}
}
src/client/styles/mixins.scss
+38 -27
View File
@@ -10,6 +10,11 @@
filter : blur($radius);
}
@mixin floating-panel {
background: $color-background-panel;
box-shadow: $size-margin-xxsmall $size-margin-xxsmall $size-margin-xsmall $color-shadow;
}
@mixin grayscale {
-webkit-filter : grayscale(100%);
-moz-filter : grayscale(100%);
@@ -18,17 +23,32 @@
filter : gray;
}
@mixin no-select {
-webkit-touch-callout : none; /* iOS Safari */
-webkit-user-select : none; /* Chrome/Safari/Opera */
-moz-user-select : none; /* Firefox */
-ms-user-select : none; /* IE/Edge */
user-select : none; /* non-prefixed version, currently not supported by any browser */
}
@mixin layout-body-with-sidebar {
display: flex;
@mixin floating-panel {
background: $color-background-panel;
box-shadow: $size-margin-xxsmall $size-margin-xxsmall $size-margin-xsmall $color-shadow;
& > .left {
flex: 0 0 $size-skyscraper-width + $size-margin-medium;
padding-right: $size-margin-medium;
@include screen-size(tablet) {
display: none;
}
@include screen-size(mobile) {
display: none;
}
}
& > .right {
flex: 1 1 auto;
@include screen-size(tablet) {
margin: 0 $size-margin-xlarge;
}
section {
margin-bottom: $size-margin-large;
}
}
}
@mixin layout-link-list {
@@ -56,6 +76,14 @@
}
}
@mixin no-select {
-webkit-touch-callout : none; /* iOS Safari */
-webkit-user-select : none; /* Chrome/Safari/Opera */
-moz-user-select : none; /* Firefox */
-ms-user-select : none; /* IE/Edge */
user-select : none; /* non-prefixed version, currently not supported by any browser */
}
@mixin pixel-image {
image-rendering : -moz-crisp-edges; /* Firefox */
image-rendering : -o-crisp-edges; /* Opera */
@@ -63,20 +91,3 @@
image-rendering : crisp-edges;
-ms-interpolation-mode : nearest-neighbor; /* IE (non-standard property) */
}
@mixin layout-body-with-sidebar {
display: flex;
& > .left {
flex: 0 0 $size-skyscraper-width + $size-margin-medium;
padding-right: $size-margin-medium;
}
& > .right {
flex: 1 1 auto;
section {
margin-bottom: $size-margin-large;
}
}
}