{"version":3,"sources":["webpack:///./src/components/headerBack.js","webpack:///./src/components/layoutChild.js","webpack:///./src/pages/project-scroll.js"],"names":["HeaderBack","render","className","to","color","href","React","Component","LayoutChild","children","siteTitle","PageLayout","styled","div","CellTitleGroup","Title","fontSize","space","Text","p","gray2","Subhead","ImgSingle","Img","ImgDouble","data","title","description","image","fluid","imageOne","childImageSharp","alt","fadeIn","imageTwo","imageThree","imageFour","imageFive","imageSix","query"],"mappings":"qKA2BeA,E,kGApBdC,OAAA,WACE,OACC,yBAAKC,UAAW,8BACd,yBAAKA,UAAW,uBACd,kBAAC,OAAD,CAAMC,GAAG,KACL,yBAAKD,UAAU,iBAAf,YAGN,yBAAKA,UAAU,qBACb,yBAAKA,UAAW,+BACd,kBAAC,OAAD,CAAMC,GAAG,YAAW,kBAAC,IAAD,CAAWC,MAAO,QAAlB,WAEtB,uBAAGC,KAAK,oCAAmC,kBAAC,IAAD,CAAWD,MAAO,OAAlB,aAE7C,yBAAKF,UAAW,0C,GAhBGI,IAAMC,W,sBCmChBC,IAzBK,SAAC,GAAkB,IAAhBC,EAAe,EAAfA,SAWrB,OACE,oCACE,kBAAC,EAAD,CAAYC,UAAW,SACvB,yBAAKR,UAAU,eAAf,KACE,8BAAOO,GACP,kBAAC,IAAD,S,kCC/BR,2IASME,EAAaC,IAAOC,IAAV,6EAAGD,CAAH,6OAaN,IAMJE,EAAiBF,IAAOC,IAAV,iFAAGD,CAAH,sEAGV,IAMJG,EAAQH,IAAOC,IAAV,wEAAGD,CAAH,sOAEMI,IAAS,GAERC,IAAM,GAAI,KAMPD,IAAS,GAKTA,IAAS,IAIxBE,EAAON,IAAOO,EAAV,uEAAGP,CAAH,yFACQK,IAAM,GAAI,KAEfb,IAAMgB,OAKbC,EAAUT,IAAOO,EAAV,0EAAGP,CAAH,6GACKK,IAAM,GAAI,MAUtBK,EAAYV,YAAOW,KAAV,4EAAGX,CAAH,yBAGTY,EAAYZ,YAAOW,KAAV,4EAAGX,CAAH,iGAQA,0BAAGa,EAAH,EAAGA,KAAH,OACb,kBAAC,IAAD,KACE,kBAAC,IAAD,CACEC,MAAM,oBACNC,YAAY,2CACZC,MAAM,uBAER,kBAACjB,EAAD,KACI,kBAACG,EAAD,KACI,kBAACC,EAAD,0BACA,kBAACM,EAAD,+BACA,kBAACH,EAAD,6TAEA,kBAACG,EAAD,+FAEA,kBAACC,EAAD,CACIO,MAAOJ,EAAKK,SAASC,gBAAgBF,MACrCG,IAAI,oCACJC,QAAQ,IAEZ,kBAACT,EAAD,CACIK,MAAOJ,EAAKS,SAASH,gBAAgBF,MACrCG,IAAI,oCACJC,QAAQ,IAEZ,kBAACX,EAAD,CACIO,MAAOJ,EAAKU,WAAWJ,gBAAgBF,MACvCG,IAAI,oCACJC,QAAQ,IAEZ,kBAACX,EAAD,CACIO,MAAOJ,EAAKW,UAAUL,gBAAgBF,MACtCG,IAAI,oCACJC,QAAQ,IAEf,kBAACT,EAAD,CACOK,MAAOJ,EAAKY,UAAUN,gBAAgBF,MACtCG,IAAI,oCACJC,QAAQ,IAEf,kBAACT,EAAD,CACOK,MAAOJ,EAAKa,SAASP,gBAAgBF,MACrCG,IAAI,oCACJC,QAAQ,OAMjB,IAAMM,EAAK","file":"component---src-pages-project-scroll-js-0c79ef21d44ce0781d5f.js","sourcesContent":["import { Link } from \"gatsby\"\nimport React from \"react\"\nimport './header.css'\nimport BtnHeader from \"./Button-Header\"\n\nclass HeaderBack extends React.Component{\n\n render() {\n   return (\n    <div className={'HeaderBlock HeaderScrolled'}>\n      <div className={'HeaderNameBlockBack'}>\n        <Link to=\"/\">\n            <div className=\"NameTitleBack\">← Back</div>\n        </Link>\n        </div>\n      <div className=\"HeaderButtonBlock\">\n        <div className={'ButtonPad ButtonPadScrolled'}>\n          <Link to=\"/page-2/\"><BtnHeader color= \"blue\">about</BtnHeader></Link>\n        </div>\n        <a href=\"mailto:john@johncrossneumann.com\"><BtnHeader color= \"red\">contact</BtnHeader></a>\n      </div>\n      <div className={'HeaderDivider HeaderDividerScrolled'}></div>\n    </div>\n    )\n  }\n}\n\nexport default HeaderBack\n","/**\n * Layout component that queries for data\n * with Gatsby's useStaticQuery component\n *\n * See: https://www.gatsbyjs.com/docs/use-static-query/\n */\n\nimport React from \"react\"\nimport PropTypes from \"prop-types\"\n// import { useStaticQuery, graphql } from \"gatsby\"\n\nimport HeaderBack from \"./headerBack\"\nimport Footer from \"./footer\"\nimport \"./layout.css\"\n\nconst LayoutChild = ({ children }) => {\n//   const data = useStaticQuery(graphql`\n//     query SiteTitleQuery {\n//       site {\n//         siteMetadata {\n//           title\n//         }\n//       }\n//     }\n//   `)\n\n  return (\n    <>\n      <HeaderBack siteTitle={\"test\"} />\n      <div className=\"spacerChild\">&nbsp;</div>\n        <main>{children}</main>\n        <Footer></Footer>\n    </>\n  )\n}\n\nLayoutChild.propTypes = {\n  children: PropTypes.node.isRequired,\n}\n\nexport default LayoutChild","import React from \"react\"\nimport LayoutChild from \"../components/layoutChild\"\nimport SEO from \"../components/seo\"\nimport { color, fontSize, space } from '../components/constants'\nimport styled from 'styled-components'\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\";\n\n\nconst PageLayout = styled.div`\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-gap: 36px;\n    margin: 0px 36px 72px;\n\n    @media (max-width: 1024px){\n        grid-gap: 24px;\n        margin: 0px 24px 24px;\n    }\n\n    @media (max-width: 640px){\n        grid-template-columns: 100% ;\n        ${'' /* grid-template-rows: 100%; */}\n        grid-gap: 24px;\n        margin: 0px 24px 24px;\n    }\n`\n/* Text Group */\nconst CellTitleGroup = styled.div`\n    width: 75%;\n    @media (max-width: 640px){\n        ${'' /* grid-row: 2; */}\n        width: 75%;\n        margin-top: 8px;\n    }\n\n`\nconst Title = styled.div`\n    color: white;\n    font-size: ${fontSize[3]};\n    font-weight: 200;\n    margin-top: ${space[4]+ \"px\"};\n    line-height: 0.8;\n    word-wrap:normal; /* YESSSSS */\n    text-rendering: optimizeLegibility;\n\n    @media (max-width: 1024px){\n        font-size: ${fontSize[2]};\n    }\n\n    @media (max-width: 640px){\n        word-spacing: normal;\n        font-size: ${fontSize[2]};\n    }\n\n`\nconst Text = styled.p`\n    margin-top: ${space[2]+ \"px\"};\n    word-wrap:normal; /* YESSSSS */\n    color: ${color.gray2};\n    @media (max-width: 1024px){\n        font-size: 16px;\n    }\n`\nconst Subhead = styled.p`\n    margin-top: ${space[4]+ \"px\"};\n    word-wrap:normal; /* YESSSSS */\n    color: white;\n    margin-bottom: 0px;\n    @media (max-width: 1024px){\n        font-size: 16px;\n    }\n`\n/* Image styles */\n\nconst ImgSingle = styled(Img)`\n    border-radius: 24px;\n`\nconst ImgDouble = styled(Img)`\n    border-radius: 24px;\n    grid-column: 1 / span 2;\n    @media (max-width: 640px){\n        grid-column: 1 / span 1;\n    }\n`\n\nexport default ({ data }) => (\n  <LayoutChild>\n    <SEO \n      title=\"Scroll Reader App\"\n      description=\"A companion app to the Scroll experience\"\n      image=\"../images/card.jpg\"\n    />\n    <PageLayout>\n        <CellTitleGroup>\n            <Title >Scroll Reader&nbsp;App</Title>\n            <Subhead>ROLE: UX LEAD DESIGNER</Subhead>\n            <Text>The Scroll Reader app is a companion app to the Scroll experience that tracks your history and surfaces interesting articles. The app was designed to reflect the clean, clutter-free experience Scroll promises on the web.\n            Within the app, articles are presented with a clean, ad- free reader and reading&nbsp;tools.</Text>\n            <Subhead>Research, concept, interaction design, design system, visual design, and&nbsp;prototyping.</Subhead>\n            </CellTitleGroup>\n            <ImgSingle \n                fluid={data.imageOne.childImageSharp.fluid}\n                alt=\"An image of the Scroll Reader App\"\n                fadeIn={true}\n                 />\n            <ImgDouble \n                fluid={data.imageTwo.childImageSharp.fluid}\n                alt=\"An image of the Scroll Reader App\"\n                fadeIn={true}\n                 />\n            <ImgSingle \n                fluid={data.imageThree.childImageSharp.fluid}\n                alt=\"An image of the Scroll Reader App\"\n                fadeIn={true}\n                 />\n            <ImgSingle \n                fluid={data.imageFour.childImageSharp.fluid}\n                alt=\"An image of the Scroll Reader App\"\n                fadeIn={true}\n                 />\n         <ImgDouble \n                fluid={data.imageFive.childImageSharp.fluid}\n                alt=\"An image of the Scroll Reader App\"\n                fadeIn={true}\n                 />\n         <ImgDouble \n                fluid={data.imageSix.childImageSharp.fluid}\n                alt=\"An image of the Scroll Reader App\"\n                fadeIn={true}\n                 />\n        </PageLayout>\n  </LayoutChild>\n)\n\nexport const query = graphql`\n  query {\n    imageOne: file(relativePath: { eq: \"scroll/scroll1.webp\" }) {\n      childImageSharp {\n        # Specify the image processing specifications right in the query.\n        # Makes it trivial to update as your page's design changes.\n        fluid(maxWidth: 1440) {\n            ...GatsbyImageSharpFluid_withWebp\n        }\n      }\n    }\n    imageTwo: file(relativePath: { eq: \"scroll/scroll2.webp\" }) {\n        childImageSharp {\n          # Specify the image processing specifications right in the query.\n          # Makes it trivial to update as your page's design changes.\n          fluid(maxWidth: 1440) {\n              ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n    imageThree: file(relativePath: { eq: \"scroll/scroll3.webp\" }) {\n        childImageSharp {\n          # Specify the image processing specifications right in the query.\n          # Makes it trivial to update as your page's design changes.\n          fluid(maxWidth: 1440) {\n              ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n    imageFour: file(relativePath: { eq: \"scroll/scroll4.webp\" }) {\n        childImageSharp {\n          # Specify the image processing specifications right in the query.\n          # Makes it trivial to update as your page's design changes.\n          fluid(maxWidth: 1440) {\n              ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n    imageFive: file(relativePath: { eq: \"scroll/scroll5.webp\" }) {\n        childImageSharp {\n          # Specify the image processing specifications right in the query.\n          # Makes it trivial to update as your page's design changes.\n          fluid(maxWidth: 1440) {\n              ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n      imageSix: file(relativePath: { eq: \"scroll/scroll6.webp\" }) {\n        childImageSharp {\n          # Specify the image processing specifications right in the query.\n          # Makes it trivial to update as your page's design changes.\n          fluid(maxWidth: 1440) {\n              ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n  }\n`"],"sourceRoot":""}