{"version":3,"sources":["webpack:///./src/components/Banner/Title.js","webpack:///./src/components/Banner/About.js","webpack:///./src/components/Banner/Recent.js","webpack:///./src/components/Banner/BannerCategories.js","webpack:///./src/components/Banner/index.js","webpack:///./src/pages/posts.js","webpack:///./src/components/Posts/Post.js","webpack:///./src/components/Posts/index.js"],"names":["Wrapper","styled","div","Title","title","className","About","data","useStaticQuery","fixed","file","childImageSharp","styleClass","BannerCategories","Categories","aside","Banner","PostsPage","posts","allMdx","nodes","article","Post","frontmatter","excerpt","image","slug","date","category","readTime","fluid","to","Posts","map","post","key","id"],"mappings":"uMAUMA,EAAUC,IAAOC,IAAV,oEAAGD,CAAH,6VAwBEE,EAhCD,SAAC,GAAe,IAAbC,EAAY,EAAZA,MACf,OACE,kBAACJ,EAAD,KACE,4BAAKI,GACL,yBAAKC,UAAU,WCyBfL,EAAUC,IAAOC,IAAV,iEAAGD,CAAH,2EASEK,EAvBD,WACZ,IAAMC,EAAOC,YAZJ,aAaT,OACE,kBAAC,EAAD,KACE,kBAAC,EAAD,CAAOJ,MAAM,aACb,kBAAC,IAAD,CAAOK,MAAOF,EAAKG,KAAKC,gBAAgBF,MAAOJ,UAAU,QACzD,sMAGA,kBAAC,IAAD,CAAaO,WAAW,mB,aCkCdX,IAAOC,IAAV,kEAAGD,CAAH,0U,WChDPD,EAAUC,IAAOC,IAAV,+EAAGD,CAAH,mQAeEY,EAvBU,WACvB,OACE,kBAAC,EAAD,KACE,kBAAC,EAAD,CAAOT,MAAM,eACb,kBAACU,EAAA,EAAD,QCOAd,EAAUC,IAAOc,MAAV,kEAAGd,CAAH,6KAaEe,IAtBA,WACb,OACE,kBAAC,EAAD,KACE,kBAAC,EAAD,MACA,kBAAC,EAAD,S,kCCVN,oEA2CeC,UAtCG,SAAC,GAAc,IAEZC,EAFW,EAAXX,KAEjBY,OAAUC,MAEZ,OACE,kBAAC,IAAD,KACE,kBAAC,IAAD,MACA,kBAAC,IAAD,CAAOF,MAAOA,EAAOd,MAAM,iB,oHCoB3BJ,E,UAAUC,EAAOoB,QAAV,gEAAGpB,CAAH,m1CAsGEqB,EA/HF,SAAC,GAA8B,IAA5BC,EAA2B,EAA3BA,YAAaC,EAAc,EAAdA,QACnBpB,EAAiDmB,EAAjDnB,MAAOqB,EAA0CF,EAA1CE,MAAOC,EAAmCH,EAAnCG,KAAMC,EAA6BJ,EAA7BI,KAAMC,EAAuBL,EAAvBK,SAAUC,EAAaN,EAAbM,SAC5C,OACE,kBAAC7B,EAAD,KACE,kBAAC,IAAD,CAAO8B,MAAOL,EAAMd,gBAAgBmB,MAAOzB,UAAU,QACrD,yBAAKA,UAAU,QACb,0BAAMA,UAAU,YAAYuB,GAC5B,4BAAKxB,GACL,yBAAKC,UAAU,cACf,2BAAImB,GACJ,kBAAC,IAAD,CAAMO,GAAE,UAAYL,EAAQrB,UAAU,QAAtC,oBACmB,kBAAC,IAAD,OAEnB,gCACE,0BAAMA,UAAU,QACd,kBAAC,IAAD,CAAYA,UAAU,SACrBsB,GAEH,8BAAOE,EAAP,iB,YCJKG,IAlBD,SAAC,GAAsB,IAApBd,EAAmB,EAAnBA,MAAOd,EAAY,EAAZA,MACtB,OACE,6BAASC,UAAU,SACjB,wBAAIA,UAAU,eAAeD,GAC7B,yBAAKC,UAAU,gBACb,iCACGa,EAAMe,KAAI,SAAAC,GACT,OAAO,kBAAC,EAAD,eAAMC,IAAKD,EAAKE,IAAQF,QAGnC,iCACE,kBAAClB,EAAA,EAAD","file":"component---src-pages-posts-js-a39c0cf155e50fbbd4ba.js","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nconst Title = ({ title }) => {\n  return (\n    <Wrapper>\n      <h4>{title}</h4>\n      <div className=\"line\"></div>\n    </Wrapper>\n  )\n}\nconst Wrapper = styled.div`\n  position: relative;\n  text-align: center;\n  margin-bottom: 1.25rem;\n  h4 {\n    color: var(--clr-grey-3);\n    text-transform: uppercase;\n    font-weight: 500;\n    background: var(--clr-white);\n    display: inline-block;\n    margin-bottom: 0;\n    padding: 0 0.6rem;\n  }\n  .line {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    height: 1.5px;\n    transform: translateY(-50%);\n    background: var(--clr-primary-5);\n    z-index: -1;\n  }\n`\nexport default Title\n","import React from \"react\"\nimport SocialLinks from \"../../constants/socialLinks\"\nimport Image from \"gatsby-image\"\nimport { graphql, useStaticQuery } from \"gatsby\"\nimport Title from \"./Title\"\nimport styled from \"styled-components\"\nconst query = graphql`\n  {\n    file(relativePath: { eq: \"logo3.png\" }) {\n      childImageSharp {\n        fixed(width: 100, height: 100) {\n          ...GatsbyImageSharpFixed\n        }\n      }\n    }\n  }\n`\nconst About = () => {\n  const data = useStaticQuery(query)\n  return (\n    <Wrapper>\n      <Title title=\"about us\" />\n      <Image fixed={data.file.childImageSharp.fixed} className=\"img\" />\n      <p>\n        We are experianced radiologists, and we would like to share our knowledge. Please browse our cases, and contact us if you have any questions.Don`t forget to subscribe!\n      </p>\n      <SocialLinks styleClass=\"banner-icons\"></SocialLinks>\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled.div`\n  text-align: center;\n  p {\n    color: var(--clr-grey-5);\n  }\n  .img {\n    border-radius: 50%;\n  }\n`\nexport default About\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport { graphql, useStaticQuery } from \"gatsby\"\nimport { Link } from \"gatsby\"\nimport Image from \"gatsby-image\"\nimport Title from \"./Title\"\n\nconst query = graphql`\n  {\n    allMdx(sort: { fields: frontmatter___date, order: DESC }, limit: 5) {\n      nodes {\n        frontmatter {\n          slug\n          title\n          date(formatString: \"MMMM Do, YYYY\")\n          image {\n            childImageSharp {\n              fluid {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n        }\n        id\n      }\n    }\n  }\n`\n\nconst Recent = () => {\n  const data = useStaticQuery(query)\n  const {\n    allMdx: { nodes: posts },\n  } = data\n  return (\n    <Wrapper>\n      <Title title=\"recent\" />\n      {posts.map(post => {\n        const {\n          title,\n          slug,\n          date,\n          image: {\n            childImageSharp: { fluid },\n          },\n        } = post.frontmatter\n        return (\n          <Link to={`/posts/${slug}`} key={post.id} className=\"post\">\n            <Image fluid={fluid} className=\"img\" />\n            <div>\n              <h5>{title}</h5>\n              <p>{date}</p>\n            </div>\n          </Link>\n        )\n      })}\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled.div`\n  .post {\n    display: grid;\n    grid-template-columns: 75px 1fr;\n    column-gap: 1rem;\n    margin-bottom: 1rem;\n  }\n  .img {\n    border-radius: var(--radius);\n  }\n  h5 {\n    font-size: 0.7rem;\n    margin-bottom: 0.25rem;\n    letter-spacing: 0;\n    line-height: 1.2;\n    color: var(--clr-grey-1);\n  }\n  p {\n    font-size: 0.6rem;\n    margin-bottom: 0;\n    color: var(--clr-grey-5);\n  }\n  .post:hover {\n    h5 {\n      color: var(--clr-primary-5);\n    }\n  }\n`\n\nexport default Recent\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport Categories from \"../Categories\"\nimport Title from \"./Title\"\nconst BannerCategories = () => {\n  return (\n    <Wrapper>\n      <Title title=\"categories\" />\n      <Categories />\n    </Wrapper>\n  )\n}\nconst Wrapper = styled.div`\n  .category {\n    font-size: 1rem;\n    color: var(--clr-grey-5);\n    text-transform: capitalize;\n    display: block;\n    padding: 0.5rem 0 0.5rem 1rem;\n    letter-spacing: var(--spacing);\n    transition: var(--transition);\n    border-radius: var(--radius);\n  }\n  .category:hover {\n    background: var(--clr-grey-10);\n  }\n`\nexport default BannerCategories\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport About from \"./About\"\nimport Instagram from \"./Instagram\"\nimport Recent from \"./Recent\"\nimport BannerCategories from \"./BannerCategories\"\nconst Banner = () => {\n  return (\n    <Wrapper>\n      <About />\n      <BannerCategories />\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled.aside`\n  display: grid;\n  grid-template-columns: 200px;\n  justify-content: center;\n  row-gap: 1rem;\n  @media (min-width: 576px) {\n    & {\n      grid-template-columns: repeat(auto-fit, 200px);\n      column-gap: 3rem;\n    }\n  }\n`\n\nexport default Banner\n","import React from \"react\"\nimport Layout from \"../components/Layout\"\nimport Hero from \"../components/Hero\"\nimport { graphql } from \"gatsby\"\nimport Posts from \"../components/Posts\"\nconst PostsPage = ({ data }) => {\n  const {\n    allMdx: { nodes: posts },\n  } = data\n  return (\n    <Layout>\n      <Hero />\n      <Posts posts={posts} title=\"all posts\" />\n    </Layout>\n  )\n}\n\nexport const query = graphql`\n  {\n    allMdx(sort: { fields: frontmatter___date, order: DESC }) {\n      nodes {\n        frontmatter {\n          title\n          readTime\n          category\n          date(formatString: \"MMMM Do, YYYY\")\n          author\n          slug\n          image {\n            childImageSharp {\n              fluid {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n        }\n        excerpt\n        id\n      }\n    }\n  }\n`\n\nexport default PostsPage\n","import React from \"react\"\nimport Image from \"gatsby-image\"\nimport { FaRegClock } from \"react-icons/fa\"\nimport { IoMdArrowRoundForward } from \"react-icons/io\"\nimport { Link } from \"gatsby\"\nimport styled from \"styled-components\"\n\nconst Post = ({ frontmatter, excerpt }) => {\n  const { title, image, slug, date, category, readTime } = frontmatter\n  return (\n    <Wrapper>\n      <Image fluid={image.childImageSharp.fluid} className=\"img\" />\n      <div className=\"info\">\n        <span className=\"category\">{category}</span>\n        <h3>{title}</h3>\n        <div className=\"underline\"></div>\n        <p>{excerpt}</p>\n        <Link to={`/posts/${slug}`} className=\"link\">\n          Continue Reading <IoMdArrowRoundForward />\n        </Link>\n        <footer>\n          <span className=\"date\">\n            <FaRegClock className=\"icon\"></FaRegClock>\n            {date}\n          </span>\n          <span>{readTime} min read</span>\n        </footer>\n      </div>\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled.article`\n  margin-bottom: 3rem;\n  .info {\n    text-align: center;\n  }\n  .img {\n    margin-bottom: 1rem;\n    border-radius: var(--radius);\n    height: 17rem;\n  }\n  .category {\n    display: inline-block;\n    margin-bottom: 1rem;\n    background: var(--clr-grey-10);\n    padding: 0.25rem 0.5rem;\n    text-transform: uppercase;\n    font-weight: 700;\n    border-radius: var(--radius);\n    letter-spacing: var(--spacing);\n    color: var(--clr-grey-5);\n  }\n  h3 {\n    font-weight: 400;\n    margin-bottom: 1rem;\n    text-transform: initial;\n  }\n  .underline {\n    width: 5rem;\n    height: 1px;\n    background: var(--clr-grey-9);\n    margin: 0 auto;\n    margin-bottom: 1rem;\n  }\n  p {\n    color: var(--clr-grey-5);\n    line-height: 1.8;\n  }\n  .link {\n    text-transform: uppercase;\n    letter-spacing: var(--spacing);\n    font-weight: 700;\n    color: var(--clr-primary-5);\n    padding-bottom: 0.1rem;\n    display: flex;\n    align-items: center;\n    svg {\n      margin-left: 0.25rem;\n      font-size: 1.2rem;\n    }\n  }\n  .link:hover {\n    border-color: var(--clr-primary-8);\n    color: var(--clr-primary-8);\n  }\n  footer {\n    margin-top: 2rem;\n    padding-top: 1rem;\n    border-top: 1px solid var(--clr-grey-9);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--clr-grey-5);\n\n    & .date {\n      display: flex;\n      align-items: center;\n      & .icon {\n        color: var(--clr-primary-5);\n        margin-right: 0.5rem;\n      }\n    }\n  }\n  @media (min-width: 600px) {\n    .img {\n      height: 20rem;\n    }\n  }\n  @media (min-width: 800px) {\n    .img {\n      height: 25rem;\n    }\n  }\n  @media (min-width: 992px) {\n    & {\n      display: grid;\n      grid-template-columns: 30rem 1fr;\n      column-gap: 1.5rem;\n      .info {\n        text-align: left;\n      }\n      .img {\n        height: 100%;\n        max-height: 20rem;\n      }\n      .underline {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n  }\n`\n\nexport default Post\n","import React from \"react\"\nimport Post from \"./Post\"\nimport Banner from \"../Banner\"\nconst Posts = ({ posts, title }) => {\n  return (\n    <section className=\"posts\">\n      <h3 className=\"posts-title\">{title}</h3>\n      <div className=\"posts-center\">\n        <article>\n          {posts.map(post => {\n            return <Post key={post.id} {...post}></Post>\n          })}\n        </article>\n        <article>\n          <Banner />\n        </article>\n      </div>\n    </section>\n  )\n}\n\nexport default Posts\n"],"sourceRoot":""}