{"version":3,"sources":["webpack:///./src/templates/blog-post.js","webpack:///./src/components/style/emo-post.js"],"names":["__webpack_require__","r","__webpack_exports__","d","query","react__WEBPACK_IMPORTED_MODULE_0__","react__WEBPACK_IMPORTED_MODULE_0___default","n","gatsby__WEBPACK_IMPORTED_MODULE_1__","_components_layout__WEBPACK_IMPORTED_MODULE_2__","_components_style_emo_post__WEBPACK_IMPORTED_MODULE_3__","_ref","post","data","markdownRemark","a","createElement","frontmatter","category","title","subtitle","href","project","target","demo","className","dangerouslySetInnerHTML","__html","html","date","tags","map","tag","index","key","to","Header","styled","MainPost","mwS","medium","css","large","Title","Subtitle","PreTitle","Tags","children","react__WEBPACK_IMPORTED_MODULE_3___default","Object","emotion__WEBPACK_IMPORTED_MODULE_0__","Date","Stats","_ref2","SocialShare","_ref3"],"mappings":"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","file":"component---src-templates-blog-post-js-721d29337305cf94cbc1.js","sourcesContent":["import React from \"react\";\nimport { graphql, Link } from \"gatsby\";\nimport Layout from \"../components/layout\";\nimport { Header, MainPost, PreTitle, Title,Subtitle, Tags, Date, Stats, SocialShare } from \"../components/style/emo-post\";\n\nexport default ({ data }) => {\n  const post = data.markdownRemark;\n  return (\n    <Layout>\n      <MainPost>\n        <Header>\n          <PreTitle>{post.frontmatter.category}</PreTitle>\n          <Title>{post.frontmatter.title}</Title>\n\t        <Subtitle>{post.frontmatter.subtitle}</Subtitle>\n          <p><strong>Project</strong> <a href={post.frontmatter.project} target={\"_blank\"}>{post.frontmatter.project}</a></p>\n          <p><strong>Demo</strong> <a href={post.frontmatter.demo} target={\"_blank\"}>{post.frontmatter.demo}</a></p>\n        </Header>\n        <div\n          className={\"content\"}\n          dangerouslySetInnerHTML={{ __html: post.html }}\n        />\n        <footer>\n          <Date>{post.frontmatter.date}</Date>\n\t        <Tags>\n\t\t        {post.frontmatter.tags.map((tag, index) => (\n\t\t\t        <li key={index}>{tag}</li>\n\t\t        ))}\n\t        </Tags>\n          <Stats>\n            <SocialShare>\n              <li className={\"social-icon\"}>\n                <Link to=\"#\">\n                  <span className={\"fab fa-twitter\"}> </span>\n                </Link>\n              </li>\n              <li className={\"social-icon\"}>\n                <Link to=\"#\">\n                  <span className={\"fab fa-facebook\"}> </span>\n                </Link>\n              </li>\n            </SocialShare>\n          </Stats>\n        </footer>\n      </MainPost>\n    </Layout>\n  );\n};\n\nexport const query = graphql`\n  query($slug: String!) {\n    markdownRemark(fields: { slug: { eq: $slug } }) {\n      html\n      frontmatter {\n        title\n        subtitle\n        tags\n        category\n        project\n        demo\n        date(formatString: \"DD MMMM, YYYY\")\n      }\n    }\n  }\n`;\n","import styled, { css } from \"react-emotion\";\nimport { mwS } from \"./breakpoints\";\nimport React from \"react\";\n\nexport const Header = styled.header`\n  padding-bottom: 20px;\n  margin-bottom: 20px !important;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  \n  & p > strong {\n    font-weight: 100;\n  }\n  & p > a {\n    text-decoration: underline;\n  }\n`;\n\nexport const MainPost = styled.article`\n  max-width: 100%;\n  width: auto;\n  padding: 50px 20px 30px 20px;\n  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);\n  border: 1px solid #eee;\n  background: #fff;\n  & div.content > p,\n  & div.content > ol,\n  & div.content > ul,\n  & > article,\n  & > header,\n  & > footer {\n    text-align: left;\n    margin: 0 20px;\n  }\n  & div.content > iframe {\n    margin: 30px 20px;\n  }\n  & div.content > p a iframe {\n    margin: 30px 0;\n  }\n  & div.content > span {\n    margin: 30px 0;\n  }\n  & div.content p > a {\n    text-decoration: underline;\n  }\n  & div.content > ul,\n  & div.content > ol {\n    margin-top: 20px;\n    margin-bottom: 20px;\n    margin-left: 40px;\n  }\n  & div.content > img {\n    max-width: 89%;\n    float: rigth;\n  }\n  ${mwS.medium(css`\n    max-width: 97%;\n    padding: 50px 50px 30px 50px;\n  `)}\n  ${mwS.large(css`\n    max-width: 950px;\n    & div.content > img {\n      max-width: 490px;\n    }\n  `)};\n`;\n\nexport const Title = styled.h3`\n`;\nexport const Subtitle = styled.h4`\n  margin-bottom: 30px;\n  font-weight: 300;\n`;\n\nexport const PreTitle = styled.h5`\n  text-transform: uppercase;\n  margin-bottom: 20px;\n  color: #777;\n  font-weight: 300;\n`;\n\nexport const Tags = ({ children }) => (\n  <div\n    css={`\n      & ul > li {\n        list-style: none;\n        display: inline-block;\n        padding: 7px 10px;\n        margin-bottom: 10px;\n        margin-right: 10px;\n        border: 1px solid #ddd;\n        background: #ddd;\n        width: auto;\n      }\n    `}\n  >\n    <ul>{children}</ul>\n  </div>\n);\n\nexport const Date = styled.h6`\n  text-transform: uppercase;\n  margin-bottom: 20px;\n  color: #777;\n  font-weight: 300;\n`;\n\nexport const Stats = ({ children }) => (\n  <div\n    css={`\n      margin: 30px 0;\n      padding: 30px 0;\n      overflow: hidden;\n      border-top: 1px solid #ddd;\n      border-bottom: 1px solid #ddd;\n    `}\n  >\n    {children}\n  </div>\n);\n\nexport const SocialShare = ({ children }) => (\n  <ul\n    css={`\n      float: right;\n      & > li {\n        width: auto;\n        list-style: none;\n        display: inline-block;\n      }\n      & > li.social-icon {\n        color: #666666;\n        font-size: 15px;\n        display: inline-block;\n        padding: 0.5rem 0.5rem;\n      }\n    `}\n  >\n    <li>SHARE : </li>\n    {children}\n  </ul>\n);\n\nexport const SocialReact = ({ children }) => (\n  <ul\n    css={`\n      float: left;\n      & > li {\n        list-style: none;\n        display: inline-block;\n        color: #666666;\n        font-size: 15px;\n        display: inline-block;\n        padding: 0.5rem 0.5rem;\n      }\n      & li.visit-counter {\n        user-select: none;\n        -o-user-select: none;\n      }\n    `}\n  >\n    {children}\n  </ul>\n);\n\nconst TextInput = styled.input`\n  display: block;\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  font-size: 1rem;\n  line-height: 1.25;\n  color: #464a4c;\n  background-color: #fff;\n  background-image: none;\n  -webkit-background-clip: padding-box;\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  border-radius: 0.25rem;\n  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n  &:focus {\n    color: #464a4c;\n    background-color: #fff;\n    border-color: #5cb3fd;\n    outline: none;\n  }\n`;\n\nexport const Comments = ({ children }) => (\n  <div\n    css={`\n      margin: 30px 0;\n      padding: 30px;\n      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);\n      border: 1px solid #ddd;\n      background: #fff;\n    `}\n  >\n    <form>\n      <div\n        className={\"row\"}\n        css={`\n          & > div ${TextInput} {\n            margin-bottom: 30px;\n            border-radius: 1px;\n            border: 0;\n            border-bottom: 1px solid #ddd;\n            height: 45px;\n            line-height: 45px;\n            box-shadow: none;\n            padding: 0;\n            width: 100%;\n          }\n        `}\n      >\n        <div className={\"col-sm-6\"}>\n          <TextInput\n            type={\"text\"}\n            name={\"contact-form-name\"}\n            placeholder={\"Enter your name\"}\n            required={\"\"}\n            aria-invalid={\"true\"}\n            aria-required={\"true\"}\n          />\n        </div>\n        <div className={\"col-sm-6\"}>\n          <TextInput\n            type={\"text\"}\n            name={\"contact-form-email\"}\n            placeholder={\"Enter your email\"}\n            required={\"\"}\n            aria-invalid={\"true\"}\n            aria-required={\"true\"}\n          />\n        </div>\n        <div className={\"col-sm-12\"}>\n          <textarea />\n        </div>\n        <div className={\"col-sm-12\"} />\n      </div>\n    </form>\n    {children}\n  </div>\n);\n"],"sourceRoot":""}