component---src-pages-404-js-55f2eb847905c60ec52c.js.map

{"version":3,"sources":["webpack:///./src/pages/404.js"],"names":["colors","theme","fonts","navDelay","StyledMainContainer","styled","Main","mixins","flexCenter","StyledTitle","h1","green","SFMono","media","bigDesktop","phablet","StyledSubtitle","h2","StyledHomeButton","Link","bigButton","NotFoundPage","location","useState","isMounted","setIsMounted","useEffect","timeout","setTimeout","clearTimeout","component","classNames","className","to"],"mappings":"yiBAOQA,EAA4BC,IAA5BD,OAAQE,EAAoBD,IAApBC,MAAOC,EAAaF,IAAbE,SAEjBC,EAAsBC,YAAOC,KAAV,8EAAGD,CAAH,+BACrBE,IAAOC,YAGLC,EAAcJ,IAAOK,GAAV,sEAAGL,CAAH,oEACNL,EAAOW,MACDT,EAAMU,OAGnBC,IAAMC,WALO,KAMbD,IAAME,QANO,MAQXC,EAAiBX,IAAOY,GAAV,yEAAGZ,CAAH,2CAGhBQ,IAAMC,WAHU,KAIhBD,IAAME,QAJU,MAMdG,EAAmBb,YAAOc,QAAV,2EAAGd,CAAH,yBAClBE,IAAOa,WAiCIC,UA7BM,SAAC,GAAkB,IAAhBC,EAAe,EAAfA,SAAe,EACHC,oBAAS,GAApCC,EAD8B,KACnBC,EADmB,KAQrC,OALAC,qBAAU,WACR,IAAMC,EAAUC,YAAW,kBAAMH,GAAa,KAAOtB,GACrD,OAAO,kBAAM0B,aAAaF,MACzB,IAGD,kBAAC,IAAD,CAAQL,SAAUA,GAChB,kBAAC,IAAD,CAAiBQ,UAAW,MACzBN,GACC,kBAAC,IAAD,CAAeG,QAAS,IAAKI,WAAW,QACtC,kBAAC3B,EAAD,CAAqB4B,UAAU,cAC7B,kBAACvB,EAAD,YACA,kBAACO,EAAD,uBACA,kBAACE,EAAD,CAAkBe,GAAG,KAArB","file":"component---src-pages-404-js-55f2eb847905c60ec52c.js","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { Link } from 'gatsby';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport PropTypes from 'prop-types';\nimport { Layout } from '@components';\nimport styled from 'styled-components';\nimport { theme, mixins, media, Main } from '@styles';\nconst { colors, fonts, navDelay } = theme;\n\nconst StyledMainContainer = styled(Main)`\n  ${mixins.flexCenter};\n  flex-direction: column;\n`;\nconst StyledTitle = styled.h1`\n  color: ${colors.green};\n  font-family: ${fonts.SFMono};\n  font-size: 12vw;\n  line-height: 1;\n  ${media.bigDesktop`font-size: 200px;`}\n  ${media.phablet`font-size: 120px;`};\n`;\nconst StyledSubtitle = styled.h2`\n  font-size: 3vw;\n  font-weight: 400;\n  ${media.bigDesktop`font-size: 50px;`};\n  ${media.phablet`font-size: 30px;`};\n`;\nconst StyledHomeButton = styled(Link)`\n  ${mixins.bigButton};\n  margin-top: 40px;\n`;\n\nconst NotFoundPage = ({ location }) => {\n  const [isMounted, setIsMounted] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => setIsMounted(true), navDelay);\n    return () => clearTimeout(timeout);\n  }, []);\n\n  return (\n    <Layout location={location}>\n      <TransitionGroup component={null}>\n        {isMounted && (\n          <CSSTransition timeout={500} classNames=\"fade\">\n            <StyledMainContainer className=\"fillHeight\">\n              <StyledTitle>404</StyledTitle>\n              <StyledSubtitle>Page Not Found</StyledSubtitle>\n              <StyledHomeButton to=\"/\">Go Home</StyledHomeButton>\n            </StyledMainContainer>\n          </CSSTransition>\n        )}\n      </TransitionGroup>\n    </Layout>\n  );\n};\n\nNotFoundPage.propTypes = {\n  location: PropTypes.object.isRequired,\n};\n\nexport default NotFoundPage;\n"],"sourceRoot":""}