1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

adding names to key sections of app and updating breakpoints

This commit is contained in:
Alex Windett 2017-02-03 11:25:29 +00:00
parent 9fb3c4be1e
commit 7508f3fdcb
4 changed files with 47 additions and 8 deletions

View File

@ -1,4 +1,10 @@
const Styled = require('styled-components');
const constants = require('@ui/shared/constants');
const {
colors,
sizes
} = constants;
const {
default: styled
@ -6,5 +12,7 @@ const {
// Main Contonent Wrapper Styles
module.exports = styled.article`
background-color: #fafafa;
background-color: ${colors.base.grey};
${sizes.sm}
`;

View File

@ -113,7 +113,7 @@ const Header = ({
);
return (
<StyledHeader>
<StyledHeader name="application-header">
<Container fluid>
<Row>
<Column xs={2}>

View File

@ -85,14 +85,14 @@ module.exports = (props) => {
<App {...props}>
<Header />
<Nav>
<Nav name="application-org-navigation">
<OrgNavigation />
</Nav>
<Article>
<Article name="application-content">
<Match component={Home} pattern='/:org?/:section?' />
<Miss component={NotFound} />
</Article>
<Footer />
<Footer name="application-footer" />
</App>
);
};

View File

@ -1,13 +1,44 @@
const styled = require('styled-components');
// github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
const small = {
upper: '48rem'
};
const medium = {
upper: '64rem',
lower: '48.1rem',
};
const large = {
upper: '75rem',
lower: '64.1rem',
};
const xlarge = {
lower: '75.1rem',
};
const screen = 'only screen';
const screens = {
// >= 768px
small: 'only screen and (min-width: 48rem)',
'small-only': `${screen} and (max-width: ${small.upper})`,
'small': `${screen} and (min-width: ${small.upper}})`,
// >= 1024px
medium: 'only screen and (min-width: 64rem)',
'medium-only': `${screen} and (min-width: ${medium.lower})
and (max-width: ${medium.upper})`,
'medium-down': `${screen} and (max-width: ${medium.upper})`,
'medium': `${screen} and (min-width: ${medium.lower})`,
// >= 1200px
large: 'only screen and (min-width: 75rem)'
'large-only': `${screen} and (min-width: ${large.lower})
and (max-width: ${large.upper})`,
'larg-down': `${screen} and (max-width: ${large.upper})`,
'large': `${screen} and (min-width: 75rem)`,
'xlarge': `${screen} and (min-width: ${xlarge.lower})
and (max-width: ${xlarge.upper})`,
'xlarge-up': `${screen} and (min-width: ${xlarge.lower})`,
};
const breakpoints = Object.keys(screens).reduce((acc, label) => {