{"version":3,"sources":["webpack:///./src/pages/work.js","webpack:///./src/components/FirstCard.js","webpack:///./src/components/Card.js","webpack:///./src/components/CardList.js","webpack:///./src/components/PageTitle.js","webpack:///./src/components/PageResponsiveTitle.js","webpack:///./src/components/ContainerGrid.js"],"names":["query","Works","posts","data","allContentfulWork","edges","config","siteTitle","firstHeroImage","Post","styled","li","props","theme","responsive","small","featured","medium","colors","tertiary","base","Card","heroImage","to","fluid","backgroundColor","ImageLink","Link","slug","title","hex","List","ul","CardList","map","post","node","key","id","activeTag","FirstCard","Title","h1","highlight","PageTitle","children","ResponsiveTitle","PostTitle","Wrapper","section","large","veryLarge","Container"],"mappings":"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","file":"component---src-pages-work-js-3d4e8068ee4bcd441b26.js","sourcesContent":["import React from 'react'\nimport { graphql } from 'gatsby'\n\n//Component\nimport Layout from '../components/Layout'\nimport CardList from '../components/CardList'\nimport SEO from '../components/SEO'\nimport Helmet from 'react-helmet'\nimport config from '../utils/siteConfig'\nimport PageTitle from '../components/PageTitle'\nimport PageResponsiveTitle from '../components/PageResponsiveTitle'\nimport ContainerGrid from '../components/ContainerGrid'\n\nconst Works = ({ data }) => {\n  const posts = data.allContentfulWork.edges\n  return (\n    <Layout>\n      <Helmet>\n        <title>{`${config.siteTitle}`}</title>\n      </Helmet>\n      <SEO />\n      <ContainerGrid>\n\n        <PageTitle>Work.</PageTitle>\n        <PageResponsiveTitle>Work.</PageResponsiveTitle>\n\n        <CardList\n            posts={posts}\n            firstHeroImage={false}\n        />\n      </ContainerGrid>\n    </Layout>\n  )\n}\n\nexport const query = graphql`\n  query {\n    allContentfulWork(sort: { fields: [publishDate], order: DESC }) {\n      edges {\n        node {\n          title\n          id\n          featuredHeader\n          slug\n          publishDate(formatString: \"MMMM DD, YYYY\")\n          heroImage {\n            title\n            fluid(maxWidth: 2200) {\n              ...GatsbyContentfulFluid_withWebp_noBase64\n            }\n          }\n          body {\n            childMarkdownRemark {\n              html\n              excerpt(pruneLength: 80)\n            }\n          }\n        }\n      }\n    }\n  }\n`\nexport default Works\n","import React from 'react'\nimport styled from 'styled-components'\nimport { Link } from 'gatsby'\nimport Img from 'gatsby-image'\n\nconst Post = styled.li`\n  position: relative;\n  // border: 1px solid ${props => props.theme.colors.secondary};\n  // border-radius: 2px;\n  margin: 0 0 1em 0;\n  width: 100%;\n  transition: background 0.2s;\n  @media screen and (min-width: ${props => props.theme.responsive.small}) {\n    flex: ${props => (props.featured ? '0 0 100%' : '0 0 49%')};\n    margin: 0 0 2vw 0;\n  }\n  @media screen and (min-width: ${props => props.theme.responsive.medium}) {\n    flex: ${props => (props.featured ? '0 0 100%' : '0 0 32%')};\n  }\n  &:hover {\n    background: ${props => props.theme.colors.tertiary};\n  }\n  a {\n    display: flex;\n    flex-flow: column;\n    height: 100%;\n    width: 100%;\n    color: ${props => props.theme.colors.base};\n    text-decoration: none;\n    .gatsby-image-wrapper {\n      height: 0;\n      padding-bottom: 60%;\n      @media screen and (min-width: ${props => props.theme.responsive.small}) {\n        padding-bottom: ${props => (props.featured ? '40%' : '60%')};\n      }\n    }\n  }\n`\n\nconst Card = ({heroImage }) => {\n    return (\n      <Post>\n        <Link to={'/new-work'}>\n          <Img fluid={heroImage.fluid} backgroundColor={'#eeeeee'} />\n        </Link>\n      </Post>\n    )\n}\n\nexport default Card\n","import React from 'react'\nimport styled from 'styled-components'\nimport { Link } from 'gatsby'\nimport Img from 'gatsby-image'\n\nconst Post = styled.li`\n  position: relative;\n  margin: 0 0 1em 0;\n  width: 100%;\n  transition: background 0.2s;\n  @media screen and (min-width: ${props => props.theme.responsive.small}) {\n    flex: ${props => (props.featured ? '0 0 100%' : '0 0 49%')};\n    margin: 0 0 2vw 0;\n  }\n  @media screen and (min-width: ${props => props.theme.responsive.medium}) {\n    flex: ${props => (props.featured ? '0 0 100%' : '0 0 32%')};\n  }\n  &:hover {\n    background: ${props => props.theme.colors.tertiary};\n  }\n  a {\n    display: flex;\n    flex-flow: column;\n    height: 100%;\n    width: 100%;\n    color: ${props => props.theme.colors.base};\n    text-decoration: none;\n    text-align: center;\n    &:hover{\n      .gatsby-image-wrapper{\n        img{\n          transform: scale(1.1);\n        }\n      }\n    }\n    .gatsby-image-wrapper {\n      height: 0;\n      padding-bottom: 60%;\n      max-width: 100%;\n      @media screen and (min-width: ${props => props.theme.responsive.small}) {\n        padding-bottom: ${props => (props.featured ? '40%' : '60%')};\n      }\n      img{\n        transition: all 1s !important;\n      }\n    }\n  }\n`\nconst ImageLink = styled(Link)`  \n  width: 100%;\n  height: 100%;\n  transition: all 0.1s;\n\n  span{\n    position: absolute;\n    color: white;\n    z-index: 4;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: none;\n    transition: all 0.1s;\n    font-size: 1.2em;\n  }\n  &:hover{\n    span{\n      display: block;\n    }\n  }\n  &:hover:after{\n    content: '';\n    z-index: 3;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0,0,0,.5);\n  }\n  \n`\n\n\nconst Card = ({ slug, heroImage, title, ...props }) => {\n  return (\n    <Post featured={props.featured}>\n      <ImageLink to={`/${slug}/`} hex=\"#fff\">\n        <span>{title}</span>\n        <Img fluid={heroImage.fluid} backgroundColor={'#eeeeee'} />\n      </ImageLink>\n    </Post>\n  )\n}\n\nexport default Card\n","import React from 'react'\nimport styled from 'styled-components'\nimport FirstCard from '../components/FirstCard'\nimport Card from '../components/Card'\n\nconst List = styled.ul`\n  display: flex;\n  flex-flow: row wrap;\n  justify-content: space-between;\n  margin: 0 auto auto;\n  width: 100%;\n  // max-width: 1200px;\n  @media screen and (min-width: ${props => props.theme.responsive.medium}) {\n    padding: 0 0.5em 2em;\n  }\n  flex-grow: 1;\n\n  &::after {\n    content: '';\n    flex: 0 0 32%;\n  }\n`\n\nconst CardList = props => {\n  if(props.firstHeroImage === false){\n    return (\n      <List>\n        {props.posts.map(({ node: post }) => (\n          <Card key={post.id} {...post} />\n        ))}\n      </List>\n    )\n  } else{\n    return (\n      <List>\n        {props.activeTag === 'All categories' && <FirstCard heroImage={props.firstHeroImage} />}\n        {props.posts.map(({ node: post }) => (\n          <Card key={post.id} {...post} />\n        ))}\n      </List>\n    )\n  }\n}\n\nexport default CardList\n","import React from 'react'\nimport styled from 'styled-components'\n\nconst Title = styled.h1`\n  display: none;\n  @media screen and (min-width: ${props => props.theme.responsive.medium}) {\n    display: block;\n  }\n  font-size: ${props => (props.small ? '2em' : '3em')};\n  text-transform: capitalize;\n  font-weight: 300;\n  text-align: center;\n  margin: 0 0 3rem 0;\n  @media screen and (min-width: ${props => props.theme.responsive.medium}) {\n    margin: 5px 0 1.5rem 0;\n  }\n  margin: ${props => (props.small ? '2rem 0 1rem 0' : '3rem 0 3rem 0')};\n  line-height: 1.2;\n  span {\n    margin: 0 0 0 0.25em;\n  }\n  a {\n    transition: all 0.2s;\n    color: ${props => props.theme.colors.base};\n    &:hover {\n      color: ${props => props.theme.colors.highlight};\n    }\n  }\n  \n`\n\nconst PageTitle = props => {\n  return <Title small={props.small}>{props.children}</Title>\n}\n\nexport default PageTitle\n","import React from 'react'\nimport styled from 'styled-components'\n\nconst ResponsiveTitle = styled.h1`\n  font-weight: 600;\n  line-height: 1.25;\n  margin: 3rem 0 1rem 0;\n  text-transform: capitalize;\n  font-size: 1.2em;\n  @media screen and (min-width: ${props => props.theme.responsive.medium}) {\n    display: none;\n    margin: 5rem 0 1rem 0;\n  }\n`\n\nconst PostTitle = props => {\n  return <ResponsiveTitle>{props.children}</ResponsiveTitle>\n}\n\nexport default PostTitle\n","import React from 'react'\nimport styled from 'styled-components'\n\nconst Wrapper = styled.section`\n  margin: 0 auto auto;\n  width: 100%;\n  padding: 2em 1.5em 2em;\n  max-width: 1400px;\n  @media screen and (min-width: ${props => props.theme.responsive.medium}) {\n    // display: flex;\n    // padding: 3em 1em 2em;\n  }\n\n  @media screen and (min-width: ${props => props.theme.responsive.large}) {\n    // max-width: 50em;\n    // padding: 3em 0.5em 2em;\n  }\n\n  @media screen and (min-width: ${props => props.theme.responsive.veryLarge}) {\n    // max-width: 60em;\n  }\n  \n`\n\nconst Container = props => {\n  return <Wrapper>{props.children}</Wrapper>\n}\n\nexport default Container\n"],"sourceRoot":""}