Merge pull request #3 from alphagov/improve-tablet

Improve layout on smaller screens

assets/css/main.css

@@ -78,6 +78,39 @@ html, body {
 .layout-2x1-75-25 .item-2 { width: 75%; height: 75%; }
 .layout-2x1-75-25 .item-3 { width: 75%; height: 25%; }
 
+.layout-2x1-responsive .item-1 { float: right; width: 25%; height: 100%; }
+.layout-2x1-responsive .item-2 { width: 75%; height: 75%; }
+.layout-2x1-responsive .item-3 { width: 75%; height: 25%; }
+
+@media (max-width: 980px) {
+  .layout-2x1-responsive .item-1 { width: 40%; }
+  .layout-2x1-responsive .item-2 { width: 60%; }
+  .layout-2x1-responsive .item-3 { width: 60%; }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  /* duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
+  .layout-thumb.layout-2x1-responsive .item-1 {
+    animation: 2s linear 0s infinite normal none running column1animation;
+  }
+
+  .layout-thumb.layout-2x1-responsive .item-2,
+  .layout-thumb.layout-2x1-responsive .item-3 {
+    animation: 2s linear 0s infinite normal none running column2animation;
+  }
+
+  @keyframes column1animation {
+    0% { width: 40%; }
+    50% { width: 60%; }
+    100% { width: 40%; }
+  }
+  @keyframes column2animation {
+    0% { width: 60%; }
+    50% { width: 40%; }
+    100% { width: 60%; }
+  }
+}
+
 .layout-2x1ish .item { width: 67%; height: 50%; }
 .layout-2x1ish .item-1 { height: 100%; width: 33%; }
 

build.html

@@ -75,6 +75,13 @@ <h2>Pick Layout</h2>
           </label>
         </li>
 
+        <li>
+          <label for="layout-2x1-responsive">
+            <input type="radio" id="layout-2x1-responsive" name="layout" value="2x1-responsive">
+            <span>2x1-responsive</span>
+          </label>
+        </li>
+
         <li>
           <label for="layout-sidebar-plus-3row">
             <input type="radio" id="layout-sidebar-plus-3row" name="layout" value="sidebar-plus-3row">