From 66848ef80ffc7d8d7566d8c9623198fd705ec0eb Mon Sep 17 00:00:00 2001
From: Megan Pearson <megan.e.pearson@gmail.com>
Date: Mon, 22 Oct 2018 16:50:18 +0200
Subject: Responsive Compiler

---
 .../dev-tools-pages/ts/components/Compiler.tsx     | 40 ++++++++++++++--------
 1 file changed, 25 insertions(+), 15 deletions(-)

(limited to 'packages/dev-tools-pages')

diff --git a/packages/dev-tools-pages/ts/components/Compiler.tsx b/packages/dev-tools-pages/ts/components/Compiler.tsx
index bda29dc1f..1c975e30d 100644
--- a/packages/dev-tools-pages/ts/components/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/components/Compiler.tsx
@@ -1,22 +1,30 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
+import { media, colors } from '../variables';
 
+import Container from './Container';
 import InlineCode from './InlineCode';
 
 const Cards = styled.dl`
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
-    align-items: start;
-    grid-gap: 1.25rem;
-    margin-top: 0;
-    margin-bottom: 0;
+    column-count: 3;
+    column-gap: 1.25rem;
+
+    ${media.small`
+        column-count: 1;
+    `}: ;
 `;
 
 const Card = styled.div`
     background-color: ${colors.lightGray};
     padding: 3.125rem;
     padding-bottom: 2.5rem;
+    display: inline-block;
+    margin: 0 0 1.25rem;
+    width: 100%;
+
+    ${media.small`
+        padding: 1.875rem;
+    `};
 `;
 
 const Dt = styled.dt`
@@ -63,14 +71,16 @@ const cards = [
 
 function Compiler() {
     return (
-        <Cards>
-            {cards.map(card => (
-                <Card key={card.title.split(' ').join('-')}>
-                    <Dt>{card.title}</Dt>
-                    <Dd>{card.body}</Dd>
-                </Card>
-            ))}
-        </Cards>
+        <Container wide>
+            <Cards>
+                {cards.map(card => (
+                    <Card key={card.title.split(' ').join('-')}>
+                        <Dt>{card.title}</Dt>
+                        <Dd>{card.body}</Dd>
+                    </Card>
+                ))}
+            </Cards>
+        </Container>
     );
 }
 
-- 
cgit