diff options
| author | Fred Carlsen <fred@sjelfull.no> | 2018-12-07 20:51:45 +0800 |
|---|---|---|
| committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-07 20:51:45 +0800 |
| commit | 701ea77a79466ce57d609c322aa1f0c37d34cca2 (patch) | |
| tree | f2cf9ffe4d86fb26f10a0498b91943e7bae7225d /packages/website/ts | |
| parent | b68f3eb7720f1ab106d9903b0eef6c27f5149734 (diff) | |
| download | dexon-sol-tools-701ea77a79466ce57d609c322aa1f0c37d34cca2.tar dexon-sol-tools-701ea77a79466ce57d609c322aa1f0c37d34cca2.tar.gz dexon-sol-tools-701ea77a79466ce57d609c322aa1f0c37d34cca2.tar.bz2 dexon-sol-tools-701ea77a79466ce57d609c322aa1f0c37d34cca2.tar.lz dexon-sol-tools-701ea77a79466ce57d609c322aa1f0c37d34cca2.tar.xz dexon-sol-tools-701ea77a79466ce57d609c322aa1f0c37d34cca2.tar.zst dexon-sol-tools-701ea77a79466ce57d609c322aa1f0c37d34cca2.zip | |
Mobile tweaks
Diffstat (limited to 'packages/website/ts')
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 18 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/logo.tsx | 4 |
2 files changed, 20 insertions, 2 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index d30b7a9d1..1fa145368 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -68,9 +68,13 @@ const COLUMN_WIDTHS: ColumnWidths = { export const Main = styled.main` border: 1px dotted rgba(0, 0, 255, 0.3); - width: calc(100% - 60px); + width: calc(100% - 0); max-width: ${MAX_WIDTH}px; margin: 0 auto; + + @media (min-width: ${BREAKPOINTS.mobile}) { + width: calc(100% - 60px); + } `; // We can also turn Section into a stateless comp, @@ -91,7 +95,7 @@ export const Section = styled.section<SectionProps>` } @media (max-width: ${BREAKPOINTS.mobile}) { - padding: 30px; + padding: 20px; } `; @@ -100,6 +104,10 @@ const WrapBase = styled.div<WrapProps>` padding: ${props => props.padding && getCSSPadding(props.padding)}; background-color: ${props => props.bgColor}; margin: 0 auto; + + @media (max-width: ${BREAKPOINTS.mobile}) { + padding: 20px 0; + } `; export const Wrap = styled(WrapBase)` @@ -132,6 +140,12 @@ export const Column = styled.div<ColumnProps>` @media (min-width: ${BREAKPOINTS.mobile}) { width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; } + + @media (max-width: ${BREAKPOINTS.mobile}) { + padding-left: 0; + padding-right: 0; + margin-bottom: var(--gutterMobile, 20px); + } `; WrapGrid.defaultProps = { diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx index 96658a4b2..6e6abee2a 100644 --- a/packages/website/ts/@next/components/logo.tsx +++ b/packages/website/ts/@next/components/logo.tsx @@ -30,6 +30,10 @@ const Icon = styled(LogoIcon)` path { fill: ${(props: LogoInterface) => props.isLight ? '#fff' : props.theme.textColor}; + + @media (max-width: 768px) { + fill: #fff; + } } `; |