renamed frameless.js tablet var to mobileIntermediate, use tabletPortrait for breaks

src/_frameless.scss

@@ -35,7 +35,7 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em;
 $cols12: (12 * ($column + $gutter) - $gutter) / $em;
 
 $desktop: 942px;
-$mobileIntermediary: 640px;
+$mobileIntermediate: 640px;
 $tabletPortrait: 768px;
 $mobile: 480px;
 

src/components/carousel/carousel.jsx

@@ -31,7 +31,7 @@ const Carousel = props => {
                 }
             },
             {
-                breakpoint: frameless.tablet,
+                breakpoint: frameless.mobileIntermediate,
                 settings: {
                     slidesToScroll: 2,
                     slidesToShow: 2

src/components/carousel/legacy-carousel.jsx

@@ -35,7 +35,7 @@ const Carousel = props => {
                 }
             },
             {
-                breakpoint: frameless.tablet,
+                breakpoint: frameless.mobileIntermediate,
                 settings: {
                     slidesToScroll: 2,
                     slidesToShow: 2

src/components/footer/www/footer.jsx

@@ -13,7 +13,7 @@ require('./footer.scss');
 
 const Footer = props => (
     <FooterBox>
-        <MediaQuery maxWidth={frameless.tablet - 1}>
+        <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
             <div className="lists">
                 <dl>
                     <dd>
@@ -51,7 +51,7 @@ const Footer = props => (
                 </dl>
             </div>
         </MediaQuery>
-        <MediaQuery minWidth={frameless.tablet}>
+        <MediaQuery minWidth={frameless.mobileIntermediate}>
             <div className="lists">
                 <dl>
                     <dt>

src/components/masonrygrid/masonrygrid.jsx

@@ -39,12 +39,12 @@ class MasonryGrid extends React.Component {
     render () {
         return (
             <this.props.as className={classNames('masonry', this.props.className)}>
-                <MediaQuery maxWidth={frameless.tablet - 1}>
+                <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
                     {this.props.children}
                 </MediaQuery>
                 <MediaQuery
                     maxWidth={frameless.desktop - 1}
-                    minWidth={frameless.tablet}
+                    minWidth={frameless.mobileIntermediate}
                 >
                     {this.reorderColumns(this.props.children, 2)}
                 </MediaQuery>

src/components/modal/comments/modal.scss

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

src/lib/frameless.js

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

src/views/parents/parents.scss

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

src/views/preview/presentation.jsx

@@ -343,7 +343,7 @@ const PreviewPresentation = ({
                                     onUpdateProjectThumbnail={onUpdateProjectThumbnail}
                                 />
                             </div>
-                            <MediaQuery maxWidth={frameless.tablet - 1}>
+                            <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
                                 <FlexRow className="preview-row force-center">
                                     <div className="wrappable-item">
                                         <Stats
@@ -380,7 +380,7 @@ const PreviewPresentation = ({
                                 <RemixCredit projectInfo={parentInfo} />
                                 <RemixCredit projectInfo={originalInfo} />
                                 {/*  eslint-disable max-len */}
-                                <MediaQuery maxWidth={frameless.tablet - 1}>
+                                <MediaQuery maxWidth={frameless.tabletPortrait - 1}>
                                     {(extensions && extensions.length) ? (
                                         <FlexRow className="preview-row">
                                             {extensionChips}
@@ -491,7 +491,7 @@ const PreviewPresentation = ({
                                 {/*  eslint-enable max-len */}
                             </FlexRow>
                         </FlexRow>
-                        <MediaQuery minWidth={frameless.tablet}>
+                        <MediaQuery minWidth={frameless.tabletPortrait}>
                             <FlexRow className="preview-row">
                                 <Stats
                                     faved={faved}
@@ -521,7 +521,7 @@ const PreviewPresentation = ({
                                 />
                             </FlexRow>
                         </MediaQuery>
-                        <MediaQuery minWidth={frameless.tablet}>
+                        <MediaQuery minWidth={frameless.tabletPortrait}>
                             {(extensions && extensions.length) ? (
                                 <FlexRow className="preview-row">
                                     {extensionChips}

src/views/preview/preview.scss

@@ -352,6 +352,7 @@ $stage-width: 480px;
 
     @media #{$medium-and-smaller} {
         .preview-row {
+            margin-top: .5rem;
             align-items: center;
         }
     }
@@ -419,6 +420,7 @@ $stage-width: 480px;
 
         @media #{$medium-and-smaller} {
             flex-direction: row;
+            margin-bottom: .5rem;
         }
     }
 

src/views/splash/feature/top-banner.scss

@@ -106,7 +106,7 @@
     }
 }
 
-@media only screen and (min-width: $mobileIntermediary) {
+@media only screen and (min-width: $mobileIntermediate) {
     .feature-top-banner {
         margin-bottom: 80px; // double the normal banner 40px for the notch
 
@@ -161,7 +161,7 @@
     }
 }
 
-@media only screen and (min-width: $mobileIntermediary) and (max-width: $desktop - 1) {
+@media only screen and (min-width: $mobileIntermediate) 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: $mobileIntermediary - 1) {
+@media only screen and (min-width: $mobile) and (max-width: $mobileIntermediate - 1) {
     .feature-top-banner {
         .feature-banner-image {
             &.right {

src/views/splash/presentation.jsx

@@ -287,7 +287,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
             rows.push(
                 <MediaQuery
                     key="frameless-tablet"
-                    minWidth={frameless.tablet}
+                    minWidth={frameless.mobileIntermediate}
                 >
                     <MiddleBanner />
                 </MediaQuery>

src/views/splash/splash.scss

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

src/views/wedo2-legacy/wedo2.scss

@@ -226,7 +226,7 @@
 
         .inner {
             margin: 0 auto;
-            width: $mobileIntermediary;
+            width: $mobileIntermediate;
         }
     }
 }