scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

using tabletPortrait instead of changing value of tablet var, per chrisg's suggestion

Browse source
This commit is contained in:
Ben Wheeler 2019-01-28 21:15:00 -05:00
parent 7b19878d7f
commit be975cba26
7 changed files with 33 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/_frameless.scss
View file

@ -35,7 +35,8 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em;
$cols12: (12 * ($column + $gutter) - $gutter) / $em;
$desktop: 942px;
$tablet: 768px;
$mobileIntermediary: 640px;
$tabletPortrait: 768px;
$mobile: 480px;
/* Media Queries */
@ -48,11 +49,11 @@ $mobile: 480px;
*/
$small: "only screen and (max-width : #{$mobile}-1)";
$medium: "only screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
$intermediate: "only screen and (min-width : #{$tablet}) and (max-width : #{$desktop}-1)";
$medium: "only screen and (min-width : #{$mobile}) and (max-width : #{$tabletPortrait}-1)";
$intermediate: "only screen and (min-width : #{$tabletPortrait}) and (max-width : #{$desktop}-1)";
$big: "only screen and (min-width : #{$desktop})";
$medium-and-smaller: "only screen and (max-width : #{$tablet}-1)";
$medium-and-smaller: "only screen and (max-width : #{$tabletPortrait}-1)";
$intermediate-and-smaller: "only screen and (max-width : #{$desktop}-1)";
$medium-and-intermediate: "only screen and (min-width : #{$mobile}) and (max-width : #{$desktop}-1)";
@ -60,7 +61,7 @@ $medium-and-intermediate: "only screen and (min-width : #{$mobile}) and (max-wid
/* Height */
$small-height: "only screen and (max-height : #{$mobile} - 1)";
$medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$tablet} - 1)";
$medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$tabletPortrait} - 1)";
//
@ -112,7 +113,7 @@ $medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$
#{$child-selector} {
margin: 0 auto;
width: $tablet;
width: $tabletPortrait;
}
}
}

2
src/components/modal/comments/modal.scss
View file

@ -1,7 +1,7 @@
@import "../../../colors";
@import "../../../frameless";
$medium-and-small: "screen and (max-width : #{$tablet}-1)";
$medium-and-small: "screen and (max-width : #{$mobileIntermediary}-1)";
.mod-report * {
box-sizing: border-box;

3
src/lib/frameless.js
View file

@ -3,7 +3,8 @@
*/
const frameless = {
desktop: 942,
tablet: 768,
tablet: 640,
tabletPortrait: 768,
mobile: 480
};

4
src/views/parents/parents.scss
View file

@ -150,7 +150,7 @@ $story-width: $cols3;
}
//6 columns
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediary - 1) {
.flex-row {
&.sidebar-row {
@ -179,7 +179,7 @@ $story-width: $cols3;
//8 columns
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
@media only screen and (min-width: $mobileIntermediary) and (max-width: $desktop - 1) {
.masthead {
h1 {
text-align: center;

29
src/views/splash/feature/top-banner.scss
View file

@ -74,7 +74,7 @@
background-color: $ui-dark-orange;
padding: 1rem 1.5rem;
font-size: 1rem;
&:before {
display: inline-block;
margin-right: .5rem;
@ -106,10 +106,10 @@
}
}
@media only screen and (min-width: $tablet) {
@media only screen and (min-width: $mobileIntermediary) {
.feature-top-banner {
margin-bottom: 80px; // double the normal banner 40px for the notch
&:after{
display: block;
position: absolute;
@ -121,7 +121,7 @@
height: 56px;
content: "";
}
.feature-top-container {
transform: translateX(-15%);
}
@ -140,19 +140,19 @@
@media only screen and (min-width: $mobile) and (max-width: $desktop - 1) {
.feature-top-banner {
justify-content: flex-start;
.feature-header {
text-align: left; // override #view text centering
}
.feature-banner-images {
justify-content: flex-end;
}
.feature-top-container {
transform: translateX(10%);
}
.feature-banner-image {
&.left {
display: none;
@ -161,7 +161,7 @@
}
}
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
@media only screen and (min-width: $mobileIntermediary) and (max-width: $desktop - 1) {
.feature-top-banner {
.feature-banner-images {
overflow: hidden; // make sure overflow is hidden to avoid scrolling with translated content
@ -176,7 +176,7 @@
}
}
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediary - 1) {
.feature-top-banner {
.feature-banner-image {
&.right {
@ -191,7 +191,7 @@
.feature-top-banner {
overflow: hidden;
min-height: 32rem;
.feature-top-container {
right: 0;
left: 0;
@ -200,19 +200,19 @@
justify-content: flex-start;
align-items: center;
}
.feature-header {
margin: 2rem 0;
text-align: center;
}
.feature-banner-image {
&.right {
margin-right: 0;
margin-bottom: -4rem;
width: 100%;
}
&.left {
margin-bottom: .5rem;
display: block;
@ -221,4 +221,3 @@
}
}
}

2
src/views/splash/splash.scss
View file

@ -165,7 +165,7 @@
.modal-content-iframe.mod-confirmation {
border-radius: 0;
width: $tablet - 1;
width: $mobileIntermediary - 1;
}
}

12
src/views/wedo2-legacy/wedo2.scss
View file

@ -59,7 +59,7 @@
width: 100%;
}
}
}
}
section {
margin-bottom: 50px;
@ -72,7 +72,7 @@
display: flex;
justify-content: space-between;
.column {
.column {
margin: 15px;
max-width: $cols4;
@ -106,7 +106,7 @@
margin: 0 auto;
max-width: $cols9;
justify-content: space-between;
}
}
.project-card {
transition: transform .25s ease;
@ -132,7 +132,7 @@
&:hover {
transform: scale(1.1, 1.1);
transition: transform .25s ease;
cursor: pointer;
cursor: pointer;
p {
color: $ui-blue-dark;
@ -162,7 +162,7 @@
margin: 0 auto;
width: calc(100% - 40px);
}
.top-banner {
text-align: center;
@ -226,7 +226,7 @@
.inner {
margin: 0 auto;
width: $tablet;
width: $mobileIntermediary;
}
}
}