crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enables fullwidth sections. As in edge-to-edge

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-11-29 14:58:30 +01:00
parent 96b9ffc847
commit e10d34cdfc
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/ts/@next/components/layout.tsx
View File

@@ -70,10 +70,10 @@ export const Main = styled.main`
`;
export const Section = styled.section<SectionProps>`
width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100vw'};
padding: ${props => !props.noPadding && '30px'};
margin-bottom: ${props => !props.noMargin && `${GUTTER}px`};
margin-left: ${props => props.fullWidth && `-${GUTTER}px`};
margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`};
background-color: ${props => props.bgColor};
border: 1px dotted rgba(0, 255, 0, 0.3);
`;

4
packages/website/ts/@next/pages/landing.tsx
View File

@@ -5,10 +5,14 @@ import { colors } from 'ts/style/colors'
import { Button, ButtonTransparent } from 'ts/@next/components/button';
import { Column, Section, Wrap } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
<<<<<<< Updated upstream
import { Heading, Intro, Text } from 'ts/@next/components/text';
import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
import protocol from 'ts/@next/icons/illustrations/protocol.svg';
=======
import { Section, Wrap } from 'ts/@next/components/layout';
>>>>>>> Stashed changes
const Icon = styled.div`
flex-shrink: 0;