{"version":3,"sources":["webpack://gatsby-starter-blog/./node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.browser.esm.js","webpack://gatsby-starter-blog/./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js","webpack://gatsby-starter-blog/./src/components/seo.js","webpack://gatsby-starter-blog/./src/pages/index.js"],"names":["reactPropsRegex","prop","test","charCodeAt","testOmitPropsOnStringTag","testOmitPropsOnComponent","key","getDefaultShouldForwardProp","tag","composeShouldForwardProps","options","isReal","shouldForwardProp","optionsShouldForwardProp","__emotion_forwardProp","propName","createStyled","identifierName","targetClassName","__emotion_real","baseTag","__emotion_base","undefined","label","target","defaultShouldForwardProp","shouldUseAs","args","arguments","styles","__emotion_styles","slice","push","raw","apply","len","length","i","Styled","w","props","cache","ref","finalTag","as","className","classInterpolations","mergedProps","theme","useContext","T","registered","serialized","concat","name","finalShouldForwardProp","newProps","_key","createElement","displayName","defaultProps","Object","defineProperty","value","withComponent","nextTag","nextOptions","SEO","description","lang","meta","title","site","useStaticQuery","metaDescription","siteMetadata","defaultTitle","htmlAttributes","titleTemplate","content","property","social","twitter","Container","UsersList","aria-hidden","role","aria-label","Link","to","S","src","alt","quality","layout"],"mappings":"i4BACIA,EAAkB,s7HAWtB,GATiC,QAAQ,SAAUC,GACjD,OAAOD,EAAgBE,KAAKD,IAAgC,MAAvBA,EAAKE,WAAW,IAE3B,MAAvBF,EAAKE,WAAW,IAEhBF,EAAKE,WAAW,GAAK,M,8BCFtBC,EAA2B,EAE3BC,EAA2B,SAAkCC,GAC/D,MAAe,UAARA,GAGLC,EAA8B,SAAqCC,GACrE,MAAsB,iBAARA,GAGdA,EAAIL,WAAW,GAAK,GAAKC,EAA2BC,GAGlDI,EAA4B,SAAmCD,EAAKE,EAASC,GAC/E,IAAIC,EAEJ,GAAIF,EAAS,CACX,IAAIG,EAA2BH,EAAQE,kBACvCA,EAAoBJ,EAAIM,uBAAyBD,EAA2B,SAAUE,GACpF,OAAOP,EAAIM,sBAAsBC,IAAaF,EAAyBE,IACrEF,EAON,MAJiC,mBAAtBD,GAAoCD,IAC7CC,EAAoBJ,EAAIM,uBAGnBF,GAgIT,EA3HmB,SAASI,EAAaR,EAAKE,GAO5C,IAEIO,EACAC,EAHAP,EAASH,EAAIW,iBAAmBX,EAChCY,EAAUT,GAAUH,EAAIa,gBAAkBb,OAI9Bc,IAAZZ,IACFO,EAAiBP,EAAQa,MACzBL,EAAkBR,EAAQc,QAG5B,IAAIZ,EAAoBH,EAA0BD,EAAKE,EAASC,GAC5Dc,EAA2Bb,GAAqBL,EAA4Ba,GAC5EM,GAAeD,EAAyB,MAC5C,OAAO,WACL,IAAIE,EAAOC,UACPC,EAASlB,QAAmCW,IAAzBd,EAAIsB,iBAAiCtB,EAAIsB,iBAAiBC,MAAM,GAAK,GAM5F,QAJuBT,IAAnBL,GACFY,EAAOG,KAAK,SAAWf,EAAiB,KAG3B,MAAXU,EAAK,SAA8BL,IAAhBK,EAAK,GAAGM,IAC7BJ,EAAOG,KAAKE,MAAML,EAAQF,OACrB,CACD,EAIJE,EAAOG,KAAKL,EAAK,GAAG,IAIpB,IAHA,IAAIQ,EAAMR,EAAKS,OACXC,EAAI,EAEDA,EAAIF,EAAKE,IAKdR,EAAOG,KAAKL,EAAKU,GAAIV,EAAK,GAAGU,IAKjC,IAAIC,GAAS,IAAAC,IAAiB,SAAUC,EAAOC,EAAOC,GACpD,IAAIC,EAAWjB,GAAec,EAAMI,IAAMxB,EACtCyB,EAAY,GACZC,EAAsB,GACtBC,EAAcP,EAElB,GAAmB,MAAfA,EAAMQ,MAAe,CAGvB,IAAK,IAAI1C,KAFTyC,EAAc,GAEEP,EACdO,EAAYzC,GAAOkC,EAAMlC,GAG3ByC,EAAYC,OAAQ,IAAAC,YAAW,EAAAC,GAGF,iBAApBV,EAAMK,UACfA,GAAY,OAAoBJ,EAAMU,WAAYL,EAAqBN,EAAMK,WACjD,MAAnBL,EAAMK,YACfA,EAAYL,EAAMK,UAAY,KAGhC,IAAIO,GAAa,OAAgBvB,EAAOwB,OAAOP,GAAsBL,EAAMU,WAAYJ,IAC3E,OAAaN,EAAOW,EAAgC,iBAAbT,GACnDE,GAAaJ,EAAMnC,IAAM,IAAM8C,EAAWE,UAElBhC,IAApBJ,IACF2B,GAAa,IAAM3B,GAGrB,IAAIqC,EAAyB7B,QAAqCJ,IAAtBV,EAAkCL,EAA4BoC,GAAYlB,EAClH+B,EAAW,GAEf,IAAK,IAAIC,KAAQjB,EACXd,GAAwB,OAAT+B,GAGnBF,EAAuBE,KACrBD,EAASC,GAAQjB,EAAMiB,IAO3B,OAHAD,EAASX,UAAYA,EACrBW,EAASd,IAAMA,GACQ,IAAAgB,eAAcf,EAAUa,MA0BjD,OAvBAlB,EAAOqB,iBAAiCrC,IAAnBL,EAA+BA,EAAiB,WAAgC,iBAAZG,EAAuBA,EAAUA,EAAQuC,aAAevC,EAAQkC,MAAQ,aAAe,IAChLhB,EAAOsB,aAAepD,EAAIoD,aAC1BtB,EAAOnB,eAAiBmB,EACxBA,EAAOjB,eAAiBD,EACxBkB,EAAOR,iBAAmBD,EAC1BS,EAAOxB,sBAAwBF,EAC/BiD,OAAOC,eAAexB,EAAQ,WAAY,CACxCyB,MAAO,WAML,MAAO,IAAM7C,KAIjBoB,EAAO0B,cAAgB,SAAUC,EAASC,GACxC,OAAOlD,EAAaiD,GAAS,OAAS,GAAIvD,EAASwD,EAAa,CAC9DtD,kBAAmBH,EAA0B6B,EAAQ4B,GAAa,MAChEhC,WAAM,EAAQL,IAGbS,K,4ECjJL6B,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,CACEhB,KAAK,cACLyB,QAASL,GAEX,CACEM,SAAS,WACTD,QAASR,GAEX,CACES,SAAS,iBACTD,QAASL,GAEX,CACEM,SAAS,UACTD,QAAQ,WAEV,CACEzB,KAAK,eACLyB,QAAQ,WAEV,CACEzB,KAAK,kBACLyB,SAAS,UAAAP,EAAKG,oBAAL,mBAAmBM,cAAnB,eAA2BC,UAA3B,IAEX,CACE5B,KAAK,gBACLyB,QAASR,GAEX,CACEjB,KAAK,sBACLyB,QAASL,IAEXrB,OAAOiB,MAKfH,EAAIP,aAAe,CACjBS,KAAK,KACLC,KAAM,GACNF,YAAY,IAUd,O,+IChFA,IAAMe,GAAS,g7HAiOA,SAASC,IACtB,OACE,yBACE,QAAC,IAAD,CAAKb,MAAM,UACX,QAACY,EAAD,MACE,cAAItC,UAAU,WAAd,aACA,mBAASA,UAAU,UAAnB,mCACA,mBAASA,UAAU,SAASwC,cAAY,SACtC,aAAGxC,UAAU,uDACb,aAAGA,UAAU,wDACb,aAAGA,UAAU,0DACb,aAAGA,UAAU,2DACb,0BACA,0BACA,0BACA,0BACA,2BAEF,eAAKA,UAAU,aAAayC,KAAK,aAAaC,aAAW,cACvD,cAAI1C,UAAU,SACZ,cAAIA,UAAU,eACZ,QAAC,EAAA2C,KAAD,CAAMC,GAAG,KAAT,UAEF,cAAI5C,UAAU,eACZ,QAAC,EAAA2C,KAAD,CAAMC,GAAG,YAAT,aAEF,cAAI5C,UAAU,eACZ,QAAC,EAAA2C,KAAD,CAAMC,GAAG,SAAT,UAEF,cAAI5C,UAAU,eACZ,QAAC,EAAA2C,KAAD,CAAMC,GAAG,QAAT,aAIN,aAAG5C,UAAU,gBAAb,6SAOA,kBAAQA,UAAU,WAChB,QAAC,EAAA6C,EAAD,CACE7C,UAAU,gBACV8C,IAAI,uBACJC,IAAI,eACJC,QAAS,IACTC,OAAO,YALT","file":"component---src-pages-index-js-84cb0f7c2f8d884f7b69.js","sourcesContent":["import memoize from '@emotion/memoize';\nvar reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23\n\nvar isPropValid = /* #__PURE__ */memoize(function (prop) {\n  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111\n  /* o */\n  && prop.charCodeAt(1) === 110\n  /* n */\n  && prop.charCodeAt(2) < 91;\n}\n/* Z+1 */\n);\nexport default isPropValid;","import _extends from '@babel/runtime/helpers/esm/extends';\nimport { useContext, createElement } from 'react';\nimport isPropValid from '@emotion/is-prop-valid';\nimport { withEmotionCache, ThemeContext } from '@emotion/react';\nimport { getRegisteredStyles, insertStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nvar testOmitPropsOnStringTag = isPropValid;\n\nvar testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {\n  return key !== 'theme';\n};\n\nvar getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {\n  return typeof tag === 'string' && // 96 is one less than the char code\n  // for \"a\" so this is checking that\n  // it's a lowercase character\n  tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;\n};\n\nvar composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {\n  var shouldForwardProp;\n\n  if (options) {\n    var optionsShouldForwardProp = options.shouldForwardProp;\n    shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {\n      return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);\n    } : optionsShouldForwardProp;\n  }\n\n  if (typeof shouldForwardProp !== 'function' && isReal) {\n    shouldForwardProp = tag.__emotion_forwardProp;\n  }\n\n  return shouldForwardProp;\n};\n\nvar ILLEGAL_ESCAPE_SEQUENCE_ERROR = \"You have illegal escape sequence in your template literal, most likely inside content's property value.\\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \\\"content: '\\\\00d7';\\\" should become \\\"content: '\\\\\\\\00d7';\\\".\\nYou can read more about this here:\\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences\";\n\nvar createStyled = function createStyled(tag, options) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (tag === undefined) {\n      throw new Error('You are trying to create a styled element with an undefined component.\\nYou may have forgotten to import it.');\n    }\n  }\n\n  var isReal = tag.__emotion_real === tag;\n  var baseTag = isReal && tag.__emotion_base || tag;\n  var identifierName;\n  var targetClassName;\n\n  if (options !== undefined) {\n    identifierName = options.label;\n    targetClassName = options.target;\n  }\n\n  var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);\n  var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);\n  var shouldUseAs = !defaultShouldForwardProp('as');\n  return function () {\n    var args = arguments;\n    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];\n\n    if (identifierName !== undefined) {\n      styles.push(\"label:\" + identifierName + \";\");\n    }\n\n    if (args[0] == null || args[0].raw === undefined) {\n      styles.push.apply(styles, args);\n    } else {\n      if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {\n        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);\n      }\n\n      styles.push(args[0][0]);\n      var len = args.length;\n      var i = 1;\n\n      for (; i < len; i++) {\n        if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {\n          console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);\n        }\n\n        styles.push(args[i], args[0][i]);\n      }\n    } // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class\n\n\n    var Styled = withEmotionCache(function (props, cache, ref) {\n      var finalTag = shouldUseAs && props.as || baseTag;\n      var className = '';\n      var classInterpolations = [];\n      var mergedProps = props;\n\n      if (props.theme == null) {\n        mergedProps = {};\n\n        for (var key in props) {\n          mergedProps[key] = props[key];\n        }\n\n        mergedProps.theme = useContext(ThemeContext);\n      }\n\n      if (typeof props.className === 'string') {\n        className = getRegisteredStyles(cache.registered, classInterpolations, props.className);\n      } else if (props.className != null) {\n        className = props.className + \" \";\n      }\n\n      var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);\n      var rules = insertStyles(cache, serialized, typeof finalTag === 'string');\n      className += cache.key + \"-\" + serialized.name;\n\n      if (targetClassName !== undefined) {\n        className += \" \" + targetClassName;\n      }\n\n      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp;\n      var newProps = {};\n\n      for (var _key in props) {\n        if (shouldUseAs && _key === 'as') continue;\n\n        if ( // $FlowFixMe\n        finalShouldForwardProp(_key)) {\n          newProps[_key] = props[_key];\n        }\n      }\n\n      newProps.className = className;\n      newProps.ref = ref;\n      var ele = /*#__PURE__*/createElement(finalTag, newProps);\n      return ele;\n    });\n    Styled.displayName = identifierName !== undefined ? identifierName : \"Styled(\" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + \")\";\n    Styled.defaultProps = tag.defaultProps;\n    Styled.__emotion_real = Styled;\n    Styled.__emotion_base = baseTag;\n    Styled.__emotion_styles = styles;\n    Styled.__emotion_forwardProp = shouldForwardProp;\n    Object.defineProperty(Styled, 'toString', {\n      value: function value() {\n        if (targetClassName === undefined && process.env.NODE_ENV !== 'production') {\n          return 'NO_COMPONENT_SELECTOR';\n        } // $FlowFixMe: coerce undefined to string\n\n\n        return \".\" + targetClassName;\n      }\n    });\n\n    Styled.withComponent = function (nextTag, nextOptions) {\n      return createStyled(nextTag, _extends({}, options, nextOptions, {\n        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)\n      })).apply(void 0, styles);\n    };\n\n    return Styled;\n  };\n};\n\nexport default createStyled;","// /**\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\"\n\nimport SEO from \"../components/seo\"\nimport styled from \"@emotion/styled\"\nimport { Link } from \"gatsby\"\nimport { StaticImage } from \"gatsby-plugin-image\"\n\nconst Container = styled.main`\n  max-width: 100%;\n  margin: 0 auto;\n  background-color: var(--color-lilac-f);\n  display: grid;\n  grid-template-rows: 25vh 25vh 20vh 20vh 30vh;\n  @media (min-width: 60.25em) {\n    grid-template-rows: 15vh 15vh 20vh 20vh 30vh;\n  }\n  grid-template-columns:\n    [side-start] minmax(6rem, 1fr) [center-start] repeat(\n      8,\n      [col-start] 1fr [col-end]\n    )\n    [center-end] minmax(6rem, 1fr) [side-end];\n  .heading {\n    margin: 0;\n    font-variation-settings: \"wght\" 661, \"ital\" 0, \"YTFI\" 723, \"YTDE\" -225,\n      \"YTAS\" 826, \"YTUC\" 963, \"YTLC\" 511, \"XOPQ\" 156, \"opsz\" 34;\n    text-transform: uppercase;\n    color: var(--color-lilac-a);\n    --h1-font-size-max: 6;\n    grid-column: 5 /10;\n    grid-row: 3 / 4;\n    transform: translate(-2.5rem, -1rem);\n    @media screen and (min-width: 24.15em) {\n    }\n    @media (min-width: 60.25em) {\n      align-self: end;\n      writing-mode: vertical-rl;\n      justify-self: center;\n      grid-column: 3 / 5;\n      grid-row: 3 / 5;\n      transform: initial;\n    }\n    @media (min-width: 75em) {\n    }\n  }\n  .navigation {\n    background-color: var(--color-lilac-d);\n    align-self: stretch;\n    mix-blend-mode: hard-light;\n    grid-row: 3 / 4;\n    grid-column: 2 / -2;\n    align-self: center;\n    writing-mode: vertical-rl;\n\n    .menu {\n      padding: 1rem;\n      height: 100%;\n      display: flex;\n      gap: 0.3rem;\n      justify-content: flex-end;\n      flex-direction: column;\n      width: min-content;\n      &__item {\n        display: contents;\n        a,\n        &__link {\n          color: var(--color-grey-b);\n          text-transform: uppercase;\n          text-decoration: none;\n        }\n      }\n    }\n    @media (min-width: 24.15em) {\n      grid-column: 2 / 5;\n      grid-row: 3 / 5;\n      writing-mode: initial;\n      align-self: stretch;\n      justify-self: center;\n      /* transform: translateY(-1rem); */\n    }\n    @media (min-width: 60.25em) {\n      grid-column: 4 /10;\n      grid-row: 2 / 3;\n      transform: translate(-3rem, 50%);\n      writing-mode: vertical-rl;\n      height: min-content;\n      width: initial;\n      justify-self: initial;\n    }\n    @media (min-width: 75em) {\n    }\n  }\n  .design {\n    display: none;\n    padding: 0.4rem 1rem;\n    border: 0.5rem solid var(--color-lilac-c);\n    width: min-content;\n    font-size: calc(2.7rem + 1.9 * var(--scale));\n    line-height: 1;\n    word-spacing: 5ch;\n    transition: font-size 0.2s ease-in-out;\n    grid-row: 1/ 3;\n    grid-column: 2 / 7;\n    align-self: flex-start;\n    align-self: flex-end;\n    @media (min-width: 60.25em) {\n      grid-row: 2/ 4;\n      grid-column: 2 / 4;\n      align-self: center;\n    }\n    @media (min-width: 75em) {\n    }\n  }\n  .poster {\n    grid-row: 1/ 3;\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: repeat(5, 1fr);\n    grid-template-rows: repeat(7, 1fr);\n    &__right-angle {\n      width: 27%;\n      height: 27%;\n      justify-self: center;\n      align-self: center;\n      border: 0.3rem solid var(--color-grey-b);\n      &--top-left {\n        grid-row: 2 / 4;\n        grid-column: 1 / 3;\n        border-top: none;\n        border-left: none;\n        transform: translate(20%, 20%);\n      }\n      &--top-right {\n        grid-row: 2 / 4;\n        grid-column: 4 / 7;\n        border-top: none;\n        border-right: none;\n        transform: translate(-20%, 20%);\n      }\n      &--bottom-left {\n        grid-row: 5 / 7;\n        grid-column: 1 / 3;\n        border-bottom: none;\n        border-left: none;\n        transform: translate(20%, -20%);\n      }\n      &--bottom-right {\n        grid-row: 5 / 7;\n        grid-column: 4 / 6;\n        border-bottom: none;\n        border-right: none;\n        transform: translate(-20%, -20%);\n      }\n    }\n    span {\n      justify-self: center;\n      align-self: center;\n      font-variation-settings: \"wght\" 600, \"wdth\" 75, \"YOPQ\" 125;\n      color: var(--color-lilac-d);\n      --h2-font-size-max: 8;\n      --h2-font-size-min: 3.5;\n\n      font-size: calc(var(--h2-font-size-min) * 1rem);\n      @media screen and (min-width: 24.15em) {\n        font-size: calc(\n          (var(--h2-font-size-min) * 1rem) +\n            (var(--h2-font-size-max) - var(--h2-font-size-min)) *\n            (\n              (100vw - (var(--bp-small) * 16px)) /\n                (var(--bp-xlarge) - var(--bp-small))\n            ) / 1.6\n        );\n      }\n      @media (min-width: 75em) {\n        font-size: calc(var(--h2-font-size-max) * 1rem);\n      }\n    }\n    span:nth-of-type(1) {\n      grid-row: 3 / 5;\n      grid-column: 2 / 4;\n    }\n    span:nth-of-type(2) {\n      grid-row: 4 / 6;\n      grid-column: 3 / 5;\n    }\n    span:nth-of-type(3) {\n      grid-row: 1 / 3;\n      grid-column: 5 / 7;\n    }\n    span:nth-of-type(4) {\n      grid-row: 1 / 3;\n      grid-column: 3 / 4;\n    }\n    span:nth-of-type(5) {\n      grid-row: 6 / 8;\n      grid-column: 2 / 3;\n    }\n    &::after {\n      content: \"\";\n      display: block;\n      grid-row: 3/ 6;\n      grid-column: 2 / 5;\n      border: 1vmax solid var(--color-lilac-c);\n    }\n    @media (min-width: 60.25em) {\n      grid-row: 1/ 5;\n      grid-column: 1 / 4;\n      transform: translateX(12%);\n    }\n  }\n  .introduction {\n    grid-row: 3 / 5;\n    grid-column: 2 / 10;\n    align-self: center;\n    @media (min-width: 24.15em) {\n      grid-row: 3 / 5;\n      grid-column: 6 / 10;\n    }\n  }\n  .flower {\n    grid-row: 4 / 6;\n    grid-column: 1 / -1;\n    align-self: flex-end;\n    overflow: hidden;\n    &__image {\n      width: 100%;\n      transform: translateY(30%);\n      transition: width 0.2s ease-in-out;\n    }\n  }\n`\n\nexport default function UsersList() {\n  return (\n    <>\n      <SEO title=\"Home\" />\n      <Container>\n        <h1 className=\"heading\">Wellcome</h1>\n        <section className=\"design\">share the knowledge with love.</section>\n        <section className=\"poster\" aria-hidden=\"true\">\n          <i className=\"poster__right-angle poster__right-angle--top-left\" />\n          <i className=\"poster__right-angle poster__right-angle--top-right\" />\n          <i className=\"poster__right-angle poster__right-angle--bottom-left\" />\n          <i className=\"poster__right-angle poster__right-angle--bottom-right\" />\n          <span>C</span>\n          <span>J</span>\n          <span>H</span>\n          <span>F</span>\n          <span>S</span>\n        </section>\n        <nav className=\"navigation\" role=\"navigation\" aria-label=\"main menu\">\n          <ul className=\"menu\">\n            <li className=\"menu__item\">\n              <Link to=\"/\">Home</Link>\n            </li>\n            <li className=\"menu__item\">\n              <Link to=\"/writing\">Writing</Link>\n            </li>\n            <li className=\"menu__item\">\n              <Link to=\"/labs\">Labs</Link>\n            </li>\n            <li className=\"menu__item\">\n              <Link to=\"/wip\">About</Link>\n            </li>\n          </ul>\n        </nav>\n        <p className=\"introduction\">\n          I am a JavaScript Developer that focuses on front-end frameworks such\n          as Vue and React, .etc. I am interested in functional programming,\n          state machine, Web design, and serverless technologies. I focus on\n          building a JAM stack application with new technologies that I never\n          tried to grow my skills.\n        </p>\n        <footer className=\"flower\">\n          <StaticImage\n            className=\"flower__image\"\n            src=\"../images/flower.svg\"\n            alt=\"flower image\"\n            quality={100}\n            layout=\"fullWidth\"\n          />\n        </footer>\n      </Container>\n    </>\n  )\n}\n"],"sourceRoot":""}