{"version":3,"sources":["webpack:///./node_modules/@zahradnik-io/gatsby-theme-novela/src/components/Bio/Bio.tsx","webpack:///./node_modules/@zahradnik-io/gatsby-theme-novela/src/sections/articles/Articles.Hero.tsx","webpack:///./node_modules/@zahradnik-io/gatsby-theme-novela/src/templates/articles.template.tsx"],"names":["Bio","author","BioContainer","BioAvatar","as","authorsPage","Link","to","slug","data-a11y","aria-label","BioAvatarInner","RoundedImage","src","avatar","medium","BioText","dangerouslySetInnerHTML","__html","bio","p","theme","colors","accent","Image","grey","ArticlesHero","authors","useContext","GridLayoutContext","gridLayout","hasSetGridLayout","setGridLayout","hero","useStaticQuery","site","edges","node","siteMetadata","tilesIsActive","featuredAuthor","find","featured","Error","Section","relative","id","HeadingContainer","style","maxWidth","HeroHeading","heading","SubheadingContainer","GridControlsContainer","GridButton","onClick","active","title","Tiles","Rows","mediaqueries","desktop","tablet","phablet","primary","hover","ArticlesGradient","ArticlesPage","location","pageContext","articles","group","additionalContext","Layout","SEO","pathname","narrow","ArticlesPaginator","show","pageCount","gradient","colorModeTransition"],"mappings":"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","file":"component---node-modules-zahradnik-io-gatsby-theme-novela-src-templates-articles-template-tsx-1142336de2b56a2a1191.js","sourcesContent":["import React from 'react';\nimport { Link } from 'gatsby';\nimport styled from '@emotion/styled';\n\nimport Image from '@components/Image';\nimport { IAuthor } from '@types';\n\nconst Bio: React.FC<IAuthor> = ({ author }) => {\n  return (\n    <BioContainer>\n      <BioAvatar\n        as={author.authorsPage ? Link : 'div'}\n        to={author.slug}\n        data-a11y=\"false\"\n        aria-label=\"Author's bio\"\n      >\n        <BioAvatarInner>\n          <RoundedImage src={author.avatar.medium} />\n        </BioAvatarInner>\n      </BioAvatar>\n      <BioText dangerouslySetInnerHTML={{ __html: author.bio }} />\n    </BioContainer>\n  );\n};\n\nexport default Bio;\n\nconst BioContainer = styled.div`\n  display: flex;\n  align-items: center;\n  position: relative;\n  left: -10px;\n`;\n\nconst BioAvatar = styled.div`\n  display: block;\n  position: relative;\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.25);\n  margin-right: 16px;\n  margin: 10px 26px 10px 10px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    left: -5px;\n    top: -5px;\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    border: 1px solid rgba(0, 0, 0, 0.25);\n  }\n\n  &[data-a11y='true']:focus::after {\n    content: '';\n    position: absolute;\n    left: -5px;\n    top: -5px;\n    width: 50px;\n    height: 50px;\n    border: 2px solid ${p => p.theme.colors.accent};\n  }\n`;\n\nconst RoundedImage = styled(Image)`\n  border-radius: 50%;\n`;\n\nconst BioAvatarInner = styled.div`\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.25);\n  margin-right: 16px;\n  overflow: hidden;\n`;\n\nconst BioText = styled.p`\n  max-width: 430px;\n  font-size: 14px;\n  line-height: 1.45;\n  color: ${p => p.theme.colors.grey};\n\n  a {\n    color: ${p => p.theme.colors.grey};\n    text-decoration: underline;\n  }\n`;\n","import React, { useContext } from 'react';\nimport { graphql, useStaticQuery } from 'gatsby';\nimport styled from '@emotion/styled';\n\nimport Section from '@components/Section';\nimport Bio from '@components/Bio';\nimport Icons from '@icons';\nimport mediaqueries from '@styles/media';\nimport { IAuthor } from '@types';\n\nimport { GridLayoutContext } from './Articles.List.Context';\n\nconst authorQuery = graphql`\n  {\n    site: allSite {\n      edges {\n        node {\n          siteMetadata {\n            hero {\n              heading\n              maxWidth\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\nconst ArticlesHero: React.FC<IAuthor> = ({ authors }) => {\n  const { gridLayout = 'tiles', hasSetGridLayout, setGridLayout } = useContext(\n    GridLayoutContext,\n  );\n\n  const results = useStaticQuery(authorQuery);\n  const hero = results.site.edges[0].node.siteMetadata.hero;\n  const tilesIsActive = hasSetGridLayout && gridLayout === 'tiles';\n  const featuredAuthor = authors.find(author => author.featured);\n\n  if (!featuredAuthor) {\n    throw new Error(`\n      No featured Author found.\n      Please ensure you have at least featured Author.\n  `);\n  }\n\n  return (\n    <Section relative id=\"Articles__Hero\">\n      <HeadingContainer style={{ maxWidth: `${hero.maxWidth}px` }}>\n        <HeroHeading dangerouslySetInnerHTML={{ __html: hero.heading }} />\n      </HeadingContainer>\n      <SubheadingContainer>\n        <Bio author={featuredAuthor} />\n        <GridControlsContainer>\n          <GridButton\n            onClick={() => setGridLayout('tiles')}\n            active={tilesIsActive}\n            data-a11y=\"false\"\n            title=\"Show articles in Tile grid\"\n            aria-label=\"Show articles in Tile grid\"\n          >\n            <Icons.Tiles />\n          </GridButton>\n          <GridButton\n            onClick={() => setGridLayout('rows')}\n            active={!tilesIsActive}\n            data-a11y=\"false\"\n            title=\"Show articles in Row grid\"\n            aria-label=\"Show articles in Row grid\"\n          >\n            <Icons.Rows />\n          </GridButton>\n        </GridControlsContainer>\n      </SubheadingContainer>\n    </Section>\n  );\n};\n\nexport default ArticlesHero;\n\nconst SubheadingContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 100px;\n\n  ${mediaqueries.desktop`\n    margin-bottom: 80px;\n  `};\n\n  ${mediaqueries.tablet`\n    margin-bottom: 60px;\n  `};\n\n  ${mediaqueries.phablet`\n    display: none;\n  `};\n`;\n\nconst GridControlsContainer = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${mediaqueries.tablet`\n    display: none;\n  `};\n`;\n\nconst HeadingContainer = styled.div`\n  margin: 100px 0;\n\n  ${mediaqueries.desktop`\n    width: 80%;\n  `}\n\n  ${mediaqueries.tablet`\n    width: 100%;\n  `}\n`;\n\nconst HeroHeading = styled.h1`\n  font-style: normal;\n  font-weight: 600;\n  font-size: 52px;\n  line-height: 1.15;\n  color: ${p => p.theme.colors.primary};\n\n  a {\n    color: ${p => p.theme.colors.accent};\n  }\n\n  ${mediaqueries.desktop`\n    font-size: 38px\n  `}\n\n  ${mediaqueries.phablet`\n    font-size: 32px;\n  `}\n`;\n\nconst GridButton = styled.button<{ active: boolean }>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 36px;\n  width: 36px;\n  border-radius: 50%;\n  background: transparent;\n  transition: background 0.25s;\n\n  &:not(:last-child) {\n    margin-right: 30px;\n  }\n\n  &:hover {\n    background: ${p => p.theme.colors.hover};\n  }\n\n  &[data-a11y='true']:focus::after {\n    content: '';\n    position: absolute;\n    left: -10%;\n    top: -10%;\n    width: 120%;\n    height: 120%;\n    border: 2px solid ${p => p.theme.colors.accent};\n    background: rgba(255, 255, 255, 0.01);\n    border-radius: 50%;\n  }\n\n  svg {\n    opacity: ${p => (p.active ? 1 : 0.25)};\n    transition: opacity 0.2s;\n\n    path {\n      fill: ${p => p.theme.colors.primary};\n    }\n  }\n`;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport Section from \"@components/Section\";\nimport SEO from \"@components/SEO\";\nimport Layout from \"@components/Layout\";\nimport Paginator from \"@components/Navigation/Navigation.Paginator\";\n\nimport ArticlesHero from \"../sections/articles/Articles.Hero\";\nimport ArticlesList from \"../sections/articles/Articles.List\";\n\nimport { Template } from \"@types\";\n\nconst ArticlesPage: Template = ({ location, pageContext }) => {\n  const articles = pageContext.group;\n  const authors = pageContext.additionalContext.authors;\n\n  return (\n    <Layout>\n      <SEO pathname={location.pathname} />\n      <ArticlesHero authors={authors} />\n      <Section narrow>\n        <ArticlesList articles={articles} />\n        <ArticlesPaginator show={pageContext.pageCount > 1}>\n          <Paginator {...pageContext} />\n        </ArticlesPaginator>\n      </Section>\n      <ArticlesGradient />\n    </Layout>\n  );\n};\n\nexport default ArticlesPage;\n\nconst ArticlesGradient = styled.div`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 590px;\n  z-index: 0;\n  pointer-events: none;\n  background: ${p => p.theme.colors.gradient};\n  transition: ${p => p.theme.colorModeTransition};\n`;\n\nconst ArticlesPaginator = styled.div<{ show: boolean }>`\n  ${p => p.show && `margin-top: 95px;`}\n`;\n"],"sourceRoot":""}