adding names to key sections of app and updating breakpoints
This commit is contained in:
parent
9fb3c4be1e
commit
7508f3fdcb
@ -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}
|
||||
`;
|
||||
|
@ -113,7 +113,7 @@ const Header = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledHeader>
|
||||
<StyledHeader name="application-header">
|
||||
<Container fluid>
|
||||
<Row>
|
||||
<Column xs={2}>
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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) => {
|
||||
|
Loading…
Reference in New Issue
Block a user