aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
authorMegan Pearson <megan.e.pearson@gmail.com>2018-10-22 22:50:18 +0800
committerMegan Pearson <megan.e.pearson@gmail.com>2018-10-23 15:59:09 +0800
commit66848ef80ffc7d8d7566d8c9623198fd705ec0eb (patch)
tree6fc9d7c97ed3b0e8b6e6eb18fa8b99d8a11913cf /packages/dev-tools-pages/ts
parentf0b9365ca9c3df6ab2a6ab8bd3c43713d1bbd0d3 (diff)
downloaddexon-sol-tools-66848ef80ffc7d8d7566d8c9623198fd705ec0eb.tar
dexon-sol-tools-66848ef80ffc7d8d7566d8c9623198fd705ec0eb.tar.gz
dexon-sol-tools-66848ef80ffc7d8d7566d8c9623198fd705ec0eb.tar.bz2
dexon-sol-tools-66848ef80ffc7d8d7566d8c9623198fd705ec0eb.tar.lz
dexon-sol-tools-66848ef80ffc7d8d7566d8c9623198fd705ec0eb.tar.xz
dexon-sol-tools-66848ef80ffc7d8d7566d8c9623198fd705ec0eb.tar.zst
dexon-sol-tools-66848ef80ffc7d8d7566d8c9623198fd705ec0eb.zip
Responsive Compiler
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/components/Compiler.tsx40
1 files changed, 25 insertions, 15 deletions
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>
);
}