-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomponent---src-templates-postnodate-tsx-a3fcc96fd1321d60b760.js.map
1 lines (1 loc) · 29.4 KB
/
component---src-templates-postnodate-tsx-a3fcc96fd1321d60b760.js.map
1
{"version":3,"sources":["webpack:///./src/templates/postnodate.tsx","webpack:///./src/components/PostContent.tsx","webpack:///./src/components/subscribe/Subscribe.tsx"],"names":["PostTemplate","name","styles","PostFull","NoImage","PostFullHeader","Object","_emotion_styled_base__WEBPACK_IMPORTED_MODULE_3__","target","PostFullTitle","setLightness","colors","darkgrey","PostFullImage","lightgrey","PageTemplate","props","post","data","markdownRemark","width","height","frontmatter","image","childImageSharp","fluid","sizes","split","String","Number","aspectRatio","_emotion_core__WEBPACK_IMPORTED_MODULE_4__","_layouts__WEBPACK_IMPORTED_MODULE_14__","className","react_helmet__WEBPACK_IMPORTED_MODULE_8__","lang","config","title","content","excerpt","property","siteUrl","pathContext","slug","src","date","tags","facebook","author","id","twitter","_components_Wrapper__WEBPACK_IMPORTED_MODULE_13__","css","_emotion_css__WEBPACK_IMPORTED_MODULE_0__","outer","SiteHeader","inner","_components_header_SiteNav__WEBPACK_IMPORTED_MODULE_10__","SiteMain","gatsby_image__WEBPACK_IMPORTED_MODULE_5___default","a","style","_components_PostContent__WEBPACK_IMPORTED_MODULE_11__","htmlAst","showSubscribe","_components_subscribe_Subscribe__WEBPACK_IMPORTED_MODULE_12__","_components_Footer__WEBPACK_IMPORTED_MODULE_9__","query","PostFullContent","_emotion_styled_base__WEBPACK_IMPORTED_MODULE_1__","blue","darken","whitegrey","lighten","setSaturation","renderAst","RehypeReact","createElement","React","components","Compiler","Ast","_ref","ast","_babel_runtime_helpers_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_0___default","properties","PostContent","_ref2","_emotion_core__WEBPACK_IMPORTED_MODULE_2__","SubscribeFormSection","_emotion_styled_base__WEBPACK_IMPORTED_MODULE_0__","midgrey","SubscribeFormTitle","Subscribe","_emotion_core__WEBPACK_IMPORTED_MODULE_1__","_SubscribeForm__WEBPACK_IMPORTED_MODULE_5__"],"mappings":"qdAwBMA,EAAY,CAAAC,KAAA,SAAAC,OAAA,+OAmBLC,EAAQ,CAAAF,KAAA,SAAAC,OAAA,iCAKRE,EAAO,CAAAH,KAAA,UAAAC,OAAA,uGAWPG,EAAiBC,OAAAC,EAAA,EAAAD,CAAA,UAAHE,OAAA,aAAGF,CAAH,CAAAL,KAAA,SAAAC,OAAA,0HA8BdO,EAAgBH,OAAAC,EAAA,EAAAD,CAAA,MAAHE,OAAA,aAAGF,CAAH,kBAEfI,YAAa,OAAQC,IAAOC,UAFb,gDAQpBC,EAAgBP,OAAAC,EAAA,EAAAD,CAAA,UAAHE,OAAA,aAAGF,CAAH,iDAGHK,IAAOG,UAHJ,wOAoNJC,UAzFmC,SAAAC,GAChD,IAAMC,EAAOD,EAAME,KAAKC,eACpBC,EAAQ,GACRC,EAAS,GAMb,OALIJ,EAAKK,YAAYC,OAASN,EAAKK,YAAYC,MAAMC,kBACnDJ,EAAQH,EAAKK,YAAYC,MAAMC,gBAAgBC,MAAMC,MAAMC,MAAM,MAAM,GAAGA,MAAM,MAAM,GACtFN,EAASO,OAAOC,OAAOT,GAASH,EAAKK,YAAYC,MAAMC,gBAAgBC,MAAMK,cAI7ExB,OAAAyB,EAAA,EAAAzB,CAAC0B,EAAA,EAAD,CAAaC,UAAU,iBACrB3B,OAAAyB,EAAA,EAAAzB,CAAC4B,EAAA,OAAD,KACE5B,OAAAyB,EAAA,EAAAzB,CAAA,QAAM6B,KAAMC,IAAOD,OACnB7B,OAAAyB,EAAA,EAAAzB,CAAA,aAAQW,EAAKK,YAAYe,OAEzB/B,OAAAyB,EAAA,EAAAzB,CAAA,QAAML,KAAK,cAAcqC,QAASrB,EAAKsB,UACvCjC,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,eAAeF,QAASF,IAAOC,QAC9C/B,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,UAAUF,QAAQ,YACjChC,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,WAAWF,QAASrB,EAAKK,YAAYe,QACpD/B,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,iBAAiBF,QAASrB,EAAKsB,UAC9CjC,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,SAASF,QAASF,IAAOK,QAAUzB,EAAM0B,YAAYC,OAClE1B,EAAKK,YAAYC,OAASN,EAAKK,YAAYC,MAAMC,iBACjDlB,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,WAAWF,QAAO,GAAKF,IAAOK,QAAUxB,EAAKK,YAAYC,MAAMC,gBAAgBC,MAAMmB,MAEtGtC,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,yBAAyBF,QAASrB,EAAKK,YAAYuB,OAGjE5B,EAAKK,YAAYwB,MAChBxC,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,cAAcF,QAASrB,EAAKK,YAAYwB,KAAK,KAG7DV,IAAOW,UAAYzC,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,oBAAoBF,QAASF,IAAOW,WACtEX,IAAOW,UAAYzC,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,iBAAiBF,QAASF,IAAOW,WACpEzC,OAAAyB,EAAA,EAAAzB,CAAA,QAAML,KAAK,eAAeqC,QAAQ,wBAClChC,OAAAyB,EAAA,EAAAzB,CAAA,QAAML,KAAK,gBAAgBqC,QAASrB,EAAKK,YAAYe,QACrD/B,OAAAyB,EAAA,EAAAzB,CAAA,QAAML,KAAK,sBAAsBqC,QAASrB,EAAKsB,UAC/CjC,OAAAyB,EAAA,EAAAzB,CAAA,QAAML,KAAK,cAAcqC,QAASF,IAAOK,QAAUzB,EAAM0B,YAAYC,OACnE1B,EAAKK,YAAYC,OAASN,EAAKK,YAAYC,MAAMC,iBACjDlB,OAAAyB,EAAA,EAAAzB,CAAA,QAAML,KAAK,gBAAgBqC,QAAO,GAAKF,IAAOK,QAAUxB,EAAKK,YAAYC,MAAMC,gBAAgBC,MAAMmB,MAEvGtC,OAAAyB,EAAA,EAAAzB,CAAA,QAAML,KAAK,iBAAiBqC,QAAQ,eACpChC,OAAAyB,EAAA,EAAAzB,CAAA,QAAML,KAAK,gBAAgBqC,QAASrB,EAAKK,YAAY0B,OAAOC,KAC5D3C,OAAAyB,EAAA,EAAAzB,CAAA,QAAML,KAAK,iBAAiBqC,QAAQ,gBACnCrB,EAAKK,YAAYwB,MAAQxC,OAAAyB,EAAA,EAAAzB,CAAA,QAAML,KAAK,gBAAgBqC,QAASrB,EAAKK,YAAYwB,KAAK,KACnFV,IAAOc,SAAW5C,OAAAyB,EAAA,EAAAzB,CAAA,QAAML,KAAK,eAAeqC,QAAO,IAAMF,IAAOc,QAAQvB,MAAM,wBAAwB,KACtGS,IAAOc,SAAW5C,OAAAyB,EAAA,EAAAzB,CAAA,QACjBL,KAAK,kBACLqC,QAAO,IAAMF,IAAOc,QAAQvB,MAAM,wBAAwB,KAE3DP,GAASd,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,iBAAiBF,QAASlB,IAClDC,GAAUf,OAAAyB,EAAA,EAAAzB,CAAA,QAAMkC,SAAS,kBAAkBF,QAASjB,KAEvDf,OAAAyB,EAAA,EAAAzB,CAAC6C,EAAA,EAAD,CAASC,IAAKpD,GACZM,OAAAyB,EAAA,EAAAzB,CAAA,UAAQ8C,IAAG9C,OAAA+C,EAAA,EAAA/C,CAAE,CAACgD,IAAOC,OACnBjD,OAAAyB,EAAA,EAAAzB,CAAA,OAAK8C,IAAKI,KACRlD,OAAAyB,EAAA,EAAAzB,CAACmD,EAAA,EAAD,QAGJnD,OAAAyB,EAAA,EAAAzB,CAAA,QAAM2C,GAAG,YAAYhB,UAAU,YAAYmB,IAAG9C,OAAA+C,EAAA,EAAA/C,CAAE,CAACoD,IAAUJ,OACzDhD,OAAAyB,EAAA,EAAAzB,CAAA,OAAK8C,IAAKI,KAERlD,OAAAyB,EAAA,EAAAzB,CAAA,WAAS8C,IAAG9C,OAAA+C,EAAA,EAAA/C,CAAE,CAACH,GAAWc,EAAKK,YAAYC,OAASnB,KAClDE,OAAAyB,EAAA,EAAAzB,CAACD,EAAD,KACEC,OAAAyB,EAAA,EAAAzB,CAACG,EAAD,KAAgBQ,EAAKK,YAAYe,QAGjCpB,EAAKK,YAAYC,OAASN,EAAKK,YAAYC,MAAMC,iBACjDlB,OAAAyB,EAAA,EAAAzB,CAACO,EAAD,KACEP,OAAAyB,EAAA,EAAAzB,CAACqD,EAAAC,EAAD,CACEC,MAAO,CAAExC,OAAQ,QACjBI,MAAOR,EAAKK,YAAYC,MAAMC,gBAAgBC,SAIpDnB,OAAAyB,EAAA,EAAAzB,CAACwD,EAAA,EAAD,CAAaC,QAAS9C,EAAK8C,UAG1B3B,IAAO4B,eAAiB1D,OAAAyB,EAAA,EAAAzB,CAAC2D,EAAA,EAAD,CAAW5B,MAAOD,IAAOC,WAMxD/B,OAAAyB,EAAA,EAAAzB,CAAC4D,EAAA,EAAD,SAQD,IAAMC,EAAK,iKChTLC,EAAkB9D,OAAA+D,EAAA,EAAA/D,CAAA,WAAHE,OAAA,aAAGF,CAAH,kwBAyEVK,IAAO2D,KAzEG,kCA6Ef3D,IAAO2D,KA7EQ,0CAoFfC,YAAO,OAAQ5D,IAAOC,UApFP,6sBA2JVD,IAAO6D,UA3JG,2GAyKdD,YAAO,OAAQ5D,IAAOC,UAzKR,oBA0KfD,IAAO6D,UA1KQ,kDA8KVD,YAAO,OAAQ5D,IAAOC,UA9KZ,qUAgNV6D,YAAQ,MAAO9D,IAAOG,WAhNZ,+EA2NfJ,YAAa,OAAQC,IAAOC,UA3Nb,mnBAiRfD,IAAO2D,KAjRQ,+xCA8Vf3D,IAAOC,SA9VQ,oHAqWJ6D,YAAQ,OAAQ9D,IAAO6D,WArWnB,+CA4WdE,YAAc,OAAQH,YAAO,OAAQ5D,IAAO6D,YA5W9B,u0EAiiBtBG,EAAY,IAAIC,IAAY,CAChCC,cAAeC,gBAEfC,WAAY,KACXC,SAEGC,EAAM,SAAAC,GAA4B,IAAzBC,EAAyBD,EAAzBC,IAAQnE,EAAiBoE,IAAAF,EAAA,SAEtC,OADAC,EAAIE,WAAarE,EACV2D,EAAUQ,IAgBJG,IATiC,SAAAC,GAAiB,IAAdxB,EAAcwB,EAAdxB,QACjD,OACEzD,OAAAkF,EAAA,EAAAlF,CAAC8D,EAAD,CAAiBnC,UAAU,qBAEzB3B,OAAAkF,EAAA,EAAAlF,CAAC2E,EAAD,CAAKhD,UAAU,eAAekD,IAAKpB,+FCljBnC0B,EAAuBnF,OAAAoF,EAAA,EAAApF,CAAA,WAAHE,OAAA,aAAGF,CAAH,+CAIdmE,YAAQ,OAAQ9D,IAAO6D,WAJT,2CAOVC,YAAQ,OAAQ9D,IAAO6D,WAPb,gDAYb7D,IAAOgF,QAZM,iOAoCpBC,EAAqBxC,YAAH,oCAGbzC,IAAOC,SAHM,+FA0BTiF,IAV6B,SAAA7E,GAC1C,OACEV,OAAAwF,EAAA,EAAAxF,CAACmF,EAAD,KACEnF,OAAAwF,EAAA,EAAAxF,CAAA,MAAI8C,IAAKwC,GAAT,gBAA2C5E,EAAMqB,OACjD/B,OAAAwF,EAAA,EAAAxF,CAAA,+DACAA,OAAAwF,EAAA,EAAAxF,CAACyF,EAAA,EAAD","file":"component---src-templates-postnodate-tsx-a3fcc96fd1321d60b760.js","sourcesContent":["import { graphql } from 'gatsby';\nimport Img from 'gatsby-image';\n// import * as _ from 'lodash';\nimport { setLightness } from 'polished';\nimport * as React from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/core';\nimport { Helmet } from 'react-helmet';\n\n// import AuthorCard from '../components/AuthorCard';\nimport Footer from '../components/Footer';\nimport SiteNav from '../components/header/SiteNav';\n// import PostCard from '../components/PostCard';\nimport PostContent from '../components/PostContent';\n// import PostFullFooter from '../components/PostFullFooter';\n// import PostFullFooterRight from '../components/PostFullFooterRight';\n// import ReadNextCard from '../components/ReadNextCard';\nimport Subscribe from '../components/subscribe/Subscribe';\nimport Wrapper from '../components/Wrapper';\nimport IndexLayout from '../layouts';\nimport { colors } from '../styles/colors';\nimport { inner, outer, SiteHeader, SiteMain } from '../styles/shared';\nimport config from '../website-config';\n\nconst PostTemplate = css`\n .site-main {\n background: #fff;\n padding-bottom: 4vw;\n }\n .gatsby-resp-image-figcaption {\n font-size: 65%;\n background: #fec;\n line-height: 120%;\n padding: 5px;\n font-family: sans-serif;\n }\n @media (min-width: 768px) {\n .gatsby-resp-image-figcaption {\n text-align: center;\n }\n }\n`;\n\nexport const PostFull = css`\n position: relative;\n z-index: 50;\n`;\n\nexport const NoImage = css`\n .post-full-content {\n padding-top: 0;\n }\n\n .post-full-content:before,\n .post-full-content:after {\n display: none;\n }\n`;\n\nexport const PostFullHeader = styled.header`\n margin: 0 auto;\n padding: 3vw 3vw 3vw;\n max-width: 1040px;\n text-align: center;\n\n @media (max-width: 500px) {\n padding: 14vw 3vw 10vw;\n }\n`;\n\n/* const PostFullMeta = styled.section`\n display: flex;\n justify-content: center;\n align-items: center;\n color: ${colors.midgrey};\n font-size: 1.4rem;\n font-weight: 600;\n text-transform: uppercase;\n\n @media (max-width: 500px) {\n font-size: 1.2rem;\n line-height: 1.3em;\n }\n`; */\n\n/* const PostFullMetaDate = styled.time`\n color: ${colors.blue};\n`; */\n\nexport const PostFullTitle = styled.h1`\n margin: 0;\n color: ${setLightness('0.05', colors.darkgrey)};\n @media (max-width: 500px) {\n font-size: 2.9rem;\n }\n`;\n\nconst PostFullImage = styled.figure`\n margin: 0 -10vw -165px;\n height: 400px;\n background: ${colors.lightgrey} center center;\n background-size: cover;\n border-radius: 5px;\n\n @media (max-width: 1170px) {\n margin: 0 -4vw -100px;\n height: 600px;\n border-radius: 0;\n }\n\n @media (max-width: 800px) {\n height: 400px;\n }\n @media (max-width: 500px) {\n margin-bottom: 4vw;\n height: 350px;\n }\n`;\n\n/* const DateDivider = styled.span`\n display: inline-block;\n margin: 0 6px 1px;\n`; */\n\n/* const ReadNextFeed = styled.div`\n display: flex;\n flex-wrap: wrap;\n margin: 0 -20px;\n padding: 40px 0 0 0;\n`; */\n\ninterface PageTemplateProps {\n pathContext: {\n slug: string;\n };\n data: {\n logo: {\n childImageSharp: {\n fixed: any;\n };\n };\n markdownRemark: {\n html: string;\n htmlAst: any;\n excerpt: string;\n timeToRead: string;\n frontmatter: {\n title: string;\n date: string;\n userDate: string;\n image: {\n childImageSharp: {\n fluid: any;\n };\n };\n tags: string[];\n author: {\n id: string;\n bio: string;\n avatar: {\n children: Array<{\n fixed: {\n src: string;\n };\n }>;\n };\n };\n };\n };\n relatedPosts: {\n totalCount: number;\n edges: Array<{\n node: {\n timeToRead: number;\n frontmatter: {\n title: string;\n };\n fields: {\n slug: string;\n };\n };\n }>;\n };\n };\n pageContext: {\n prev: PageContext;\n next: PageContext;\n };\n}\n\nexport interface PageContext {\n excerpt: string;\n timeToRead: number;\n fields: {\n slug: string;\n };\n frontmatter: {\n image: {\n childImageSharp: {\n fluid: any;\n };\n };\n title: string;\n date: string;\n draft?: boolean;\n tags: string[];\n author: {\n id: string;\n bio: string;\n avatar: {\n children: Array<{\n fixed: {\n src: string;\n };\n }>;\n };\n };\n };\n}\n\nconst PageTemplate: React.FC<PageTemplateProps> = props => {\n const post = props.data.markdownRemark;\n let width = '';\n let height = '';\n if (post.frontmatter.image && post.frontmatter.image.childImageSharp) {\n width = post.frontmatter.image.childImageSharp.fluid.sizes.split(', ')[1].split('px')[0];\n height = String(Number(width) / post.frontmatter.image.childImageSharp.fluid.aspectRatio);\n }\n\n return (\n <IndexLayout className=\"post-template\">\n <Helmet>\n <html lang={config.lang} />\n <title>{post.frontmatter.title}</title>\n\n <meta name=\"description\" content={post.excerpt} />\n <meta property=\"og:site_name\" content={config.title} />\n <meta property=\"og:type\" content=\"article\" />\n <meta property=\"og:title\" content={post.frontmatter.title} />\n <meta property=\"og:description\" content={post.excerpt} />\n <meta property=\"og:url\" content={config.siteUrl + props.pathContext.slug} />\n {(post.frontmatter.image && post.frontmatter.image.childImageSharp) && (\n <meta property=\"og:image\" content={`${config.siteUrl}${post.frontmatter.image.childImageSharp.fluid.src}`} />\n )}\n <meta property=\"article:published_time\" content={post.frontmatter.date} />\n {/* not sure if modified time possible */}\n {/* <meta property=\"article:modified_time\" content=\"2018-08-20T15:12:00.000Z\" /> */}\n {post.frontmatter.tags && (\n <meta property=\"article:tag\" content={post.frontmatter.tags[0]} />\n )}\n\n {config.facebook && <meta property=\"article:publisher\" content={config.facebook} />}\n {config.facebook && <meta property=\"article:author\" content={config.facebook} />}\n <meta name=\"twitter:card\" content=\"summary_large_image\" />\n <meta name=\"twitter:title\" content={post.frontmatter.title} />\n <meta name=\"twitter:description\" content={post.excerpt} />\n <meta name=\"twitter:url\" content={config.siteUrl + props.pathContext.slug} />\n {(post.frontmatter.image && post.frontmatter.image.childImageSharp) && (\n <meta name=\"twitter:image\" content={`${config.siteUrl}${post.frontmatter.image.childImageSharp.fluid.src}`} />\n )}\n <meta name=\"twitter:label1\" content=\"Written by\" />\n <meta name=\"twitter:data1\" content={post.frontmatter.author.id} />\n <meta name=\"twitter:label2\" content=\"Filed under\" />\n {post.frontmatter.tags && <meta name=\"twitter:data2\" content={post.frontmatter.tags[0]} />}\n {config.twitter && <meta name=\"twitter:site\" content={`@${config.twitter.split('https://twitter.com/')[1]}`} />}\n {config.twitter && <meta\n name=\"twitter:creator\"\n content={`@${config.twitter.split('https://twitter.com/')[1]}`}\n />}\n {width && <meta property=\"og:image:width\" content={width} />}\n {height && <meta property=\"og:image:height\" content={height} />}\n </Helmet>\n <Wrapper css={PostTemplate}>\n <header css={[outer, SiteHeader]}>\n <div css={inner}>\n <SiteNav />\n </div>\n </header>\n <main id=\"site-main\" className=\"site-main\" css={[SiteMain, outer]}>\n <div css={inner}>\n {/* TODO: no-image css tag? */}\n <article css={[PostFull, !post.frontmatter.image && NoImage]}>\n <PostFullHeader>\n <PostFullTitle>{post.frontmatter.title}</PostFullTitle>\n </PostFullHeader>\n\n {(post.frontmatter.image && post.frontmatter.image.childImageSharp) && (\n <PostFullImage>\n <Img\n style={{ height: '100%' }}\n fluid={post.frontmatter.image.childImageSharp.fluid}\n />\n </PostFullImage>\n )}\n <PostContent htmlAst={post.htmlAst} />\n\n {/* The big email subscribe modal content */}\n {config.showSubscribe && <Subscribe title={config.title} />}\n\n </article>\n </div>\n </main>\n\n <Footer />\n </Wrapper>\n </IndexLayout>\n );\n};\n\nexport default PageTemplate;\n\nexport const query = graphql`\n query($slug: String) {\n logo: file(relativePath: { eq: \"img/ghost-logo.png\" }) {\n childImageSharp {\n fixed {\n ...GatsbyImageSharpFixed\n }\n }\n }\n markdownRemark(fields: { slug: { eq: $slug } }) {\n html\n htmlAst\n excerpt\n timeToRead\n frontmatter {\n title\n userDate: date(formatString: \"D MMMM YYYY\")\n date\n tags\n image {\n childImageSharp {\n fluid(maxWidth: 3720) {\n ...GatsbyImageSharpFluid\n }\n }\n }\n author {\n id\n bio\n avatar {\n children {\n ... on ImageSharp {\n fixed(quality: 90) {\n ...GatsbyImageSharpFixed\n }\n }\n }\n }\n }\n }\n }\n }\n`;\n","import { lighten, setLightness, darken, setSaturation } from 'polished';\nimport * as React from 'react';\nimport styled from '@emotion/styled';\nimport RehypeReact from 'rehype-react';\n\nimport { colors } from '../styles/colors';\n\nexport const PostFullContent = styled.section`\n position: relative;\n margin: 0 auto;\n padding: 70px 50px 0;\n min-height: 230px;\n font-family: Georgia, serif;\n font-size: 2.0rem;\n line-height: 1.6em;\n background: #fff;\n\n @media (max-width: 1170px) {\n padding: 5vw 7vw 0;\n }\n @media (max-width: 800px) {\n font-size: 1.9rem;\n }\n\n :before {\n content: '';\n position: absolute;\n top: 15px;\n left: -5px;\n z-index: -1;\n display: block;\n width: 20px;\n height: 200px;\n background: rgba(39, 44, 49, 0.15);\n filter: blur(5px);\n transform: rotate(-5deg);\n }\n\n :after {\n content: '';\n position: absolute;\n top: 15px;\n right: -5px;\n z-index: -1;\n display: block;\n width: 20px;\n height: 200px;\n background: rgba(39, 44, 49, 0.15);\n filter: blur(5px);\n transform: rotate(5deg);\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n ul,\n ol,\n dl,\n pre,\n blockquote,\n .post-full-comments,\n .footnotes {\n min-width: 100%;\n }\n\n li {\n word-break: break-word;\n }\n\n li p {\n margin: 0;\n }\n\n a {\n color: #000;\n word-break: break-word;\n box-shadow: ${colors.blue} 0 -1px 0 inset;\n }\n\n a:hover {\n color: ${colors.blue};\n text-decoration: none;\n }\n\n strong,\n em {\n /* color: color(var(--darkgrey) l(-5%)); */\n color: ${darken('0.05', colors.darkgrey)};\n }\n\n small {\n display: inline-block;\n line-height: 1.6em;\n }\n\n li:first-child {\n margin-top: 0;\n }\n\n .gatsby-resp-image-link {\n box-shadow: none;\n }\n\n img,\n video {\n display: block;\n margin: 1.5em auto;\n max-width: 1040px;\n height: auto;\n }\n\n @media (max-width: 1040px) {\n img,\n video {\n width: 100%;\n }\n }\n\n img[src$='#full'] {\n max-width: none;\n width: 100vw;\n }\n\n img + br + small {\n display: block;\n margin-top: -3em;\n margin-bottom: 1.5em;\n text-align: center;\n }\n\n /* Override third party iframe styles */\n iframe {\n margin: 0 auto !important;\n }\n\n blockquote {\n margin: 0 0 1.5em;\n padding: 0 1.5em;\n border-left: #3eb0ef 3px solid;\n }\n\n blockquote p {\n margin: 0 0 1em 0;\n color: inherit;\n font-size: inherit;\n line-height: inherit;\n font-style: italic;\n }\n\n blockquote p:last-child {\n margin-bottom: 0;\n }\n\n code {\n padding: 0 5px 2px;\n font-size: 0.8em;\n line-height: 1em;\n font-weight: 400 !important;\n background: ${colors.whitegrey};\n border-radius: 3px;\n }\n\n p code {\n word-break: break-all;\n }\n\n pre {\n overflow-x: auto;\n /* margin: 1.5em 0 3em; */\n padding: 20px;\n max-width: 100%;\n /* border: color(var(--darkgrey) l(-10%)) 1px solid; */\n border: ${darken('0.01', colors.darkgrey)} 1px solid;\n color: ${colors.whitegrey};\n font-size: 1.4rem;\n line-height: 1.5em;\n /* background: color(var(--darkgrey) l(-3%)); */\n background: ${darken('0.03', colors.darkgrey)};\n border-radius: 5px;\n }\n\n pre code {\n padding: 0;\n font-size: inherit;\n line-height: inherit;\n background: transparent;\n }\n\n pre code :not(span) {\n color: inherit;\n }\n\n /* .fluid-width-video-wrapper { */\n .gatsby-resp-iframe-wrapper {\n margin: 1.5em 0 3em;\n }\n\n hr {\n margin: 4vw 0;\n }\n\n hr:after {\n content: '';\n position: absolute;\n top: -15px;\n left: 50%;\n display: block;\n margin-left: -10px;\n width: 1px;\n height: 30px;\n /* background: color(var(--lightgrey) l(+10%)); */\n background: ${lighten('0.1', colors.lightgrey)};\n box-shadow: #fff 0 0 0 5px;\n transform: rotate(45deg);\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${setLightness('0.05', colors.darkgrey)};\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,\n 'Open Sans', 'Helvetica Neue', sans-serif;\n }\n\n h1 {\n margin: 0.5em 0 0.2em 0;\n font-size: 4.6rem;\n font-weight: 700;\n }\n @media (max-width: 500px) {\n h1 {\n font-size: 2.8rem;\n }\n }\n\n h2 {\n margin: 0.5em 0 0.2em 0;\n font-size: 3.6rem;\n font-weight: 700;\n }\n @media (max-width: 500px) {\n h2 {\n font-size: 2.6rem;\n }\n }\n\n h3 {\n margin: 0.5em 0 0.2em 0;\n font-size: 2.8rem;\n font-weight: 700;\n }\n @media (max-width: 500px) {\n h3 {\n font-size: 2.2rem;\n }\n }\n\n h4 {\n margin: 0.5em 0 0.2em 0;\n font-size: 2.8rem;\n font-weight: 700;\n }\n @media (max-width: 500px) {\n h4 {\n font-size: 2.2rem;\n }\n }\n\n h5 {\n display: block;\n margin: 0.5em 0;\n padding: 1em 0 1.5em;\n border: 0;\n color: ${colors.blue};\n font-family: Georgia, serif;\n font-size: 3.2rem;\n line-height: 1.35em;\n text-align: center;\n }\n @media (min-width: 1180px) {\n h5 {\n max-width: 1060px;\n }\n }\n @media (max-width: 500px) {\n h5 {\n padding: 0 0 0.5em;\n font-size: 2.2rem;\n }\n }\n\n h6 {\n margin: 0.5em 0 0.2em 0;\n font-size: 2.3rem;\n font-weight: 700;\n }\n @media (max-width: 500px) {\n h6 {\n font-size: 2rem;\n }\n }\n\n /* Tables */\n table {\n display: inline-block;\n overflow-x: auto;\n margin: 0.5em 0 2.5em;\n max-width: 100%;\n width: auto;\n border-spacing: 0;\n border-collapse: collapse;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,\n 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 1.6rem;\n white-space: nowrap;\n vertical-align: top;\n }\n\n table {\n -webkit-overflow-scrolling: touch;\n background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0\n center,\n radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;\n background-attachment: scroll, scroll;\n background-size: 10px 100%, 10px 100%;\n background-repeat: no-repeat;\n }\n\n table td:first-child {\n background-image: linear-gradient(\n to right,\n rgba(255, 255, 255, 1) 50%,\n rgba(255, 255, 255, 0) 100%\n );\n background-size: 20px 100%;\n background-repeat: no-repeat;\n }\n\n table td:last-child {\n background-image: linear-gradient(\n to left,\n rgba(255, 255, 255, 1) 50%,\n rgba(255, 255, 255, 0) 100%\n );\n background-position: 100% 0;\n background-size: 20px 100%;\n background-repeat: no-repeat;\n }\n\n table th {\n color: ${colors.darkgrey};\n font-size: 1.2rem;\n font-weight: 700;\n letter-spacing: 0.2px;\n text-align: left;\n text-transform: uppercase;\n /* background-color: color(var(--whitegrey) l(+4%)); */\n background-color: ${lighten('0.04', colors.whitegrey)};\n }\n\n table th,\n table td {\n padding: 6px 12px;\n /* border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid; */\n border: ${setSaturation('0.05', darken('0.01', colors.whitegrey))} 1px solid;\n text-align: left !important;\n }\n\n @media (max-width: 500px) {\n padding: 0;\n :before {\n display: none;\n }\n :after {\n display: none;\n }\n }\n\n /* Start Syntax Highlighting */\n /* Taken from overreacted https://github.com/gaearon/overreacted.io/blob/942b41555f5e5ccbb5f93f6c26142cd90b314236/src/utils/global.css#L68 */\n code[class*='language-'],\n pre[class*='language-'] {\n background: none;\n font-family: Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace;\n font-feature-settings: normal;\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5;\n margin-bottom: 0;\n\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n }\n\n /* Code blocks */\n pre[class*='language-'] {\n overflow: auto;\n padding: 1.3125rem;\n }\n\n pre[class*='language-']::-moz-selection {\n /* Firefox */\n background: hsl(207, 4%, 16%);\n }\n\n pre[class*='language-']::selection {\n /* Safari */\n background: hsl(207, 4%, 16%);\n }\n\n /* Text Selection colour */\n pre[class*='language-']::-moz-selection,\n pre[class*='language-'] ::-moz-selection {\n text-shadow: none;\n background: hsla(0, 0%, 100%, 0.15);\n }\n\n pre[class*='language-']::selection,\n pre[class*='language-'] ::selection {\n text-shadow: none;\n background: hsla(0, 0%, 100%, 0.15);\n }\n\n /* Inline code */\n :not(pre) > code[class*='language-'] {\n border-radius: 0.3em;\n background: var(--inlineCode-bg);\n color: var(--inlineCode-text);\n padding: 0.15em 0.2em 0.05em;\n white-space: normal;\n }\n\n .token.attr-name {\n color: rgb(173, 219, 103);\n font-style: italic;\n }\n\n .token.comment {\n color: rgb(128, 147, 147);\n }\n\n .token.string,\n .token.url {\n color: rgb(173, 219, 103);\n }\n\n .token.variable {\n color: rgb(214, 222, 235);\n }\n\n .token.number {\n color: rgb(247, 140, 108);\n }\n\n .token.builtin,\n .token.char,\n .token.constant,\n .token.function {\n color: rgb(130, 170, 255);\n }\n\n .token.punctuation {\n color: rgb(199, 146, 234);\n }\n\n .token.selector,\n .token.doctype {\n color: rgb(199, 146, 234);\n font-style: 'italic';\n }\n\n .token.class-name {\n color: rgb(255, 203, 139);\n }\n\n .token.tag,\n .token.operator,\n .token.keyword {\n color: #ffa7c4;\n }\n\n .token.boolean {\n color: rgb(255, 88, 116);\n }\n\n .token.property {\n color: rgb(128, 203, 196);\n }\n\n .token.namespace {\n color: rgb(178, 204, 214);\n }\n\n pre[data-line] {\n padding: 1em 0 1em 3em;\n position: relative;\n }\n\n .gatsby-highlight-code-line {\n background-color: hsla(207, 95%, 15%, 1);\n display: block;\n margin-right: -1.3125rem;\n margin-left: -1.3125rem;\n padding-right: 1em;\n padding-left: 1.25em;\n border-left: 0.25em solid #ffa7c4;\n }\n\n .gatsby-highlight {\n margin-bottom: 1.75rem;\n margin-left: -1.3125rem;\n margin-right: -1.3125rem;\n border-radius: 10px;\n background: #011627;\n -webkit-overflow-scrolling: touch;\n overflow: auto;\n }\n\n @media (max-width: 672px) {\n .gatsby-highlight {\n border-radius: 0;\n }\n }\n\n .gatsby-highlight pre[class*='language-'] {\n float: left;\n min-width: 100%;\n }\n /* End Syntax Highlighting */\n\n p small {\n display: block !important;\n text-align: center;\n }\n`;\n\nconst renderAst = new RehypeReact({\n createElement: React.createElement,\n // components: { 'interactive-counter': Counter },\n components: {},\n}).Compiler;\n\nconst Ast = ({ ast, ...props }: any) => {\n ast.properties = props;\n return renderAst(ast);\n};\n\nexport interface PostContentProps {\n htmlAst: any;\n}\n\nconst PostContent: React.FC<PostContentProps> = ({ htmlAst }) => {\n return (\n <PostFullContent className=\"post-full-content\">\n {/* TODO: this will apply the class when rehype-react is published https://github.com/rhysd/rehype-react/pull/11 */}\n <Ast className=\"post-content\" ast={htmlAst} />\n </PostFullContent>\n );\n};\n\nexport default PostContent;\n","import { lighten } from 'polished';\nimport * as React from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/core';\n\nimport { colors } from '../../styles/colors';\nimport SubscribeForm from './SubscribeForm';\n\n\nconst SubscribeFormSection = styled.section`\n margin: 1.5em 0;\n padding: 6.5vw 7vw 7vw;\n /* border: color(var(--whitegrey) l(+2%)) 1px solid; */\n border: ${lighten('0.02', colors.whitegrey)} 1px solid;\n text-align: center;\n /* background: color(var(--whitegrey) l(+4%)); */\n background: ${lighten('0.04', colors.whitegrey)};\n border-radius: 7px;\n\n p {\n margin-bottom: 1em;\n color: ${colors.midgrey};\n font-size: 2.2rem;\n line-height: 1.55em;\n letter-spacing: 0.2px;\n }\n\n form {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0 auto;\n max-width: 420px;\n }\n\n .form-group {\n flex-grow: 1;\n }\n @media (max-width: 650px) {\n p {\n font-size: 1.6rem;\n }\n }\n`;\n\nconst SubscribeFormTitle = css`\n margin: 0 0 3px 0;\n padding: 0;\n color: ${colors.darkgrey};\n font-size: 3.5rem;\n line-height: 1;\n font-weight: 700;\n @media (max-width: 650px) {\n font-size: 2.4rem;\n }\n`;\n\nexport interface SubscribeProps {\n title: string;\n}\n\nconst Subscribe: React.FC<SubscribeProps> = props => {\n return (\n <SubscribeFormSection>\n <h3 css={SubscribeFormTitle}>Subscribe to {props.title}</h3>\n <p>Get the latest posts delivered right to your inbox</p>\n <SubscribeForm />\n </SubscribeFormSection>\n );\n};\n\nexport default Subscribe;\n"],"sourceRoot":""}