adjustments to responsive-test layout

data/layout.yml

@@ -5,14 +5,20 @@ susy:
 
 resolutions:
   - target: mobile-small
-    width: 240
+    width:  240
+    height: 320
   - target: mobile-large
-    width: 320
+    width:  320
+    height: 480
   - target: tablet-small
-    width: 480
+    width:  480
+    height: 768
   - target: tablet-large
-    width: 768
+    width:  768
+    height: 1024
   - target: screen-small
-    width: 1024
+    width:  1024
+    height: 1280
   - target: screen-large
-    width: 1280
+    width:  1280
+    height: 1024

source/assets/stylesheets/components/_type.scss

@@ -1,11 +1,14 @@
 .introduction {
-  @include font-size-large;
   padding-bottom: 0;
   max-width: 35em;
   text-align: center;
 
-  .main & {
-    @include trailer(1, $font-size-large);
-    text-align: left;
+  @include at-breakpoint($tablet-large) {
+    @include font-size-large;
+
+    .main & {
+      @include trailer(1, $font-size-large);
+      text-align: left;
+    }
   }
 }

source/assets/stylesheets/foundation/_headings.scss

@@ -39,7 +39,7 @@ h2,
 h3 { font-family: $font-family-display; }
 
 #{headings(3, 4)} {
-  @include padding-leader(2);
+  @include padding-leader;
   @include padding-trailer;
   @include font-size-regular;
   font-weight: $font-weight-bold;

source/assets/stylesheets/regions/_main.scss

@@ -1,8 +1,11 @@
 .main {
-  @include padding-leader(2);
-  @include padding-trailer(2);
+  @include padding-leader;
+  @include padding-trailer;
 
   @include at-breakpoint($tablet-large) {
+    @include padding-leader(2);
+    @include padding-trailer(2);
+
     .do-columns & {
       @include span-columns(8);
 

source/assets/stylesheets/regions/_navigation.scss

@@ -1,5 +1,4 @@
 .navigation {
-  margin: 0 #{-$gutter-width};
   @include padding-leader;
   background: $color-background;
 

source/assets/stylesheets/styleguide/_guide.scss

@@ -25,53 +25,83 @@
   }
 }
 
-@mixin styleguide-min-tablet-large {
+
+.responsive-test {
+  width: 100%;
+  height: 100%;
+  overflow: hidden {
+    x: scroll;
+  }
+
+  ul {
+    @extend %reset-list;
+    margin: {
+      right: 0;
+       left: 0;
+    }
+    max-width: none;
+  }
+
+  li { position: relative; }
+
+  h3 { padding: 0; }
+
+  iframe { @include box-shadow(0 1px 1px $color-shadow)}
+}
+
+@include at-breakpoint($tablet-large) {
   .responsive-test-url {
-    @extend %table-layout-min-tablet-large;
+    @extend %table-layout-tablet-large;
+    text-align: left;
 
     fieldset {
       display: table-row;
       padding: 0;
+    }
 
-      p {
-        @extend %table-layout-cell-min-tablet-large;
-        padding: 0;
-        width: 100%;
+    p {
+      @extend %table-layout-cell-tablet-large;
+      padding: 0;
+      width: 100%;
 
-        &:last-child {
-          width: 1px;
-          padding-left: $padding;
-          text-align: right;
-          white-space: nowrap;
+      &:last-child {
+        width: 1px;
+        padding-left: $gutter-width;
+        text-align: right;
+        white-space: nowrap;
 
-          .checkbox {
-            margin-right: 0;
-          }
-        }
+        .checkbox { margin-right: 0; }
       }
     }
+
+    label { padding-top: 0; }
+
+    input[type="text"] { width: 100%; }
   }
 
   .responsive-test {
-    width: 100%;
-    overflow: hidden {
-      x: scroll;
-    }
-
-    ul {
-      @extend %clear-fix-tablet-large;
-    }
+    ul { @extend %clear-fix-tablet-large; }
   }
 
   .frame {
     float: left;
-    margin: 0 $padding-small;
+    margin: 0 ($gutter-width / 2);
   }
 }
 
-@mixin styleguide-min-screen-small {
-  .tiles {
-    @extend %horizontal-description-list-min-screen-small;
+.width-only iframe { height: 640px; }
+
+.styleguide_responsive-test {
+  .toolkit,
+  .pop-stripe,
+  .banner,
+  .page-header,
+  .release,
+  .contentinfo { @extend .visually-hidden; }
+
+  .page {
+    margin-bottom: 0;
+    padding-bottom: 0;
   }
 }
 

source/styleguide/responsive-test.html.haml

@@ -3,10 +3,12 @@ title: Responsive Test
 layout: responsive_test
 ---
 
+
+
 .width-only.responsive-test
-  %ul{style: "width: 4000px"}
+  %ul{style: "width: 4202px"}
     - data.layout.resolutions.each_with_index do |resolution, index|
       %li.frame{id: "f" + "#{index + 1}"}
-        %h3= resolution.size
+        %h3= resolution.width
         = partial "layouts/components/progress"
-        %iframe(sandbox="allow-same-origin allow-forms allow-scripts" seamless=""){width: "#{resolution.size + 15}"}
+        %iframe(sandbox="allow-same-origin allow-forms allow-scripts" seamless=""){width: "#{resolution.width + 15}", height: "#{resolution.height}"}