{"version":3,"sources":["webpack://gatsby-starter-blog/./src/components/seo.js","webpack://gatsby-starter-blog/./src/pages/labs.js"],"names":["SEO","description","lang","meta","title","site","useStaticQuery","metaDescription","siteMetadata","defaultTitle","htmlAttributes","titleTemplate","name","content","property","social","twitter","concat","defaultProps","style","labs","projects","data","allProject","nodes","css","className","map","liveLink","codeLink","cover","key","href","target","rel","G","image","childImageSharp","gatsbyImageData","alt"],"mappings":"yKAYMA,EAAM,SAAC,GAAwC,IAAD,MAArCC,EAAqC,EAArCA,YAAaC,EAAwB,EAAxBA,KAAMC,EAAkB,EAAlBA,KAAMC,EAAY,EAAZA,MAC9BC,GAASC,oBAAe,cAAxBD,KAaFE,EAAkBN,GAAeI,EAAKG,aAAaP,YACnDQ,EAAY,UAAGJ,EAAKG,oBAAR,aAAG,EAAmBJ,MAExC,OACE,QAAC,IAAD,CACEM,eAAgB,CACdR,QAEFE,MAAOA,EACPO,cAAeF,EAAY,QAAWA,EAAiB,KACvDN,KAAM,CACJ,CACES,KAAK,cACLC,QAASN,GAEX,CACEO,SAAS,WACTD,QAAST,GAEX,CACEU,SAAS,iBACTD,QAASN,GAEX,CACEO,SAAS,UACTD,QAAQ,WAEV,CACED,KAAK,eACLC,QAAQ,WAEV,CACED,KAAK,kBACLC,SAAS,UAAAR,EAAKG,oBAAL,mBAAmBO,cAAnB,eAA2BC,UAA3B,IAEX,CACEJ,KAAK,gBACLC,QAAST,GAEX,CACEQ,KAAK,sBACLC,QAASN,IAEXU,OAAOd,MAKfH,EAAIkB,aAAe,CACjBhB,KAAK,KACLC,KAAM,GACNF,YAAY,IAUd,O,2HCjFA,IAAMkB,EAAK,mpBA6DI,SAASC,EAAT,GAIX,IAFqBC,EAEtB,EAHDC,KACEC,WAAcC,MAGhB,OACE,yBACE,QAAC,IAAD,CACEpB,MAAM,OACNH,YAAY,2EAEd,mBAASwB,IAAKN,IACZ,cAAIO,UAAU,QACXL,EAASM,KACR,gBAAGD,EAAH,EAAGA,UAAWE,EAAd,EAAcA,SAAU3B,EAAxB,EAAwBA,YAAa4B,EAArC,EAAqCA,SAAUC,EAA/C,EAA+CA,MAA/C,OACE,cAAIJ,UAAS,cAAgBA,EAAaK,IAAKL,IAC7C,aACEA,UAAU,aACVM,KAAMJ,EACNK,OAAO,SACPC,IAAI,eAEJ,cAAIR,UAAU,kBAAkBzB,IAChC,QAAC,EAAAkC,EAAD,CACET,UAAU,YACVU,MAAON,EAAMO,gBAAgBC,gBAC7BC,IAAKb,MAGT,aAAGA,UAAU,wBACX,aACEA,UAAU,aACVM,KAAMH,EACNI,OAAO,SACPC,IAAI,cAJN","file":"component---src-pages-labs-js-8dae0bdd58dfc919050b.js","sourcesContent":["// /**\n//  * SEO component that queries for data with\n//  *  Gatsby's useStaticQuery React hook\n//  *\n//  * See: https://www.gatsbyjs.com/docs/use-static-query/\n//  */\n\nimport * as React from \"react\"\nimport PropTypes from \"prop-types\"\nimport { Helmet } from \"react-helmet\"\nimport { useStaticQuery, graphql } from \"gatsby\"\n\nconst SEO = ({ description, lang, meta, title }) => {\n  const { site } = useStaticQuery(\n    graphql`\n      query {\n        site {\n          siteMetadata {\n            title\n            description\n          }\n        }\n      }\n    `\n  )\n\n  const metaDescription = description || site.siteMetadata.description\n  const defaultTitle = site.siteMetadata?.title\n\n  return (\n    <Helmet\n      htmlAttributes={{\n        lang,\n      }}\n      title={title}\n      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}\n      meta={[\n        {\n          name: `description`,\n          content: metaDescription,\n        },\n        {\n          property: `og:title`,\n          content: title,\n        },\n        {\n          property: `og:description`,\n          content: metaDescription,\n        },\n        {\n          property: `og:type`,\n          content: `website`,\n        },\n        {\n          name: `twitter:card`,\n          content: `summary`,\n        },\n        {\n          name: `twitter:creator`,\n          content: site.siteMetadata?.social?.twitter || ``,\n        },\n        {\n          name: `twitter:title`,\n          content: title,\n        },\n        {\n          name: `twitter:description`,\n          content: metaDescription,\n        },\n      ].concat(meta)}\n    />\n  )\n}\n\nSEO.defaultProps = {\n  lang: `en`,\n  meta: [],\n  description: ``,\n}\n\nSEO.propTypes = {\n  description: PropTypes.string,\n  lang: PropTypes.string,\n  meta: PropTypes.arrayOf(PropTypes.object),\n  title: PropTypes.string.isRequired,\n}\n\nexport default SEO\n","import * as React from \"react\"\nimport { graphql } from \"gatsby\"\nimport { css } from \"@emotion/react\"\nimport { GatsbyImage } from \"gatsby-plugin-image\"\nimport SEO from \"../components/seo\"\n\nconst style = css`\n  padding: 4rem 5vw 3rem;\n  .demo {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 3rem;\n\n    &__item {\n      list-style: none;\n      max-width: 100%;\n      align-self: flex-start;\n    }\n    &__link {\n      text-decoration: none;\n      color: currentColor;\n      display: flex;\n      flex-direction: column;\n      row-gap: 1rem;\n    }\n    &__img {\n      order: 1;\n    }\n    &__describe {\n      order: 2;\n    }\n    &__describe--sub {\n      display: flex;\n      &::before {\n        content: \"[\";\n      }\n      &::after {\n        content: \"]\";\n      }\n      max-width: initial;\n\n      color: var(--color-grey-c);\n    }\n\n    .email {\n      grid-row: span 3;\n      order: -1;\n    }\n    .blog {\n    }\n    .dictionary {\n      @media (min-width: 60.25em) {\n        grid-row: 1 / 3;\n        grid-column: span 2;\n        order: 3;\n      }\n    }\n    .bookshelf {\n      @media (min-width: 60.25em) {\n        grid-row: 3 / 4;\n        grid-column: 2 / span 2;\n        order: 3;\n      }\n    }\n  }\n`\n\nexport default function labs({\n  data: {\n    allProject: { nodes: projects },\n  },\n}) {\n  return (\n    <>\n      <SEO\n        title=\"Labs\"\n        description=\"experiments demonstrating Grid design, and probability in on the web.\"\n      />\n      <section css={style}>\n        <ul className=\"demo\">\n          {projects.map(\n            ({ className, liveLink, description, codeLink, cover }) => (\n              <li className={`demo__item ${className}`} key={className}>\n                <a\n                  className=\"demo__link\"\n                  href={liveLink}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  <h4 className=\"demo__describe\">{description}</h4>\n                  <GatsbyImage\n                    className=\"demo__img\"\n                    image={cover.childImageSharp.gatsbyImageData}\n                    alt={className}\n                  />\n                </a>\n                <p className=\"demo__describe--sub\">\n                  <a\n                    className=\"demo__link\"\n                    href={codeLink}\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                  >\n                    On Github\n                  </a>\n                </p>\n              </li>\n            )\n          )}\n        </ul>\n      </section>\n    </>\n  )\n}\n\nexport const pageQuery = graphql`\n  query {\n    allProject {\n      nodes {\n        cover {\n          childImageSharp {\n            gatsbyImageData\n          }\n        }\n        liveLink\n        codeLink\n        className\n        description\n      }\n    }\n  }\n`\n"],"sourceRoot":""}