{"version":3,"sources":["webpack:///./src/assets/cl-logo-blog.png","webpack:///./src/views/Blog.vue?7358","webpack:///./src/assets/blogSamplePic.png","webpack:///./src/views/Blog.vue","webpack:///src/views/Blog.vue","webpack:///./src/views/Blog.vue?2220","webpack:///./src/views/Blog.vue?1525"],"names":["module","exports","render","_vm","this","_c","_self","staticClass","_v","attrs","require","on","$event","$emit","name","_l","posts","post","index","key","style","backgroundImage","img","goToPost","_s","title","subtitle","staticRenderFns","metaInfo","meta","content","data","CMS","beforeCreate","then","console","date","methods","mounted","document","window","setTimeout","destroyed","component"],"mappings":"qGAAAA,EAAOC,QAAU,IAA0B,iC,kCCA3C,W,qBCAAD,EAAOC,QAAU,IAA0B,kC,gECA3C,IAAIC,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,iBAAiB,CAACF,EAAG,MAAM,CAACE,YAAY,iBAAiBF,EAAG,KAAK,CAACF,EAAIK,GAAG,kBAAkBH,EAAG,MAAM,CAACE,YAAY,YAAYE,MAAM,CAAC,IAAMC,EAAQ,SAA8BC,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOT,EAAIU,MAAM,cACnT,CAACC,KAAM,aAAaT,EAAG,MAAM,CAACE,YAAY,kBAAkBJ,EAAIY,GAAIZ,EAAIa,OAAO,SAASC,EAAKC,GAAO,OAAOb,EAAG,MAAM,CAACc,IAAID,EAAMX,YAAY,QAAQ,CAACF,EAAG,MAAM,CAACE,YAAY,UAAUa,MAAO,CAACC,gBAAiB,OAAOJ,EAAKK,IAAI,KAAMX,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOT,EAAIoB,SAASL,MAAU,CAACb,EAAG,MAAM,CAACE,YAAY,iBAAiBF,EAAG,MAAM,CAACE,YAAY,YAAY,CAACF,EAAG,KAAK,CAACF,EAAIK,GAAGL,EAAIqB,GAAGP,EAAKQ,UAAUpB,EAAG,KAAK,CAACF,EAAIK,GAAGL,EAAIqB,GAAGP,EAAKS,aAAarB,EAAG,MAAM,CAACE,YAAY,eAAeI,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOT,EAAIoB,SAASL,MAAU,CAACb,EAAG,OAAOA,EAAG,OAAO,CAACF,EAAIK,GAAG,wBAAuB,GAAGH,EAAG,eAAe,IAEjmBsB,EAAkB,GCgJP,G,kDAAA,CAEfC,UACAH,aACAI,MACA,CAEAf,mBACAgB,QACA,6EAIAC,gBACA,OACAf,SACAgB,WAIAC,wBAAA,WAEA,uCACAC,kBACA,kBACA,2BAEAC,4CACA,cACAb,wCACAc,qDACAX,uDACAC,6DACAI,oEAOAO,SACAd,qBACA,4CACA,0BAAAT,gBAIAwB,mBAAA,WACAC,kCACAC,qBAEAC,uBACA,oBACA,OAGAC,qBACAH,uCC5M8U,I,wBCQ1UI,EAAY,eACd,EACAzC,EACAyB,GACA,EACA,KACA,KACA,MAIa,aAAAgB,E","file":"js/chunk-5f8b067d.6a8c530b.js","sourcesContent":["module.exports = __webpack_public_path__ + \"img/cl-logo-blog.020fabc6.png\";","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Blog.vue?vue&type=style&index=0&id=03227e81&prod&lang=sass&\"","module.exports = __webpack_public_path__ + \"img/blogSamplePic.5c676615.png\";","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"blogContainer\"},[_c('div',{staticClass:\"navContainer\"}),_c('h1',[_vm._v(\"Latest posts\")]),_c('img',{staticClass:\"logoBlack\",attrs:{\"src\":require(\"@/assets/cl-logo-blog.png\")},on:{\"click\":function($event){return _vm.$emit('changeRoute',\n    {name: 'home'})}}}),_c('div',{staticClass:\"postsContainer\"},_vm._l((_vm.posts),function(post,index){return _c('div',{key:index,staticClass:\"post\"},[_c('div',{staticClass:\"postImg\",style:({backgroundImage: 'url('+post.img+')'}),on:{\"click\":function($event){return _vm.goToPost(index)}}},[_c('div',{staticClass:\"postShadow\"})]),_c('div',{staticClass:\"postText\"},[_c('h1',[_vm._v(_vm._s(post.title))]),_c('h2',[_vm._v(_vm._s(post.subtitle))]),_c('div',{staticClass:\"btn animated\",on:{\"click\":function($event){return _vm.goToPost(index)}}},[_c('div'),_c('span',[_vm._v(\"Read More\")])])])])}),0),_c('footerComp')],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div class=\"blogContainer\">\n        <div class=\"navContainer\"></div>\n        <h1>Latest posts</h1>\n        <img class=\"logoBlack\" src=\"@/assets/cl-logo-blog.png\" @click=\"$emit('changeRoute',\n        {name: 'home'})\">\n        <div class=\"postsContainer\">\n            <div v-for=\"(post, index) in posts\" :key=\"index\" class=\"post\">\n                <div class=\"postImg\" :style=\"{backgroundImage: 'url('+post.img+')'}\" @click=\"goToPost(index)\">\n                    <div class=\"postShadow\"></div>\n                </div>\n                <div class=\"postText\">\n                    <h1>{{post.title}}</h1>\n                    <h2>{{post.subtitle}}</h2>\n                    <div class=\"btn animated\" @click=\"goToPost(index)\">\n                        <div></div>\n                        <span>Read More</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <footerComp/>\n    </div>\n</template>\n\n<style lang=\"sass\">\n$color1: rgba(38, 70, 83, 1)\n$color2: rgba(42, 157, 143, 1)\n$color3: rgba(233, 196, 106, 1)\n$color4: rgba(244, 162, 97, 1)\n$color5: rgba(231, 111, 81, 1)\n\n.blogContainer\n    #footer\n        background-color: black !important\n    .navContainer\n        height: 120px\n        width: 100vw\n        position: fixed\n        z-index: 150\n        left: 0\n        top: 0\n        background: #fff\n        @media (max-width: 1100px)\n            height: 95px\n    margin: 0\n    width: 100vw\n    height: auto\n    background-color: #fff\n    position: absolute\n    left: 0\n    top: 0\n    display: flex\n    flex-direction: column\n    align-items: center\n    .postsContainer\n        margin: 150px 0 200px 0\n        @media (max-width: 1100px)\n            margin-bottom: 100px\n        .post\n            *\n                margin: 0\n                padding: 0\n                text-align: left\n                display: block\n            transform: translateY(100px)\n            opacity: 0\n            animation: fade-up-blog 1s 1.5s ease-in-out forwards\n            .postImg\n                width: 45%\n                height: 500px\n                background-size: cover\n                @media (max-width: 1100px)\n                    width: 90%\n                    margin: auto\n                    margin-bottom: 30px\n                    height: 90vw\n                .postShadow\n                    position: relative\n                    transition: all .5s ease-in-out\n                    z-index: -1\n                    width: 100%\n                    height: 100%\n                    background: $color5\n                &:hover\n                    .postShadow\n                        transform: translate(30px, 30px)\n            @media (max-width: 1100px)\n                margin: 0 0 100px 0\n            display: flex\n            align-items: center\n            width: 100vw\n            @media (max-width: 1100px)\n                flex-direction: column\n            box-sizing: border-box\n            height: auto\n            @media (min-width: 1100px)\n                &:nth-child(2n)\n                    flex-direction: row-reverse\n                    justify-content: space-between\n            .postText\n                padding: 100px\n                @media (max-width: 1100px)\n                    padding: 0\n                h1, h2, p\n                    color: black\n                    @media (max-width: 1100px)\n                        text-align: center\n                h1\n                    font-size: 60px\n                    @media (max-width: 1100px)\n                        font-size: 30px\n                h2\n                    font-size: 30px\n                    margin: 20px 0\n                    @media (max-width: 1100px)\n                        font-size: 20px\n                        margin: 10px 0 20px 0\n                small\n                    margin-bottom: 7px\n                    font-style: italic\n                .btn\n                    @media (max-width: 1100px)\n                        margin: auto\n                    margin-top: 15px\n                    width: 100px\n                    box-shadow: inset 0px 0px 0px 2px black\n                    div\n                        background-color: black\n                    span\n                        color: black\n                        text-align: center\n                    &:hover\n                        span\n                            color: #fff\n\n\n@keyframes fade-up-blog \n    0%\n        transform: translateY(100px)\n        opacity: 0\n    100%\n        transform: translateY(0)\n        opacity: 1\n</style>\n\n<script>\nexport default {\n    //VueMeta\n    metaInfo: {\n        title: 'Blog',\n        meta: [\n            {\n                //vmid: 'description',\n                name: 'description',\n                content:\n                    'Our Blog showcasing our latest Apps, Services and Shopify related news.'\n            }\n        ]\n    },\n    data() {\n        return {\n            posts: [],\n            CMS: null\n        }\n    },\n\n    beforeCreate() {\n        // CMS DEMONSTRATION\n        this.$prismic.client.getSingle('blog')\n        .then(doc => {\n            this.CMS = doc.data.body\n            this.CMS.forEach(post => {\n                // eslint-disable-next-line no-console\n                console.log(post.primary.post_content[0].text)\n                this.posts.push({\n                    img: post.primary.post_image.url || require('./../assets/blogSamplePic.png'),\n                    date: post.primary.post_date[0].text.replace(/\\s+/g, ' '),\n                    title: post.primary.post_title[0].text.replace(/\\s+/g, ' '),\n                    subtitle: post.primary.post_subtitle[0].text.replace(/\\s+/g, ' '),\n                    content: post.primary.post_content[0].text.replace(/\\s+/g, ' '),\n                })\n            })\n        })\n        //\n    },\n\n    methods: {\n        goToPost(index) {\n            this.$store.state.currentPost = this.posts[index]\n            this.$emit('changeRoute', {name: 'post'})\n        }\n    },\n\n    mounted() {\n        document.body.style.height = \"auto\"\n        window.scrollTo(0, 0)\n\n        setTimeout(() => {\n        this.playAnimText = true\n        }, 1200)\n    },\n\n    destroyed() {\n        document.body.style.height = \"1000vh\"\n    }\n}\n</script>","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Blog.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Blog.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Blog.vue?vue&type=template&id=03227e81&\"\nimport script from \"./Blog.vue?vue&type=script&lang=js&\"\nexport * from \"./Blog.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Blog.vue?vue&type=style&index=0&id=03227e81&prod&lang=sass&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}