{"version":3,"sources":["webpack://stylesheets-dev-website/./src/components/ThemeCard.jsx","webpack://stylesheets-dev-website/./src/pages/themes/ghost/index.jsx"],"names":["image","title","subtitle","price","link","alt","free","height","newRelease","Wrapper","to","Content","Title","Subtitle","Meta","Price","Free","New","styled","Link","props","theme","color","text","base","lightest","primary","inverted","p","green","data","currentPage","padding","ampersand","sapphire","chronicles","sublime","shuttle","flamingo","paperback"],"mappings":"kLAiCA,IA3BkB,SAAC,GAAD,IAChBA,EADgB,EAChBA,MACAC,EAFgB,EAEhBA,MACAC,EAHgB,EAGhBA,SACAC,EAJgB,EAIhBA,MACAC,EALgB,EAKhBA,KACAC,EANgB,EAMhBA,IACAC,EAPgB,EAOhBA,KACAC,EARgB,EAQhBA,OACAC,EATgB,EAShBA,WATgB,OAWhB,gBAACC,EAAD,CAASC,GAAIN,GACX,gBAAC,IAAD,CAAeJ,MAAOA,EAAOK,IAAKA,EAAKE,OAAQA,IAC/C,gBAACI,EAAD,KACE,2BACGV,GAAS,gBAACW,EAAD,KAAQX,GACjBC,GAAY,gBAACW,EAAD,KAAWX,IAE1B,gBAACY,EAAD,KACGX,GAAS,gBAACY,EAAD,KAAQZ,GACjBG,GAAQ,gBAACU,EAAD,aACRR,GAAc,gBAACS,EAAD,gBAQvB,IAAMR,GAAUS,QAAOC,QAAV,yEAAGD,CAAH,yDACF,SAAAE,GAAK,OAAIA,EAAMC,MAAMC,MAAMC,KAAKC,QASrCb,EAAUO,oBAAH,8DAAGA,CAAH,wFAOPN,EAAQM,mBAAH,4DAAGA,CAAH,gCAKLL,EAAWK,kBAAH,+DAAGA,CAAH,0CAGH,SAAAE,GAAK,OAAIA,EAAMC,MAAMC,MAAMC,KAAKE,YAGrCX,EAAOI,oBAAH,2DAAGA,CAAH,8CAMJH,EAAQG,kBAAH,4DAAGA,CAAH,mDAMLF,EAAOE,kBAAH,2DAAGA,CAAH,gJAGY,SAAAE,GAAK,OAAIA,EAAMC,MAAMC,MAAMI,QAAQF,QAC9C,SAAAJ,GAAK,OAAIA,EAAMC,MAAMC,MAAMK,YAOhCV,EAAMC,kBAAH,0DAAGA,CAAH,qWAGa,SAAAU,GAAC,OAAIA,EAAEP,MAAMC,MAAMO,SAC9B,SAAAD,GAAC,OAAIA,EAAEP,MAAMC,MAAMK,a,yGCyB9B,UAzGwB,SAAC,GAAD,IAAEG,EAAF,EAAEA,KAAF,OACtB,gBAAC,IAAD,KACE,gBAAC,IAAD,CAAUA,KAAMA,EAAKC,cAErB,gBAAC,IAAD,CAAY9B,MAAM,iBAClB,gBAAC,KAAD,CAAS+B,QAAQ,QACf,gBAAC,KAAD,KACE,gBAAC,KAAD,KACE,gBAAC,IAAD,CACEhC,MAAO8B,EAAKG,UACZhC,MAAM,YACNC,SAAS,QACTE,KAAK,2BACLC,IAAI,wBACJF,MAAM,OACNI,OAAO,QACPC,YAAU,IAEZ,gBAAC,IAAD,CACER,MAAO8B,EAAKI,SACZjC,MAAM,WACNC,SAAS,QACTE,KAAK,0BACLC,IAAI,uBACJF,MAAM,OACNI,OAAO,UAET,gBAAC,IAAD,CACEP,MAAO8B,EAAKK,WACZlC,MAAM,aACNC,SAAS,QACTE,KAAK,4BACLC,IAAI,yBACJF,MAAM,OACNI,OAAO,UAET,gBAAC,IAAD,CACEP,MAAO8B,EAAKM,QACZnC,MAAM,UACNC,SAAS,QACTE,KAAK,yBACLC,IAAI,sBACJF,MAAM,OACNI,OAAO,UAWT,gBAAC,IAAD,CACEP,MAAO8B,EAAKO,QACZpC,MAAM,UACNC,SAAS,QACTE,KAAK,yBACLC,IAAI,sBACJF,MAAM,OACNI,OAAO,UAET,gBAAC,IAAD,CACEP,MAAO8B,EAAKQ,SACZrC,MAAM,WACNC,SAAS,QACTE,KAAK,0BACLC,IAAI,uBACJF,MAAM,OACNI,OAAO,UAET,gBAAC,IAAD,CACEP,MAAO8B,EAAKS,UACZtC,MAAM,YACNC,SAAS,QACTE,KAAK,2BACLC,IAAI,wBACJF,MAAM","file":"component---src-pages-themes-ghost-index-jsx-dc53b295c870b360ad5b.js","sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport {Link} from 'gatsby'\n\nimport BrowserWindow from './BrowserWindow'\n\nconst ThemeCard = ({\n  image,\n  title,\n  subtitle,\n  price,\n  link,\n  alt,\n  free,\n  height,\n  newRelease,\n}) => (\n  <Wrapper to={link}>\n    <BrowserWindow image={image} alt={alt} height={height} />\n    <Content>\n      <div>\n        {title && <Title>{title}</Title>}\n        {subtitle && <Subtitle>{subtitle}</Subtitle>}\n      </div>\n      <Meta>\n        {price && <Price>{price}</Price>}\n        {free && <Free>Free</Free>}\n        {newRelease && <New>New</New>}\n      </Meta>\n    </Content>\n  </Wrapper>\n)\n\nexport default ThemeCard\n\nconst Wrapper = styled(Link)`\n  color: ${props => props.theme.color.text.base};\n\n  &:hover {\n    .theme-card__overlay {\n      opacity: 1;\n    }\n  }\n`\n\nconst Content = styled.div`\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  margin: 10px 0 0;\n`\n\nconst Title = styled.h3`\n  font-size: 1.8rem;\n  margin: 0;\n`\n\nconst Subtitle = styled.p`\n  font-size: 1.6rem;\n  margin: 0;\n  color: ${props => props.theme.color.text.lightest};\n`\n\nconst Meta = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 8px;\n`\n\nconst Price = styled.p`\n  font-size: 1.8rem;\n  margin: 0;\n  white-space: nowrap;\n`\n\nconst Free = styled.p`\n  font-size: 1.3rem;\n  margin: 0;\n  background-color: ${props => props.theme.color.primary.base};\n  color: ${props => props.theme.color.inverted};\n  letter-spacing: 0.05em;\n  padding: 5px 8px;\n  text-transform: uppercase;\n  border-radius: 6px;\n`\n\nconst New = styled.p`\n  font-size: 1.3rem;\n  margin: 0;\n  background-color: ${p => p.theme.color.green};\n  color: ${p => p.theme.color.inverted};\n  letter-spacing: 0.05em;\n  padding: 5px 8px 5px 10px;\n  text-transform: uppercase;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n\n  &:before {\n    content: '';\n    width: 3px;\n    height: 3px;\n    background-color: #fff;\n    display: block;\n    border-radius: 100%;\n    border: 3px solid rgba(255, 255, 255, 0.5);\n    box-shadow: 0 0 6px 1px #fff;\n  }\n`\n","import React from 'react'\nimport {graphql} from 'gatsby'\n\nimport Layout from '../../../components/Layout'\n// import ThemesNav from '../../../components/ThemesNav'\nimport PageHeader from '../../../components/PageHeader'\nimport ThemeCard from '../../../components/ThemeCard'\nimport MetaData from '../../../components/MetaData'\nimport {BoxedContainer, Section, ThemeCardsGrid} from '../../../elements'\n\nconst GhostThemesPage = ({data}) => (\n  <Layout>\n    <MetaData data={data.currentPage} />\n    {/* <ThemesNav /> */}\n    <PageHeader title=\"Ghost Themes\" />\n    <Section padding=\"both\">\n      <BoxedContainer>\n        <ThemeCardsGrid>\n          <ThemeCard\n            image={data.ampersand}\n            title=\"Ampersand\"\n            subtitle=\"Ghost\"\n            link=\"/themes/ghost/ampersand/\"\n            alt=\"Ampersand Ghost theme\"\n            price=\"$ 99\"\n            height=\"340px\"\n            newRelease\n          />\n          <ThemeCard\n            image={data.sapphire}\n            title=\"Sapphire\"\n            subtitle=\"Ghost\"\n            link=\"/themes/ghost/sapphire/\"\n            alt=\"Sapphire Ghost theme\"\n            price=\"$ 79\"\n            height=\"340px\"\n          />\n          <ThemeCard\n            image={data.chronicles}\n            title=\"Chronicles\"\n            subtitle=\"Ghost\"\n            link=\"/themes/ghost/chronicles/\"\n            alt=\"Chronicles ghost theme\"\n            price=\"$ 30\"\n            height=\"340px\"\n          />\n          <ThemeCard\n            image={data.sublime}\n            title=\"Sublime\"\n            subtitle=\"Ghost\"\n            link=\"/themes/ghost/sublime/\"\n            alt=\"Sublime ghost theme\"\n            price=\"$ 30\"\n            height=\"340px\"\n          />\n          {/* <ThemeCard\n            image={data.elementary}\n            title=\"Elementary\"\n            subtitle=\"Ghost\"\n            link=\"/themes/ghost/elementary/\"\n            alt=\"Elementary ghost theme\"\n            price=\"$ 30\"\n            height=\"340px\"\n          /> */}\n          <ThemeCard\n            image={data.shuttle}\n            title=\"Shuttle\"\n            subtitle=\"Ghost\"\n            link=\"/themes/ghost/shuttle/\"\n            alt=\"Shuttle ghost theme\"\n            price=\"$ 30\"\n            height=\"340px\"\n          />\n          <ThemeCard\n            image={data.flamingo}\n            title=\"Flamingo\"\n            subtitle=\"Ghost\"\n            link=\"/themes/ghost/flamingo/\"\n            alt=\"Flamingo ghost theme\"\n            price=\"$ 30\"\n            height=\"340px\"\n          />\n          <ThemeCard\n            image={data.paperback}\n            title=\"Paperback\"\n            subtitle=\"Ghost\"\n            link=\"/themes/ghost/paperback/\"\n            alt=\"Paperback ghost theme\"\n            price=\"$ 30\"\n            //height=\"290px\"\n          />\n          {/* <ThemeCard\n            image={data.pamphlet}\n            title=\"Pamphlet\"\n            subtitle=\"Ghost\"\n            link=\"/themes/ghost/pamphlet/\"\n            alt=\"Pamphlet ghost theme\"\n            price=\"$ 30\"\n            height=\"340px\"\n          /> */}\n          {/* <ThemeCard\n            image={data.lotus}\n            title=\"Lotus\"\n            subtitle=\"Ghost\"\n            link=\"/themes/ghost/lotus/\"\n            alt=\"Lotus ghost theme\"\n            free\n            height=\"340px\"\n          /> */}\n        </ThemeCardsGrid>\n      </BoxedContainer>\n    </Section>\n  </Layout>\n)\n\nexport default GhostThemesPage\n\nexport const query = graphql`\n  query {\n    currentPage: ghostPage(slug: {eq: \"ghost-themes\"}) {\n      ...GhostMetaPageFields\n    }\n    ampersand: file(relativePath: {eq: \"themes/ampersand.png\"}) {\n      childImageSharp {\n        gatsbyImageData(width: 700)\n      }\n    }\n    sapphire: file(relativePath: {eq: \"themes/sapphire.png\"}) {\n      childImageSharp {\n        gatsbyImageData(width: 700)\n      }\n    }\n    chronicles: file(relativePath: {eq: \"themes/chronicles.png\"}) {\n      childImageSharp {\n        gatsbyImageData(width: 700)\n      }\n    }\n    sublime: file(relativePath: {eq: \"themes/sublime.png\"}) {\n      childImageSharp {\n        gatsbyImageData(width: 700)\n      }\n    }\n    flamingo: file(relativePath: {eq: \"themes/flamingo.png\"}) {\n      childImageSharp {\n        gatsbyImageData(width: 700)\n      }\n    }\n    shuttle: file(relativePath: {eq: \"themes/shuttle.png\"}) {\n      childImageSharp {\n        gatsbyImageData(width: 700)\n      }\n    }\n    elementary: file(relativePath: {eq: \"themes/elementary.png\"}) {\n      childImageSharp {\n        gatsbyImageData(width: 700)\n      }\n    }\n    paperback: file(relativePath: {eq: \"themes/paperback.png\"}) {\n      childImageSharp {\n        gatsbyImageData(width: 700)\n      }\n    }\n    lotus: file(relativePath: {eq: \"themes/lotus.png\"}) {\n      childImageSharp {\n        gatsbyImageData(width: 700)\n      }\n    }\n    pamphlet: file(relativePath: {eq: \"themes/pamphlet.png\"}) {\n      childImageSharp {\n        gatsbyImageData(width: 700)\n      }\n    }\n  }\n`\n"],"sourceRoot":""}