Responsive layout

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2012 Apigy Inc. and other contributors
+Copyright 2012—2014 Apigy Inc. and other contributors
 http://api.gy/
 
 Permission is hereby granted, free of charge, to any person obtaining
@@ -19,4 +19,3 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-

app/assets/stylesheets/footer.css.scss

@@ -1,22 +1,25 @@
-.footer 
+.footer
 {
   padding: 40px 0;
-  ul 
+  @media (max-width: $wrapper_breakpoint) {
+    padding: 40px;
+  }
+  ul
   {
     float: left;
   }
-  li 
+  li
   {
     margin-bottom: 10px;
   }
-  a 
+  a
   {
     font-size: 18px;
     color: #525252;
     font-family: $primary_font, $secondary_font, $tertiary_font;
   }
-  p 
+  p
   {
     font-size: 18px;
   }
-}
+}

app/assets/stylesheets/homepage.css.scss

@@ -10,24 +10,38 @@
   margin-top: 5px;
 }
 
-.fb-like 
+.fb-like
 {
-	margin-left: 5px;
-	float:left;
+  margin-left: 5px;
+  float: left;
 }
 
-#video 
+#video
 {
   float: left;
   width: 512px;
-  height: 385px;
   background: #fff;
   -moz-box-shadow: 0 2px 6px rgba(0,0,0,.39); /* drop shadow */
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.39); /* drop shadow */
   box-shadow: 0 2px 6px rgba(0,0,0,.39); /* drop shadow */
-  img:hover
+  img
   {
-	 opacity: 0.5;
-	 cursor: pointer;
+    width: 100%;
+    height: 100%;
+    &:hover {
+      opacity: 0.5;
+      cursor: pointer;
+    }
+  }
+  @media (max-width: $wrapper_breakpoint) {
+    float: none;
+    width: auto;
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
   }
-}
+  @media (max-width: $mobile_breakpoint) {
+     width: 100%;
+     height: auto;
+  }
+}

app/assets/stylesheets/homepage/call_to_action.css.scss

@@ -47,9 +47,14 @@
 
 #middle_reserve
 {
-  padding: 60px;
+  padding: 60px 0;
+  @media (max-width: $wrapper_breakpoint) {
+    width: auto;
+  }
   h2
   {
     margin-bottom: 26px;
+    margin-left: 50px;
+    margin-right: 50px;
   }
 }

app/assets/stylesheets/homepage/faq.css.scss

@@ -1,10 +1,19 @@
 #faqs {
   padding-bottom: 30px;
   border-bottom: 1px solid #dfdfdf;
+  @media (max-width: $wrapper_breakpoint) {
+    padding-left: 50px;
+    padding-right: 50px;
+    width: auto;
+  }
   ul {
     margin-top: 50px;
     float: left;
     width: 50%;
+    @media (max-width: $wrapper_breakpoint) {
+      float: none;
+      width: auto;
+    }
     li
     {
       width: 400px;
@@ -16,6 +25,10 @@
         line-height: 1.4;
         font-size: 18px;
       }
+      @media (max-width: $wrapper_breakpoint) {
+        width: 100%;
+        margin: 0 0 30px 0;
+      }
     }
   }
-}
+}

app/assets/stylesheets/homepage/key_points.css.scss

@@ -8,6 +8,11 @@
 
 .point_copy {
   width: 440px;
+  @media (max-width: $wrapper_breakpoint) {
+    width: auto;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
   h3 {
     margin: 20px 0 30px 0;
   }
@@ -27,7 +32,10 @@ h3 {
 #one {
   background: url(image_path("1-background.png")) no-repeat bottom left;
   height: 320px;
-  width: 936px;
+  width: $wrapper_width;
+  @media (max-width: $wrapper_breakpoint) {
+    width: 100%;
+  }
 }
 
 #two {
@@ -45,6 +53,15 @@ h3 {
   height: 320px;
 }
 
+@media (max-width: $mobile_breakpoint) {
+  #one, #two, #three, #four {
+    height: auto;
+  }
+}
+
 .right {
   margin-left: 500px;
+  @media (max-width: $wrapper_breakpoint) {
+    margin-left: 0;
+  }
 }

app/assets/stylesheets/homepage/other_points.css.scss

@@ -1,11 +1,17 @@
-#other_points 
+#other_points
 {
-  li 
+  li
   {
     width: 400px;
     float: left;
     margin: 0 120px 50px 0;
     padding-top: 60px;
+    @media (max-width: $wrapper_breakpoint) {
+      margin: 0;
+      padding: 0 50px 50px 50px;
+      width: auto;
+      float: none;
+    }
   }
   #section-1 {
     background: url(asset-path("", "images")) no-repeat center top;
@@ -24,5 +30,8 @@
   h4 {
     width: 400px;
     text-align: center;
+    @media (max-width: $wrapper_breakpoint) {
+      width: 100%;
+    }
   }
-}
+}

app/assets/stylesheets/homepage/press.css.scss

@@ -8,11 +8,18 @@
   {
     float: left;
     margin: 0 16px;
+    @media (max-width: $wrapper_breakpoint) {
+      float: none;
+      text-align: center;
+    }
     a {
       display: block;
       height: 48px;
       opacity: 0.2;
       text-indent: -10000px;
+      @media (max-width: $wrapper_breakpoint) {
+        margin: 10px auto;
+      }
     }
     a:hover {
       opacity: 1;

app/assets/stylesheets/homepage/stats.css.scss

@@ -31,6 +31,16 @@
     padding-right: 26px;
     padding-left: 26px;
     text-align: left;
+    @media (max-width: $mobile_breakpoint) {
+      padding-right: 10px;
+      padding-left: 10px;
+      &:first {
+        padding-left: 0;
+      }
+      &:last {
+        padding-right: 0;
+      }
+    }
     span
     {
       color: #868686;
@@ -40,6 +50,12 @@
       font-family: $primary_font, $secondary_font, $tertiary_font;
     }
   }
+  @media (max-width: $wrapper_breakpoint) {
+    float: none;
+    width: auto;
+    padding: 0 50px;
+    margin: 40px auto 0 auto;
+  }
 }
 body.lt-ie9
 {
@@ -62,6 +78,7 @@ body.lt-ie9
   border-radius: 30px;
   width: 383px;
   background: #dbdbdb;
+  overflow: hidden;
   #progress
   {
     height: 40px;
@@ -93,6 +110,9 @@ body.lt-ie9
     position: relative;
     top: -35px;
   }
+  @media (max-width: $wrapper_breakpoint) {
+    width: 100%;
+  }
 }
 .small
 {

app/assets/stylesheets/main.css.scss

@@ -1,8 +1,9 @@
 @import "variables";
+@import "responsive_embed";
 @import "primitives";
 @import "header";
 @import "footer";
 
 @import "homepage";
 @import "share";
-@import "checkout";
+@import "checkout";

app/assets/stylesheets/primitives.css.scss

@@ -1,12 +1,12 @@
 
 /* For modern browsers */
 .clearfix:before,
-.clearfix:after 
+.clearfix:after
 {
   content:"";
   display:table;
 }
-.clearfix:after 
+.clearfix:after
 {
     clear:both;
 }
@@ -44,7 +44,7 @@ form
   margin-top: 15px;
 }
 
-body, input, textarea 
+body, input, textarea
 {
   font-size: $font_size;
   font-family: $primary_font, $secondary_font, $tertiary_font;
@@ -53,18 +53,18 @@ body, input, textarea
   -webkit-font-smoothing: antialiased;
 }
 
-a 
+a
 {
   text-decoration: none;
   color: $link_color;
 }
 
-a:hover 
+a:hover
 {
   text-decoration: underline;
 }
 
-i 
+i
 {
   font-style: italic;
 }
@@ -111,6 +111,9 @@ h1 {
   color: $h1_color;
   letter-spacing: -.05em;
   float: left;
+  @media (max-width: $wrapper_breakpoint) {
+    margin-left: 50px;
+  }
   a
   {
     color: $h1_color;
@@ -143,15 +146,18 @@ h5 {
 }
 
 .wrapper {
-  width: 935px;
+  width: $wrapper_width;
   margin: 0 auto;
+  @media (max-width: $wrapper_breakpoint) {
+    width: 100%;
+  }
 }
 
 .center {
   text-align: center;
 }
 
-.gray_background 
+.gray_background
 {
   width:  100%;
   padding: 50px 0;
@@ -221,7 +227,7 @@ body.lt-ie9 {
   background-image: -o-linear-gradient(90deg, $button_top_gradient_hover 0%, $button_bottom_gradient_hover 100%); /* gradient fill */
   background-image: -webkit-linear-gradient(90deg, $button_top_gradient_hover 0%, $button_bottom_gradient_hover 100%); /* gradient fill */
   background-image: linear-gradient(90deg, $button_top_gradient_hover 0%, $button_bottom_gradient_hover 100%); /* gradient fill */
-  text-decoration: none;  
+  text-decoration: none;
 }
 
 .blue_button:active {
@@ -239,4 +245,4 @@ body.lt-ie9 {
   background-image: -o-linear-gradient(90deg, $button_top_gradient_active 0%, $button_bottom_gradient_active 100%); /* gradient fill */
   background-image: -webkit-linear-gradient(90deg, $button_top_gradient_active 0%, $button_bottom_gradient_active 100%); /* gradient fill */
   background-image: linear-gradient(90deg, $button_top_gradient_active 0%, $button_bottom_gradient_active 100%); /* gradient fill */
-}
+}