Responsive: computer width #6

Author: lorensr

components/SubscribeForm.js

@@ -4,8 +4,11 @@ import gql from 'graphql-tag'
 import RaisedButton from 'material-ui/RaisedButton'
 import Dialog from 'material-ui/Dialog'
 import FlatButton from 'material-ui/FlatButton'
+
 import Email from './email'
 
+import { iPadMaxW } from '../lib/styles'
+
 class SubscribeForm extends React.Component {
   static propTypes = {
     mutate: React.PropTypes.func.isRequired,
@@ -24,7 +27,7 @@ class SubscribeForm extends React.Component {
   componentDidMount() {
     // when focusing on small screens, browser sets scrollTop to make sure
     // input is in view, which we don't want
-    if (window.screen.height >= 768) {
+    if (window.screen.height >= 768 && window.screen.width > iPadMaxW) {
       this.formEmail.textHandler.focus()
     }
   }

css/raw.js

@@ -1,9 +1,11 @@
 import { grey200 } from 'material-ui/styles/colors'
 
-import { fontFamily, color, white, black, grey } from '../lib/styles'
+import { fontFamily, color, white, black, grey, iPadMaxW } from '../lib/styles'
 
 const background = '#f2f2f2'
 
+const macbookAirMaxW = 1279
+
 export default `
 body {
   font-family: ${fontFamily};
@@ -22,7 +24,6 @@ a {
   color: ${color};
   text-decoration: none;
 }
-
 a:hover {
   text-decoration: underline;
 }
@@ -36,6 +37,22 @@ a:hover {
   }
 }
 
+.landing-header {
+  width: 43vw;
+}
+.book-title {
+  margin: 5vh 0 15vh 0;
+}
+@media (max-width: ${iPadMaxW}px) {
+  .landing-header {
+    width: 100vw;
+  }
+
+  .book-title {
+    margin: 10px 0 20px 0;
+  }
+}
+
 .ripple-ball {
   width: 50px;
   height: 50px;
@@ -66,12 +83,13 @@ a:hover {
   width: 80px;
   height: 80px;
 }
-@media (max-height: 799px) {
+@media (max-height: 799px), (max-width: 1425px) {
   .logo-collection .svg-wrapper {
     width: 50px;
     height: 50px;
   }
 }
+
 .logo-collection svg {
   width: 100%;
   height: 100%;

lib/styles.js

@@ -6,3 +6,5 @@ export const white = '#f9f9f9'
 export const color = '#E10098'
 export const black = darkBlack
 export const grey = grey400
+
+export const iPadMaxW = 1023

pages/index.js

@@ -123,22 +123,22 @@ class Index extends Component {
             </title>
           </Head>
           <main
+            className="-landing"
             style={{
               display: 'flex',
-              flexDirection: 'row wrap',
+              flexDirection: 'row',
+              flexWrap: 'wrap',
               width: '100vw',
-              height: '100%',
-              minHeight: '100vh',
             }}
             >
             <Paper
+              className="landing-header"
               zDepth={2}
               style={{
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'center',
                 alignItems: 'center',
-                width: '43vw',
                 textAlign: 'center',
                 padding: 10,
                 backgroundColor: color,
@@ -158,14 +158,10 @@ class Index extends Component {
                 { // eslint-disable-next-line
                 }<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 279.4 249.6"><path id="logo-outline" d="M267.4 171.4V47.2c8.3-1.9 13.5-10.3 11.6-18.6-1.9-8.3-10.3-13.5-18.6-11.6-7 1.6-12 7.9-12 15.1 0 .4 0 .8.1 1.3L227 40.3v-9.7c8.3-1.9 13.5-10.3 11.6-18.6S228.2-1.5 219.9.4c-6 1.4-10.6 6.2-11.7 12.3-27.9 2.2-53.8 10.4-68.5 39.2-14.7-28.7-40.6-37-68.5-39.2-1.6-8.4-9.6-14-18.1-12.4s-14 9.6-12.4 18.1c1.1 6.1 5.7 10.9 11.8 12.3v9.7l-21.5-7c0-.4.1-.8.1-1.3 0-8.6-6.9-15.5-15.5-15.5S0 23.5 0 32.1c0 7.2 5 13.5 12 15.1v124.1C3.7 173.3-1.5 181.6.5 190s10.3 13.5 18.6 11.6c4-.9 7.4-3.4 9.6-6.9l95.5 37.1c-.1.7-.2 1.5-.2 2.2.4 8.6 7.7 15.1 16.3 14.7 8-.4 14.3-6.8 14.7-14.7 0-.7-.1-1.3-.1-2l95.9-37.3c4.6 7.2 14.1 9.4 21.4 4.9 7.2-4.6 9.4-14.1 4.9-21.4-2.3-3.4-5.7-5.9-9.7-6.8zm-140.8 54l-95.7-37.3c.1-.5.1-1.1.1-1.6 0-7.2-5-13.5-12-15.1V47.2c4.1-1 7.7-3.5 9.8-7.2l23.6 7.6V155c-8.3 1.9-13.5 10.3-11.6 18.6s10.3 13.5 18.6 11.6c5.3-1.2 9.6-5.2 11.3-10.4 25 4 51.5 18.1 64.6 44.2-3.5 1-6.6 3.3-8.7 6.4zm11.1-157.8V209c-15.2-24-41.6-37.2-66.4-41.1-.9-6.3-5.6-11.4-11.8-12.8V30.6c5.5-1.3 9.9-5.4 11.4-10.9 14.9 1.2 26.5 4.1 36 8.7 13.6 6.7 23.3 17.5 29.6 33.2l1.2 3.1v2.9zm4 7.3V64.7l1.2-3.1c6.3-15.7 16-26.5 29.6-33.2 9.4-4.6 21.1-7.4 35.9-8.7 1.5 5.4 5.9 9.6 11.4 10.9v124.5c-6.2 1.4-10.9 6.5-11.8 12.8-24.8 3.9-51.1 17-66.4 41.1V74.9zm118.7 96.5c-7 1.6-12 7.9-12 15.1 0 .6 0 1.1.1 1.6l-96.1 37.4c-2-3-5-5.2-8.4-6.3 13-26.1 39.6-40.3 64.7-44.3 2.6 8.2 11.3 12.7 19.5 10.1 8.2-2.6 12.7-11.3 10.1-19.5-1.7-5.2-5.9-9.2-11.3-10.4V47.7l23.7-7.6c2.2 3.6 5.7 6.2 9.8 7.2l-.1 124.1z"/><path d="M70.8 174.9c-2.6 8.2-11.3 12.7-19.5 10.1-8.2-2.6-12.7-11.3-10.1-19.5 1.7-5.2 5.9-9.2 11.3-10.4V47.7l-23.6-7.6c-2.2 3.6-5.7 6.2-9.8 7.2v124.1c7 1.6 12 7.9 12 15.1 0 .5 0 1.1-.1 1.6l95.7 37.2c2.1-3.1 5.2-5.3 8.8-6.2-13.2-26.1-39.7-40.2-64.7-44.2zM250.6 40.1l-23.7 7.6v107.4c8.3 1.9 13.5 10.3 11.6 18.6-1.9 8.3-10.3 13.5-18.6 11.6-5.3-1.2-9.6-5.2-11.3-10.4-25 4-51.6 18.2-64.7 44.3 3.4 1.1 6.4 3.3 8.4 6.3l96.1-37.4c-.1-.5-.1-1.1-.1-1.6 0-7.2 5-13.5 12-15.1V47.2c-4-.9-7.6-3.5-9.7-7.1z"/><path d="M59.5 155.1c6.2 1.4 10.9 6.5 11.9 12.8 24.8 3.9 51.1 17 66.4 41.1V64.7l-1.2-3.1c-6.3-15.7-16-26.5-29.6-33.2-9.4-4.6-21.1-7.4-36-8.7-1.5 5.4-5.9 9.6-11.4 10.9v124.5zm82.2 53.9c15.2-24.1 41.6-37.2 66.4-41.1.9-6.3 5.6-11.4 11.8-12.8V30.6c-5.5-1.3-9.9-5.4-11.4-10.9-14.9 1.3-26.5 4.1-35.9 8.7-13.6 6.7-23.3 17.5-29.6 33.2l-1.2 3.1-.1 144.3z"/></svg>
               </div>
-              <div
-                style={{
-                  margin: '5vh 0 15vh 0',
-                }}
-                >
+              <div className="book-title">
                 <h1
                   style={{
-                    fontSize: 70,
+                    fontSize: '4vw',
                     fontWeight: 400,
                     margin: '0 0 20px 0',
                     textAlign: 'center',
@@ -179,7 +175,7 @@ class Index extends Component {
                     alignItems: 'center',
                     justifyContent: 'center',
                     fontWeight: 300,
-                    fontSize: 40,
+                    fontSize: '2.5vw',
                     color: white,
                   }}
                   >
@@ -198,7 +194,7 @@ class Index extends Component {
                 style={{
                   display: 'flex',
                   alignItems: 'center',
-                  fontSize: 22,
+                  fontSize: '1.3vw',
                 }}
                 >
                 By
@@ -346,7 +342,9 @@ class Index extends Component {
                 style={{
                   opacity: 0,
                   display: 'flex',
-                  flexDirection: 'row wrap',
+                  flexDirection: 'row',
+                  justifyContent: 'center',
+                  flexWrap: 'wrap',
                 }}
                 ref={(logos) => { this.logos = logos }}
                 >