{"version":3,"sources":["webpack:///./src/components/SeoTitle.js","webpack:///./src/components/Content.js","webpack:///./src/components/PageHeader.js","webpack:///./src/templates/services.js","webpack:///./src/components/Grid.js","webpack:///./src/tokens/typography.js"],"names":["Heading","styled","h1","props","theme","palette","yellow","media","lg","SubTitle","small","Concatenator","span","hideVisually","Title","headingLevel1","SeoTitle","title","subtitle","HTMLContent","content","dangerouslySetInnerHTML","__html","StyledPageHeader","header","purple","white","md","xl","Intro","div","x2","PageHeader","text","intro","StyledGridItem","GridItem","StyledLink","Link","ServicesPage","data","location","page","markdownRemark","frontmatter","html","to","GridParent","stripy","css","greyLightest","shadows","default","greDdark","headingLevel2","headingLevel3","headingLevel4"],"mappings":"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","file":"component---src-templates-services-js-6dbc4a58dd7e48ba71fe.js","sourcesContent":["import React, { Fragment } from \"react\";\nimport styled from \"styled-components\";\nimport { hideVisually } from \"polished\";\nimport media from \"../tokens/breakpoints\";\nimport { headingLevel1 } from \"../tokens/typography\";\n\nconst Heading = styled.h1`\n  margin: 0;\n  font-size: 2.2em;\n  color: ${props => props.theme.palette.yellow};\n\n  @media (${media.lg}) {\n    /* display: flex; */\n    flex-direction: row-reverse;\n    justify-content: space-between;\n    align-items: center;\n  }\n`;\n\nconst SubTitle = styled.small`\n  display: block;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 0.3em;\n  font-weight: normal;\n  text-transform: uppercase;\n`;\n\nconst Concatenator = styled.span`\n  ${hideVisually};\n`;\n\nconst Title = styled.span`\n  ${headingLevel1} display: block;\n  margin-top: 1em;\n`;\n\nconst SeoTitle = ({ title, subtitle = null }) => (\n  <Heading>\n    {subtitle && (\n      <Fragment>\n        <SubTitle>{subtitle}</SubTitle> <Concatenator>or</Concatenator>{\" \"}\n      </Fragment>\n    )}\n    <Title>{title}</Title>\n  </Heading>\n);\n\nexport default SeoTitle;\n","import React from \"react\";\n\nconst Content = ({ content }) => <div>{content}</div>;\n\nexport const HTMLContent = ({ content }) => (\n  <div dangerouslySetInnerHTML={{ __html: content }} />\n);\n\nexport default Content;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport SeoTitle from \"./SeoTitle\";\nimport { HTMLContent } from \"../components/Content\";\nimport media from \"../tokens/breakpoints\";\n\nconst StyledPageHeader = styled.header`\n  padding: 2rem 1rem 3rem;\n  font-size: 1.2em;\n  text-shadow: 0 0 1em ${props => props.theme.palette.purple};\n  background-color: ${props => props.theme.palette.purple};\n  background-size: 5px, cover;\n  background-repeat: repeat, no-repeat;\n  background-position: 0 0, 50% 100%;\n  color: ${props => props.theme.palette.white};\n\n  @media (${media.md}) {\n    padding-right: 4rem;\n    padding-left: 4rem;\n  }\n\n  @media (${media.xl}) {\n    padding-right: 2rem;\n    padding-bottom: 14rem;\n    padding-left: 2rem;\n    text-align: center;\n  }\n\n  & a {\n    color: ${props => props.theme.palette.yellow};\n\n    &:hover,\n    &:focus {\n      text-shadow: none;\n      color: ${props => props.theme.palette.purple};\n    }\n  }\n`;\n\nconst Intro = styled.div`\n  @media (${media.xl}) {\n    padding: 0 15%;\n  }\n\n  @media (${media.x2}) {\n    padding: 0 20%;\n  }\n`;\n\nconst PageHeader = ({ title, subtitle, text = null, intro = null }) => {\n  return (\n    <StyledPageHeader>\n      <SeoTitle title={title} subtitle={subtitle} />\n      {text && (\n        <Intro>\n          <HTMLContent content={text} />\n        </Intro>\n      )}\n      {intro && (\n        <Intro>\n          <p>{intro}</p>\n        </Intro>\n      )}\n    </StyledPageHeader>\n  );\n};\n\nexport default PageHeader;\n","import React from \"react\";\nimport { graphql } from \"gatsby\";\nimport Link from \"gatsby-link\";\nimport Layout from \"../components/layout\";\nimport { Main } from \"../components/Main\";\nimport PageHeader from \"../components/PageHeader\";\nimport styled from \"styled-components\";\nimport { GridParent, GridItem } from \"../components/Grid\";\n\nconst StyledGridItem = styled(GridItem)`\n  flex-basis: 75%;\n\n  max-width: 60ch;\n  padding-top: 1rem;\n`;\n\nconst StyledLink = styled(Link)`\n  display: inline-block;\n  margin-top: 1em;\n`;\n\nconst ServicesPage = ({ data, location }) => {\n  const { markdownRemark: page } = data;\n  return (\n    <Layout location={location}>\n      <Main>\n        <PageHeader\n          title={page.frontmatter.title}\n          subtitle={page.frontmatter.subtitle}\n          intro={page.frontmatter.intro}\n        />\n        <GridParent>\n          <StyledGridItem>\n            <div dangerouslySetInnerHTML={{ __html: page.html }} />\n            <StyledLink to=\"/services\">&larr; Back to our services</StyledLink>\n          </StyledGridItem>\n        </GridParent>\n      </Main>\n    </Layout>\n  );\n};\n\nexport default ServicesPage;\n\nexport const servicesPageQuery = graphql`\n  query ServicesPage($id: String!) {\n    markdownRemark(id: { eq: $id }) {\n      frontmatter {\n        title\n        intro\n      }\n      html\n    }\n  }\n`;\n","import styled, { css } from \"styled-components\";\nimport media from \"../tokens/breakpoints\";\n\nexport const GridParent = styled.div`\n  padding-right: 1rem;\n  padding-left: 1rem;\n\n  @media (${media.md}) {\n    padding-right: 4rem;\n    padding-left: 4rem;\n  }\n\n  @media (${media.xl}) {\n    display: flex;\n    flex-wrap: wrap;\n\n    padding-right: 2rem;\n    padding-left: 2rem;\n  }\n`;\n\nconst stripes = ({ stripy }) =>\n  stripy &&\n  css`\n    &:nth-child(2n) {\n      background-color: ${props => props.theme.palette.greyLightest};\n    }\n  `;\n\nexport const GridItem = styled.div`\n  ${stripes};\n\n  margin: 0 -1rem;\n  padding: 1.5rem 1rem;\n\n  @media (${media.md}) {\n    margin-right: -4rem;\n    margin-left: -4rem;\n    padding-right: 20%;\n    padding-left: 4rem;\n  }\n\n  @media (${media.xl}) {\n    flex-basis: calc(50% - 4rem);\n    margin: 0 auto 4rem;\n    padding: 2rem;\n    box-shadow: 0 0 1.5em 0 ${props => props.theme.shadows.default};\n    background-color: ${props => props.theme.palette.greyLightest};\n    color: ${props => props.theme.palette.greDdark};\n\n    &:nth-child(1),\n    &:nth-child(2) {\n      margin-top: -10rem;\n    }\n  }\n`;\n","import { css } from \"styled-components\";\n\nexport const headingLevel1 = css`\n  line-height: 1.1;\n`;\n\nexport const headingLevel2 = css`\n  font-size: 1.5em;\n  line-height: 1.2;\n`;\n\nexport const headingLevel3 = css`\n  font-size: 1.3em;\n  line-height: 1.3;\n  color: ${props => props.theme.palette.purple};\n`;\n\nexport const headingLevel4 = css`\n  font-size: 1.1em;\n  line-height: 1.3;\n  color: ${props => props.theme.palette.purple};\n`;\n"],"sourceRoot":""}