{"version":3,"file":"component---src-templates-project-js-5b61783eef41af8a52b2.js","mappings":"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","sources":["webpack://sanity-gatsby-portfolio-web/./src/components/projectAsideCategory.js","webpack://sanity-gatsby-portfolio-web/./src/components/projectRelated.js","webpack://sanity-gatsby-portfolio-web/./src/components/projectLinks.js","webpack://sanity-gatsby-portfolio-web/./src/components/project.js","webpack://sanity-gatsby-portfolio-web/./src/templates/project.js"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\nimport Flex from \"./flex\";\nimport Title from \"./typography/headingTertiary\";\n\nconst AsideCategory = ({ title, children }) => (\n  <RootWrapper stack gap={0}>\n    <Title noMargin>{title}</Title>\n    <Flex as=\"ul\" role=\"list\" stack gap={0}>\n      {children}\n    </Flex>\n  </RootWrapper>\n);\n\nconst RootWrapper = styled(Flex)`\n  padding-left: var(--spacing-1);\n  padding-right: var(--spacing-1);\n\n  font-family: var(--font-family-primary-regular);\n`;\n\nexport default AsideCategory;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { Link } from \"gatsby\";\n\nimport { buildImageObj } from \"../lib/helpers\";\nimport { imageUrlFor } from \"../lib/image-url\";\n\nconst RelatedProjects = ({ list }) => (\n  <>\n    {list.map(project => (\n      <li key={`related_${project._id}`}>\n        <StyledLink to={`/projects/${project.slug.current}`}>\n          <img\n            src={imageUrlFor(buildImageObj(project.mainImage))\n              .width(30)\n              .height(30)\n              // .fit('fill')\n              .url()}\n            alt={project.mainImage.alt}\n          />\n          <StyledTitle>{project.title}</StyledTitle>\n        </StyledLink>\n      </li>\n    ))}\n  </>\n);\n\nconst StyledLink = styled(Link)`\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-1);\n  color: var(--color-primary);\n  font-weight: var(--font-weight-bold);\n  text-decoration: none;\n\n  @media (min-width: 915px) {\n    color: var(--color-primary-muted);\n\n    &:hover {\n      cursor: pointer;\n      color: var(--color-primary);\n    }\n  }\n`;\n\nconst StyledTitle = styled.span`\n  color: inherit;\n  display: inline;\n  box-shadow: 0px 2px 0px var(--color-primary);\n\n  @media (min-width: 915px) {\n    box-shadow: 0px 0px 0px var(--color-primary);\n    transition: box-shadow 100ms ease 0s;\n\n    ${StyledLink}:hover & {\n      box-shadow: 0px 2px 0px var(--color-primary);\n    }\n  }\n`;\n\nexport default RelatedProjects;\n","import React from \"react\";\nimport styled from \"styled-components\";\n\nconst Links = ({ list }) => (\n  <>\n    {list.map(({ title, url }) => (\n      <li key={url}>\n        <StyledLink href={url}>{title}</StyledLink>\n      </li>\n    ))}\n  </>\n);\n\nconst StyledLink = styled.a`\n  color: var(--color-primary);\n  font-weight: var(--font-weight-bold);\n  text-decoration: none;\n  line-height: 1.05;\n\n  transition: box-shadow 100ms ease 0s;\n  box-shadow: 0px 2px 0px var(--color-primary);\n\n  @media (min-width: 915px) {\n    color: var(--color-primary-muted);\n    box-shadow: 0px 0px 0px var(--color-primary);\n\n    &:hover {\n      cursor: pointer;\n      color: var(--color-primary);\n      box-shadow: 0px 2px 0px var(--color-primary);\n    }\n  }\n`;\n\nexport default Links;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { buildImageObj } from \"../lib/helpers\";\nimport { imageUrlFor } from \"../lib/image-url\";\n// TYPOGRAPHY\nimport Title from \"./typography/headingPrimary\";\nimport Header from \"./headerSide\";\nimport BlockContent from \"./sanityBlockContent\";\n// UI COMPONENTS\nimport Layout from \"../containers/layout\";\nimport TripleColumnLayout from \"./layoutTripleColumn\";\n\nimport Hamburger from \"./headerHamburger\";\nimport Aside from \"./asideColumn\";\nimport Stack from \"./projectStack\";\nimport AsideCategory from \"./projectAsideCategory\";\nimport RelatedProjects from \"./projectRelated\";\nimport Links from \"./projectLinks\";\nimport MaxWidthWrapper from \"./maxWidthWrapper\";\n\nfunction Project({ _rawBody, title, mainImage, relatedProjects, stack, links, currentPath }) {\n  return (\n    <Layout currentPath={currentPath} seo={{ title: title }}>\n      <TripleColumnLayout>\n        <Header />\n        <Hamburger />\n        <main>\n          <ImageWrapper>\n            <img\n              src={imageUrlFor(buildImageObj(mainImage))\n                .width(650)\n                .height(300)\n                // .fit('fill')\n                .url()}\n              alt={mainImage.alt}\n              style={{\n                marginBottom: \"var(--spacing-1)\"\n              }}\n            />\n          </ImageWrapper>\n          <CopyWrapper width={690}>\n            <Title>{title}</Title>\n            <BlockContent blocks={_rawBody} />\n          </CopyWrapper>\n        </main>\n        <Aside>\n          {links.length > 0 && (\n            <AsideCategory title=\"Project Links\">\n              <Links list={links} />\n            </AsideCategory>\n          )}\n          {stack.length > 0 && (\n            <AsideCategory title=\"Stack\">\n              <Stack list={stack} />\n            </AsideCategory>\n          )}\n          {relatedProjects.length > 0 && (\n            <AsideCategory title=\"Related Projects\">\n              <RelatedProjects list={relatedProjects} />\n            </AsideCategory>\n          )}\n        </Aside>\n      </TripleColumnLayout>\n    </Layout>\n  );\n}\n\nexport const CopyWrapper = styled(MaxWidthWrapper)`\n  // lead paragraph\n  & > div > p:nth-child(1) {\n    font-size: ${22 / 16}rem;\n    font-weight: var(--font-weight-medium);\n  }\n\n  @media (max-width: 914px) {\n    padding-left: var(--spacing-1);\n    padding-right: var(--spacing-1);\n  }\n`;\n\nconst ImageWrapper = styled.div`\n  & > img {\n    width: 100%;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  @media (min-width: 915px) {\n    display: none;\n  }\n`;\n\nexport default Project;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { graphql } from \"gatsby\";\nimport { buildImageObj } from \"../lib/helpers\";\nimport { imageUrlFor } from \"../lib/image-url\";\n\nimport Project from \"../components/project\";\n\nexport const query = graphql`\n  query ProjectTemplateQuery($id: String!) {\n    sampleProject: sanitySampleProject(id: { eq: $id }) {\n      ...SanityProject\n    }\n  }\n`;\n\nconst ProjectTemplate = ({ data: { sampleProject: project }, location }) => {\n  return (\n    <>\n      <ImageWrapper>\n        <img\n          src={imageUrlFor(buildImageObj(project.mainImage))\n            .width(1500)\n            .height(300)\n            .fit(\"crop\")\n            .url()}\n          alt={project.mainImage.alt}\n          style={{\n            marginBottom: \"var(--spacing-1)\"\n          }}\n        />\n      </ImageWrapper>\n      <Project currentPath={location.pathname} {...project} />\n    </>\n  );\n};\n\nconst ImageWrapper = styled.div`\n  width: 100%;\n\n  & > img {\n    min-width: 900px;\n    width: 100%;\n    height: 300px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  @media (max-width: 914px) {\n    display: none;\n  }\n`;\n\nexport default ProjectTemplate;\n"],"names":["RootWrapper","styled","Flex","title","children","stack","gap","noMargin","as","role","StyledLink","Link","StyledTitle","list","map","project","key","_id","to","slug","current","src","imageUrlFor","buildImageObj","mainImage","width","height","url","alt","href","CopyWrapper","MaxWidthWrapper","ImageWrapper","_rawBody","relatedProjects","links","currentPath","seo","style","marginBottom","blocks","length","data","sampleProject","location","fit","pathname"],"sourceRoot":""}