Add padding for twitter
/** @jsx jsx */
-import { Flex, Heading } from "@theme-ui/components";
+import { Box, Flex, Heading } from "@theme-ui/components";
import { graphql } from "gatsby";
import { Fragment } from "react";
import { jsx } from "theme-ui";
@@ -41,19 +41,25 @@ type Props = {
export default ({ data, pageContext }: Props) => {
const size = getSize(pageContext.cardType);
+ const padding = pageContext.cardType === "social-twitter" ? 14 : 0;
return (
<Fragment>
- <Flex
+ <Box
sx={{
...size,
overflow: "hidden",
background: "black",
+ p: padding,
}}
>
+ <Flex>
<img
src={data.file!.childImageSharp!.fixed!.src!}
- sx={{ height: size.height, width: size.height }}
+ sx={{
+ height: size.height - padding * 2,
+ width: size.height - padding * 2,
+ }}
/>
<Flex
@@ -71,12 +77,13 @@ export default ({ data, pageContext }: Props) => {
<Flex
sx={{
- flex: 1,
flexDirection: "column",
border: "14px solid black",
borderTop: "none",
borderRight: "none",
backgroundColor: "#34B4A1",
+ flex: 1,
+ width: size.width - size.height + 14 - padding,
p: 5,
}}
>
@@ -127,6 +134,7 @@ export default ({ data, pageContext }: Props) => {
</Flex>
</Flex>
</Flex>
+ </Box>
</Fragment>
);
};
