0e3cd82348
* fix button dimensions * fix footer hover color * breakout in trace component * fix padding on button on small screens * fix title with content on small screens * sizing adjustment in intro component * intro component adjustments * container size adjustments * meta og images * fixed gutter size * trace component fix + breakout fix * show copy button if touch device * responsive hero animation
36 lines
671 B
TypeScript
36 lines
671 B
TypeScript
import { css } from 'styled-components';
|
|
|
|
const colors = {
|
|
black: '#000000',
|
|
white: '#FFFFFF',
|
|
lightGray: '#F1F4F5',
|
|
gray: '#F1F2F7',
|
|
darkGray: '#E9ECED',
|
|
darkestGray: '#E2E5E6',
|
|
blueGray: '#ECEFF9',
|
|
};
|
|
|
|
interface SizesInterface {
|
|
[key: string]: number;
|
|
}
|
|
|
|
const sizes: SizesInterface = {
|
|
xlarge: 1420,
|
|
large: 1000,
|
|
medium: 900,
|
|
small: 650,
|
|
};
|
|
|
|
const media = Object.keys(sizes).reduce((acc: any, label: string) => {
|
|
acc[label] = (args: any) => css`
|
|
@media (max-width: ${sizes[label] / 16}em) {
|
|
${css(args)};
|
|
}
|
|
`;
|
|
|
|
return acc;
|
|
}, {});
|
|
|
|
export default media;
|
|
export { colors, media };
|