{"version":3,"sources":["webpack:///./src/templates/blog-template/blog-template.js","webpack:///./src/templates/blog-template/blog-template.stc.js"],"names":["BlogTemplate","data","restProps","titleStyle","metaBoxStyle","metaHeadingStyle","metaTextStyle","post","markdownRemark","frontmatter","imageData","image","childImageSharp","fluid","title","titleSEO","description","descSEO","className","date","author","dangerouslySetInnerHTML","__html","html","defaultProps","as","color","responsive","small","mb","pt","pb","fontSize","fontweight","letterspacing","m","BlogDetailsWrap","styled","div","BlogDetailsHeader","BackgroundImage","device","xlarge","medium","BlogDetailsMetaWrap","BlogDetailsMeta","props","css","BlogDetailsContent","xsmallOnly","smallOnly","mediumOnly","largeOnly","theme","colors","primary","xxsmall"],"mappings":"oMAmBA,SAASA,EAAT,GAA6C,IAAtBC,EAAqB,EAArBA,KAASC,EAAY,wBACjCC,EAA6DD,EAA7DC,WAAYC,EAAiDF,EAAjDE,aAAcC,EAAmCH,EAAnCG,iBAAkBC,EAAiBJ,EAAjBI,cAC7CC,EAAON,EAAKO,eAAeC,YAC3BC,EAAYH,EAAKI,MAAMC,gBAAgBC,MAO7C,OACI,kBAAC,IAAD,KACI,kBAAC,IAAD,CAAKC,MAAOP,EAAKQ,SAAWC,YAAaT,EAAKU,UAC9C,kBAAC,IAAD,KACI,kBAAC,IAAD,CAAmBJ,MAAOH,GACtB,yBAAKQ,UAAU,0BACX,yBAAKA,UAAU,kBACX,yBAAKA,UAAU,8BACX,kBAAC,IAAYf,EAAaI,EAAKO,SAGvC,yBAAKI,UAAU,kBACX,kBAAC,IAAD,KACI,kBAAC,IAAoBd,EACjB,kBAAC,IAASE,EAAV,oBACA,kBAAC,IAAYD,EAAmBE,EAAKY,OAEzC,kBAAC,IAAoBf,EACjB,kBAAC,IAASE,EAAV,UACA,kBAAC,IAAYD,EAAmBE,EAAKa,aAYzD,kBAAC,IAAD,KACI,yBAAKC,wBAAyB,CAACC,OAAQrB,EAAKO,eAAee,WA2C/EvB,EAAawB,aAAe,CACxBrB,WAAY,CACRsB,GAAI,KACJC,MAAO,OACPC,WAAY,CACRC,MAAM,CACFC,GAAI,UAIhBzB,aAAc,CACVyB,GAAI,OACJF,WAAY,CACRC,MAAO,CACHC,GAAI,EACJC,GAAI,OACJC,GAAI,UAIhB1B,iBAAkB,CACdoB,GAAI,KACJC,MAAO,OACPM,SAAU,OACVC,WAAY,IACZC,cAAe,MACfL,GAAI,QAERvB,cAAe,CACX6B,EAAG,EACHH,SAAU,OACVN,MAAO,OACPQ,cAAe,QAIRlC,a,kCC5If,2NAIaoC,EAAkBC,IAAOC,IAAV,wFAAGD,CAAH,MAGfE,EAAoBF,YAAOG,KAAV,0FAAGH,CAAH,6bAUbI,IAAOb,MAIXa,IAAOC,OAKPD,IAAOE,OAKPF,IAAOb,OAYPgB,EAAsBP,IAAOC,IAAV,4FAAGD,CAAH,MAEnBQ,EAAkBR,IAAOC,IAAV,wFAAGD,CAAH,2BACP,SAAAS,GAAK,OAAIA,EAAMjB,MAC9B,SAAAiB,GAAK,OAAIA,EAAMnB,YAAcoB,YAApB,SACL,SAAAD,GAAK,OAAIA,EAAMnB,WAAWC,OAASmB,YAA1B,sEACEN,IAAOb,OACK,SAAAkB,GAAK,OAAIA,EAAMnB,WAAWC,MAAMC,MAClC,SAAAiB,GAAK,OAAIA,EAAMnB,WAAWC,MAAME,MAC7B,SAAAgB,GAAK,OAAIA,EAAMnB,WAAWC,MAAMG,YAMrDiB,EAAqBX,IAAOC,IAAV,2FAAGD,CAAH,k9CAOlBI,IAAOE,OAGPF,IAAOb,MASHa,IAAOQ,WAGPR,IAAOS,UAGPT,IAAOU,WAGPV,IAAOW,UAwBCX,IAAOU,WAMPV,IAAOU,WAUPV,IAAOU,WAOfV,IAAOC,OAKPD,IAAOb,OAaP,SAAAkB,GAAK,OAAIA,EAAMO,MAAMC,OAAOC,UAC5Bd,IAAOE,OAUPF,IAAOe,QAOPf,IAAOE,OAGPF,IAAOe,QAMPf,IAAOE,OAGPF,IAAOb,MAMPa,IAAOE,OAGPF,IAAOb,MAOPa,IAAOC,QAOGL,IAAOC,IAAV,oFAAGD,CAAH,mGAQOA,IAAOC,IAAV,wFAAGD,CAAH","file":"component---src-templates-blog-template-blog-template-js-17d04ab36068a5cd7f82.js","sourcesContent":["import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n// import { DiscussionEmbed, CommentCount } from 'disqus-react';\r\n\r\nimport {graphql} from 'gatsby'\r\nimport SEO from '../../components/seo';\r\nimport Layout from '../../containers/layout/layout'\r\nimport Heading from '../../components/shared/heading'\r\nimport Text from '../../components/shared/text'\r\nimport {\r\n    BlogDetailsWrap,\r\n    BlogDetailsHeader,\r\n    BlogDetailsMetaWrap,\r\n    BlogDetailsMeta,\r\n    BlogDetailsContent,\r\n    // CommentWrap,\r\n    // CommentFormWrap\r\n} from './blog-template.stc'\r\n \r\nfunction BlogTemplate({data, ...restProps}) {\r\n    const {titleStyle, metaBoxStyle, metaHeadingStyle, metaTextStyle} = restProps;\r\n    const post = data.markdownRemark.frontmatter;\r\n    const imageData = post.image.childImageSharp.fluid;\r\n    // const disqusShortname = 'thern-1';\r\n    // const disqusConfig = {\r\n    //     url: post.path,\r\n    //     identifier: post.id,\r\n    //     title: post.title,\r\n    // }; \r\n    return (\r\n        <Layout>\r\n            <SEO title={post.titleSEO}  description={post.descSEO}/>\r\n            <BlogDetailsWrap>\r\n                <BlogDetailsHeader fluid={imageData}>\r\n                    <div className=\"row align-items-center\">\r\n                        <div className=\"col-2 offset-1\">\r\n                            <div className=\"rn-blog-details-meta-inner\">\r\n                                <Heading {...titleStyle}>{post.title}</Heading>\r\n                            </div>\r\n                        </div>\r\n                        <div className=\"col-1 offset-1\">\r\n                            <BlogDetailsMetaWrap>\r\n                                <BlogDetailsMeta {...metaBoxStyle}>\r\n                                    <Text {...metaTextStyle}>Дата публикации:</Text>\r\n                                    <Heading {...metaHeadingStyle}>{post.date}</Heading>\r\n                                </BlogDetailsMeta>\r\n                                <BlogDetailsMeta {...metaBoxStyle}>\r\n                                    <Text {...metaTextStyle}>Автор:</Text>\r\n                                    <Heading {...metaHeadingStyle}>{post.author}</Heading>\r\n                                </BlogDetailsMeta>\r\n                                {/* <BlogDetailsMeta {...metaBoxStyle}>\r\n                                    <Text {...metaTextStyle}>Comments:</Text>\r\n                                    <Heading {...metaHeadingStyle}>\r\n                                        <CommentCount shortname={disqusShortname} config={disqusConfig}/>\r\n                                    </Heading>\r\n                                </BlogDetailsMeta> */}\r\n                            </BlogDetailsMetaWrap>\r\n                        </div>\r\n                    </div>\r\n                </BlogDetailsHeader>\r\n                <BlogDetailsContent>\r\n                    <div dangerouslySetInnerHTML={{__html: data.markdownRemark.html}}/>\r\n                </BlogDetailsContent>\r\n                {/* <CommentWrap>\r\n                    <CommentFormWrap>\r\n                        <DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />\r\n                    </CommentFormWrap>\r\n                </CommentWrap> */}\r\n            </BlogDetailsWrap>\r\n        </Layout>\r\n    )\r\n}\r\n\r\nexport const query = graphql `\r\n    query($slug: String!){\r\n        markdownRemark(fields: {slug: {eq: $slug}}){\r\n            frontmatter {\r\n                id\r\n                title\r\n                titleSEO\r\n                descSEO\r\n                date(formatString: \"MMM Do, YYYY\")\r\n                author\r\n                image {\r\n                    childImageSharp {\r\n                      fluid(maxWidth: 1920, maxHeight: 800, quality: 100) {\r\n                        ...GatsbyImageSharpFluid_withWebp\r\n                        presentationWidth\r\n                        presentationHeight\r\n                      }\r\n                    }\r\n                }\r\n            }  \r\n            html \r\n        }\r\n    }\r\n`;\r\n\r\nBlogTemplate.propTypes = {\r\n    metaHeadingStyle: PropTypes.object,\r\n    metaTextStyle: PropTypes.object,\r\n    titleStyle: PropTypes.object\r\n}\r\n\r\nBlogTemplate.defaultProps = {\r\n    titleStyle: {\r\n        as: 'h1',\r\n        color: '#fff',\r\n        responsive: {\r\n            small:{\r\n                mb: '22px'\r\n            }\r\n        }\r\n    },\r\n    metaBoxStyle: {\r\n        mb: '30px',\r\n        responsive: {\r\n            small: {\r\n                mb: 0,\r\n                pt: '11px',\r\n                pb: '11px'\r\n            }\r\n        }\r\n    },\r\n    metaHeadingStyle: {\r\n        as: 'h6',\r\n        color: '#fff',\r\n        fontSize: '12px',\r\n        fontweight: 700,\r\n        letterspacing: '2px',\r\n        mb: '12px'\r\n    },\r\n    metaTextStyle: {\r\n        m: 0,\r\n        fontSize: '12px',\r\n        color: '#fff',\r\n        letterspacing: '1px'\r\n    }\r\n}\r\n\r\nexport default BlogTemplate\r\n","import styled, {css} from 'styled-components'\r\nimport BackgroundImage from 'gatsby-background-image'\r\nimport {device} from '../../theme';\r\n\r\nexport const BlogDetailsWrap = styled.div `\r\n    \r\n`\r\nexport const BlogDetailsHeader = styled(BackgroundImage) `\r\n    background-repeat: no-repeat !important;\r\n    background-size: cover !important;\r\n    background-position: center center !important;\r\n    min-height: 70vh;\r\n    padding: 130px 0;\r\n    display: flex;\r\n    align-items: center;\r\n    & > .row{\r\n        flex-wrap: nowrap;\r\n        @media ${device.small}{\r\n            flex-wrap: wrap;\r\n        }\r\n    }\r\n    @media ${device.xlarge}{\r\n        .col-1.offset-1 {\r\n            margin-left: 0;\r\n        }\r\n    }\r\n    @media ${device.medium}{\r\n        .col-1.offset-1 {\r\n            margin-left: 20vw;\r\n        }\r\n    }\r\n    @media ${device.small}{\r\n        min-height: 450px;\r\n        padding-top: 150px;\r\n        .col-1.offset-1 {\r\n            margin-left: 10vw;\r\n        }\r\n    }\r\n    &.gatsby-image-wrapper{\r\n        z-index: -1;\r\n    }\r\n`;\r\n\r\nexport const BlogDetailsMetaWrap = styled.div ``;\r\n\r\nexport const BlogDetailsMeta = styled.div `\r\n    margin-bottom: ${props => props.mb};\r\n    ${props => props.responsive && css `\r\n        ${props => props.responsive.small && css `\r\n            @media ${device.small}{\r\n                margin-bottom: ${props => props.responsive.small.mb};\r\n                padding-top: ${props => props.responsive.small.pt};\r\n                padding-bottom: ${props => props.responsive.small.pb};\r\n            }\r\n        `}\r\n    `}\r\n`;\r\n\r\nexport const BlogDetailsContent = styled.div `\r\n    background: #f8f8f8;\r\n    z-index: -1 !important;\r\n    .gatsby-image-wrapper{\r\n        z-index: 2;\r\n    }\r\n    padding-top: 130px;\r\n    @media ${device.medium}{\r\n        padding-top: 70px;\r\n    }\r\n    @media ${device.small}{\r\n        padding-top: 10vw;\r\n    }    \r\n    .container{\r\n        width: 100%;\r\n        padding-right: 15px;\r\n        padding-left: 15px;\r\n        margin-right: auto;\r\n        margin-left: auto;\r\n        @media ${device.xsmallOnly}{\r\n            max-width: 540px;\r\n        }\r\n        @media ${device.smallOnly}{\r\n            max-width: 720px;\r\n        }\r\n        @media ${device.mediumOnly}{\r\n            max-width: 960px;\r\n        }\r\n        @media ${device.largeOnly}{\r\n            max-width: 1200px;\r\n        }\r\n    }\r\n    .row{\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        margin-right: -15px;\r\n        margin-left: -15px;\r\n        [class^=\"col\"]{\r\n            position: relative;\r\n            width: 100%;\r\n            min-height: 1px;\r\n            padding-right: 15px;\r\n            padding-left: 15px;\r\n        }\r\n    }\r\n    .col{\r\n        &-12{\r\n            flex: 0 0 100%;\r\n            max-width: 100%;\r\n        }\r\n        &-lg{\r\n            &-4{\r\n                @media ${device.mediumOnly}{\r\n                    flex: 0 0 33.333333%;\r\n                    max-width: 33.333333%;\r\n                }\r\n            }\r\n            &-6{\r\n                @media ${device.mediumOnly}{\r\n                    flex: 0 0 50%;\r\n                    max-width: 50%;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    .offset{\r\n        &-lg{\r\n            &-2{\r\n                @media ${device.mediumOnly}{\r\n                    margin-left: 16.666667%;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    .rn-blog-meta-area{\r\n        @media ${device.xlarge}{\r\n            .col-2.offset-1{\r\n                margin-left: 20vw;\r\n            }\r\n        }\r\n        @media ${device.small}{\r\n            .col-2.offset-1{\r\n                margin-left: 10vw;\r\n            }\r\n        }\r\n    }\r\n    .rn-blog-content{\r\n        margin-top: -7px;\r\n        margin-bottom: -18px;\r\n    }\r\n    h2{\r\n        font-size: 40px;\r\n        line-height: 55px;\r\n        color: ${props => props.theme.colors.primary};\r\n        @media ${device.medium}{\r\n            font-size: 24px;\r\n            line-height: initial;\r\n        }\r\n    }\r\n    .wrap-table{\r\n        overflow-x: auto;\r\n        padding-top: 70px;\r\n    }\r\n    .fzsmall12{\r\n        @media ${device.xxsmall}{\r\n            font-size: 12px;\r\n        }\r\n    }\r\n    .table-title{\r\n        text-transform: uppercase;\r\n        font-weight: bold;\r\n        @media ${device.medium}{\r\n            writing-mode: vertical-rl;\r\n        }\r\n        @media ${device.xxsmall}{\r\n            font-size: 12px;\r\n        }\r\n    }\r\n    .section-ptb-xl{\r\n        padding: 130px 0;\r\n        @media ${device.medium}{\r\n            padding: 70px 0;\r\n        }\r\n        @media ${device.small}{\r\n            padding: 10vw 0;\r\n        }\r\n    }\r\n    .section-pb-xl{\r\n        padding-bottom: 130px;\r\n        @media ${device.medium}{\r\n            padding-bottom: 70px;\r\n        }\r\n        @media ${device.small}{\r\n            padding-bottom: 10vw;\r\n        } \r\n    }\r\n    .full-width-box{\r\n        padding-left: 80px;\r\n        padding-right: 80px;\r\n        @media ${device.xlarge}{\r\n            padding-left: 10vw;\r\n            padding-right: 10vw;\r\n        }\r\n    }\r\n`;\r\n\r\nexport const CommentWrap = styled.div `\r\n    padding-top: 70px;\r\n    padding-bottom: 70px;\r\n    background: #f8f8f8;\r\n    padding-right: 10vw;\r\n    padding-left: 10vw;\r\n`;\r\n\r\nexport const CommentFormWrap = styled.div `\r\n    max-width: 700px;\r\n    margin: 0 auto;\r\n`; "],"sourceRoot":""}