styled landing page for desktop media queries

j-stuckey · Sep 19, 2018 · b56dfdb · b56dfdb
1 parent cdece18
commit b56dfdb
Showing 1 changed file with 52 additions and 18 deletions.
diff --git a/src/components/styles/landing-page.module.css b/src/components/styles/landing-page.module.css
@@ -98,6 +98,11 @@
 .demoHeader,
 .demoAccount {
   text-align: center;
+  margin-bottom: 5vh;
+}
+
+.demoAccount {
+  margin-bottom: 7vh;
 }
 
 .demoLabel {
@@ -167,17 +172,17 @@
     width: 90vw;
   }
 
-  .demoHeader,
-  .demoAccount {
-    margin-bottom: 10vh;
-  }
-
   .demoAccount {
     width: 60vw;
   }
 }
 
 @media only screen and (min-width: 601px) {
+  .landing,
+  .featurePage {
+    height: 80vh;
+  }
+
   .landingContent {
     width: 40%;
   }
@@ -188,10 +193,6 @@
     height: 150px;
   }
 
-  /* .featurePage {
-    height: 80vh;
-  } */
-
   .leftCloudBackground,
   .rightCloudBackground {
     flex-direction: row;
@@ -215,32 +216,29 @@
     max-width: 400px;
   }
 
-  .feedback {
-    margin-right: 25vw;
+  .feedback,
+  .algo {
     width: 30vw;
     max-width: 300px;
   }
 
+  .feedback {
+    margin-right: 25vw;
+  }
+
   .rightCloudBackground {
     background: no-repeat right/55% url('../../images/rightBigCloud.svg');
     padding: 0 5vw;
   }
 
   .algo {
     margin-left: 25vw;
-    width: 30vw;
-    max-width: 300px;
   }
 
   .demoHeader {
     width: 60vw;
   }
 
-  .demoHeader,
-  .demoAccount {
-    margin-bottom: 5vh;
-  }
-
   .demoAccount {
     width: 40vw;
   }
@@ -254,3 +252,39 @@
     top: 0;
   }
 }
+
+@media only screen and (min-width: 800px) {
+  .landing,
+  .featurePage {
+    height: 100vh;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .feedback,
+  .algo {
+    max-width: 400px;
+  }
+
+  .feedback {
+    margin-right: 27vw;
+  }
+
+  .algo {
+    margin-left: 27vw;
+  }
+
+  .h2,
+  .h3 {
+    font-size: 2.5em;
+  }
+
+  .h4 {
+    font-size: 2em;
+  }
+
+  .demoLabel {
+    font-size: 1.25em;
+  }
+
+}