component---src-pages-404-tsx-8ba3249554354fe84365.js.map

{"version":3,"sources":["webpack:///./src/pages/404.tsx"],"names":["pageQuery","ErrorContent","ErrorCode","colors","lightgrey","ErrorDescription","midgrey","ErrorLink","NotFoundPage","props","edges","data","allMarkdownRemark","css","outer","SiteNavMain","inner","isHome","className","style","textAlign","to","PostFeed","map","node","key","fields","slug","post"],"mappings":"uRAyBA,MAmCaA,EAAY,YA6BnBC,EAAe,CAAH,8NAoBZC,EAAY,kBAAH,mBAAG,CAAH,kBAEJC,IAAOC,UAFH,iHAaTC,EAAmB,iBAAH,mBAAG,CAAH,kBAEXF,IAAOG,QAFI,kHAahBC,EAAY,CAAH,6DAKAC,UAnHuCC,IACpD,MAAM,MAAEC,GAAUD,EAAME,KAAKC,kBAE7B,OACE,YAAC,IAAD,KACE,YAAC,IAAD,KACE,sBAAQC,IAAG,YAAE,CAACC,OACZ,mBAAKD,IAAG,YAAE,CAACC,IAAOC,OAChB,mBAAKF,IAAKG,KACR,YAAC,IAAD,CAASC,QAAQ,OAIvB,oBAAMJ,IAAG,YAAE,CAACC,IAAOb,IAAeiB,UAAU,iBAC1C,mBAAKL,IAAG,YAAE,CAACG,OACT,uBAASG,MAAO,CAAEC,UAAW,WAC3B,YAAClB,EAAD,YACA,YAACG,EAAD,uBACA,YAAC,OAAD,CAAMQ,IAAKN,EAAWc,GAAG,IAAzB,2BAKF,mBAAKR,IAAKS,IAAUJ,UAAU,aAC3BR,EAAMa,IAAI,EAAGC,UACZ,YAAC,IAAD,CAAUC,IAAKD,EAAKE,OAAOC,KAAMC,KAAMJ","file":"component---src-pages-404-tsx-8ba3249554354fe84365.js","sourcesContent":["import { graphql, Link } from 'gatsby';\r\nimport React from 'react';\r\n\r\nimport { css } from '@emotion/core';\r\nimport styled from '@emotion/styled';\r\n\r\nimport SiteNav from '../components/header/SiteNav';\r\nimport { PostCard } from '../components/PostCard';\r\nimport { Wrapper } from '../components/Wrapper';\r\nimport IndexLayout from '../layouts';\r\nimport { colors } from '../styles/colors';\r\nimport { inner, outer, PostFeed, SiteNavMain } from '../styles/shared';\r\nimport { PageContext } from '../templates/post';\r\n\r\ninterface NotFoundTemplateProps {\r\n  data: {\r\n    allMarkdownRemark: {\r\n      totalCount: number;\r\n      edges: Array<{\r\n        node: PageContext;\r\n      }>;\r\n    };\r\n  };\r\n}\r\n\r\nconst NotFoundPage: React.FC<NotFoundTemplateProps> = props => {\r\n  const { edges } = props.data.allMarkdownRemark;\r\n\r\n  return (\r\n    <IndexLayout>\r\n      <Wrapper>\r\n        <header css={[outer]}>\r\n          <div css={[outer, SiteNavMain]}>\r\n            <div css={inner}>\r\n              <SiteNav isHome={false} />\r\n            </div>\r\n          </div>\r\n        </header>\r\n        <main css={[outer, ErrorContent]} className=\"error-content\">\r\n          <div css={[inner]}>\r\n            <section style={{ textAlign: 'center' }}>\r\n              <ErrorCode>404</ErrorCode>\r\n              <ErrorDescription>Page not found</ErrorDescription>\r\n              <Link css={ErrorLink} to=\"\">\r\n                Go to the front page →\r\n              </Link>\r\n            </section>\r\n\r\n            <div css={PostFeed} className=\"post-feed\">\r\n              {edges.map(({ node }) => (\r\n                <PostCard key={node.fields.slug} post={node} />\r\n              ))}\r\n            </div>\r\n          </div>\r\n        </main>\r\n      </Wrapper>\r\n    </IndexLayout>\r\n  );\r\n};\r\n\r\nexport const pageQuery = graphql`\r\n  query {\r\n    allMarkdownRemark(limit: 3, sort: { fields: [frontmatter___date], order: DESC }) {\r\n      edges {\r\n        node {\r\n          timeToRead\r\n          frontmatter {\r\n            title\r\n            date\r\n            tags\r\n            image {\r\n              childImageSharp {\r\n                fluid(maxWidth: 3720) {\r\n                  ...GatsbyImageSharpFluid\r\n                }\r\n              }\r\n            }\r\n          }\r\n          excerpt\r\n          fields {\r\n            layout\r\n            slug\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst ErrorContent = css`\r\n  padding: 14vw 4vw 6vw;\r\n\r\n  @media (max-width: 800px) {\r\n    padding-top: 24vw;\r\n  }\r\n\r\n  @media (max-width: 500px) {\r\n    padding-top: 28vw;\r\n  }\r\n\r\n  @media (min-width: 940px) {\r\n    .post-card {\r\n      margin-bottom: 0;\r\n      padding-bottom: 0;\r\n      border-bottom: none;\r\n    }\r\n  }\r\n`;\r\n\r\nconst ErrorCode = styled.h1`\r\n  margin: 0;\r\n  color: ${colors.lightgrey};\r\n  font-size: 12vw;\r\n  line-height: 1em;\r\n  letter-spacing: -5px;\r\n  opacity: 0.75;\r\n\r\n  @media (max-width: 800px) {\r\n    font-size: 11.2rem;\r\n  }\r\n`;\r\n\r\nconst ErrorDescription = styled.p`\r\n  margin: 0;\r\n  color: ${colors.midgrey};\r\n  font-size: 3rem;\r\n  line-height: 1.3em;\r\n  font-weight: 400;\r\n\r\n  @media (max-width: 800px) {\r\n    margin: 5px 0 0 0;\r\n    font-size: 1.8rem;\r\n  }\r\n`;\r\n\r\nconst ErrorLink = css`\r\n  display: inline-block;\r\n  margin-top: 5px;\r\n`;\r\n\r\nexport default NotFoundPage;\r\n"],"sourceRoot":""}