Redesign layout and frontpage

.prettierrc.json

@@ -1,7 +1,7 @@
 {
-  "trailingComma": "es5",
+    "trailingComma": "es5",
-  "tabWidth": 4,
+    "tabWidth": 4,
-  "semi": true,
+    "semi": true,
-  "singleQuote": false,
+    "singleQuote": false,
-  "endOfLine": "lf"
+    "endOfLine": "lf"
 }

README.md

@@ -1,5 +1,6 @@
 # Unkn0wnCat.net
-*Made using Gatsby and Cloudflare Workers*
+
+_Made using Gatsby and Cloudflare Workers_
 ![Update Site](https://github.com/Unkn0wnCat/Unkn0wnCat.net/workflows/Update%20Site/badge.svg)
 
 This repository contains the code used to run the website Unkn0wnCat.net.

gatsby-config.js

@@ -1,51 +1,61 @@
 try {
-  require('dotenv').config();
+    require("dotenv").config();
-} catch(e) {}
+} catch (e) {}
 
 module.exports = {
-  siteMetadata: {
+    siteMetadata: {
-    title: `Unkn0wnCat.net`,
+        title: `Unkn0wnCat.net`,
-    description: `A german gamer, coder, video editor.`,
+        description: `A german gamer, coder, video editor.`,
-    author: `@Unkn0wnKevin`,
+        author: `@Unkn0wnKevin`,
-    siteUrl: `https://unkn0wncat.net`,
+        siteUrl: `https://unkn0wncat.net`,
-  },
-  plugins: [
-    `gatsby-plugin-react-helmet`,
-    {
-      resolve: `gatsby-plugin-sitemap`,
-      options: {
-        output: `/sitemap.xml`,
-        createLinkInHead: true
-      }
     },
-    {
+    plugins: [
-      resolve: `gatsby-plugin-sass`
+        {
-    },
+            resolve: `gatsby-plugin-typescript`,
-    {
+            options: {
-      resolve: `gatsby-source-filesystem`,
+                isTSX: true,
-      options: {
+                allExtensions: true,
-        name: `images`,
+            },
-        path: `${__dirname}/src/images`,
+        },
-      },
+        `gatsby-plugin-image`,
-    },
+        `gatsby-plugin-sharp`,
-    {
+        `gatsby-transformer-sharp`,
-      resolve: `gatsby-source-filesystem`,
+        `gatsby-plugin-react-helmet`,
-      options: {
+        {
-        name: `content`,
+            resolve: `gatsby-plugin-sitemap`,
-        path: `${__dirname}/content`,
+            options: {
-      },
+                output: `/sitemap.xml`,
-    },
+                createLinkInHead: true,
-    {
+            },
-      resolve: `gatsby-source-youtube-v3`,
+        },
-      options: {
+        {
-        channelId: ['UCCoZp-6_P3CVFj4clQ6uaeg'],
+            resolve: `gatsby-plugin-sass`,
-        apiKey: process.env.YOUTUBE_API_KEY,
+        },
-        maxVideos: 60
+        {
-      },
+            resolve: `gatsby-source-filesystem`,
-    },
+            options: {
-    `gatsby-transformer-remark`,
+                name: `images`,
-    `gatsby-plugin-sharp`,
+                path: `${__dirname}/src/images`,
-    /*{
+            },
+        },
+        {
+            resolve: `gatsby-source-filesystem`,
+            options: {
+                name: `content`,
+                path: `${__dirname}/content`,
+            },
+        },
+        {
+            resolve: `gatsby-source-youtube-v3`,
+            options: {
+                channelId: ["UCCoZp-6_P3CVFj4clQ6uaeg"],
+                apiKey: process.env.YOUTUBE_API_KEY,
+                maxVideos: 60,
+            },
+        },
+        `gatsby-transformer-remark`,
+        `gatsby-plugin-sharp`,
+        /*{
       resolve: `gatsby-plugin-manifest`,
       options: {
         name: `Unkn0wnCat.net`,
@@ -59,6 +69,5 @@ module.exports = {
         cache_busting_mode: 'none'
       },
     },*/
-
+    ],
-  ],
+};
-}

package.json

@@ -4,14 +4,18 @@
   "version": "2.1.0",
   "author": "Kevin Kandlbinder <kevin@kevink.dev>",
   "dependencies": {
+    "@fontsource/noto-sans-display": "^4.5.1",
+    "@icons-pack/react-simple-icons": "^4.6.1",
     "dotenv": "^14.3.0",
     "gatsby": "^4.6.0",
+    "gatsby-plugin-image": "^2.6.0",
     "gatsby-plugin-manifest": "^4.6.0",
     "gatsby-plugin-react-helmet": "^5.6.0",
     "gatsby-plugin-sass": "^5.6.0",
     "gatsby-plugin-sharp": "^4.6.0",
     "gatsby-plugin-sitemap": "^5.6.0",
-    "gatsby-source-filesystem": "^4.2.0",
+    "gatsby-plugin-typescript": "^4.6.0",
+    "gatsby-source-filesystem": "^4.6.0",
     "gatsby-source-youtube-v3": "^3.0.2",
     "gatsby-transformer-remark": "^5.6.0",
     "gatsby-transformer-sharp": "^4.6.0",
@@ -19,7 +23,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "sass": "^1.49.0"
+    "sass": "^1.49.0",
+    "typed-scss-modules": "^4.1.2"
   },
   "devDependencies": {
     "prettier": "2.5.1"
@@ -31,12 +36,13 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,scss,d.ts}\"",
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
-    "deploy": "gatsby build && wrangler publish"
+    "deploy": "gatsby build && wrangler publish",
+    "tscss": "tsm src --watch"
   },
   "repository": {
     "type": "git",

src/_globals.scss

@@ -0,0 +1,31 @@
+$fontMain: "Noto Sans Display", "Noto Sans", sans-serif;
+$layoutPadding: 20px;
+$layoutNavHeight: 60px;
+$layoutBorderRadius: 5px;
+$layoutWidth: 1100px;
+
+@mixin layoutBox {
+    max-width: $layoutWidth;
+    width: 100%;
+    padding: $layoutPadding;
+    margin: 0 auto;
+}
+
+@mixin glass {
+    background-color: var(--color-background);
+
+    @supports (backdrop-filter: blur(10px)) {
+        background-color: var(--color-glass-background);
+        backdrop-filter: blur(10px);
+    }
+}
+
+@mixin floatingBoxShadow {
+    box-shadow: 0 20px 20px rgba(black, 0.05);
+}
+
+@mixin respectReducedMotion {
+    @media (prefers-reduced-motion: reduce) {
+        transition: none !important;
+    }
+}

src/components/layout.js

@@ -1,21 +0,0 @@
-import React from "react"
-import PropTypes from "prop-types"
-
-import * as styles from "./layout.module.scss"
-import Navbar from "./navbar"
-
-const Layout = ({ children, noNavSpacer = false }) => {
-  return (
-      <div className={styles.content}>
-          <Navbar noSpacer={noNavSpacer}/>
-          {children}
-          <footer>&copy; Kevin Kandlbinder | <a href="//kevink.dev/legal/about">Imprint</a> | <a href="//kevink.dev/legal/datasec">Data Protection</a> | <a href={"https://github.com/Unkn0wnCat/Unkn0wnCat.net"}>Source Code</a></footer>
-      </div>
-  )
-}
-
-Layout.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
-export default Layout

src/components/layout.module.scss

@@ -1,38 +0,0 @@
-@import 'src/scss/variables';
-@import 'src/scss/base';
-
-.content {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-
-  > * {
-    flex-shrink: 0;
-  }
-
-  > section {
-    width: 100%;
-    overflow: hidden;
-
-    > div {
-      width: 100%;
-      margin: 0 auto;
-      max-width: $layoutWidth;
-      padding: 20px $layoutPadding;
-    }
-  }
-
-  footer {
-    text-align: center;
-    background: #1c1c1c;
-    color: rgba(255, 255, 255, .5);
-    padding: 5px;
-
-    a {
-      color: inherit;
-      text-decoration: underline dotted currentcolor;
-    }
-  }
-}
-

src/components/navbar.js

@@ -1,27 +0,0 @@
-import React from "react"
-
-import { Link } from "gatsby"
-
-import * as styles from "./navbar.module.scss"
-
-function spacerStyle(noSpacer) {
-  if(noSpacer) {
-    return {height: 0};
-  }
-  return {};
-}
-
-const Navbar = ({ noSpacer = false }) => {
-  return (
-      <div className={styles.navBarPlaceholder} style={spacerStyle(noSpacer)}>
-          <div className={styles.navBar}>
-            <nav>
-              <Link to={"/"} className={styles.logo}>Unkn0wnCat.net</Link>
-              <Link to={"/videos"}>Videos</Link>
-            </nav>
-          </div>
-      </div>
-  )
-}
-
-export default Navbar

src/components/navbar.module.scss

@@ -1,45 +0,0 @@
-@import 'src/scss/variables';
-@import 'src/scss/base';
-
-.navBarPlaceholder, .navBar {
-  width: 100%;
-  height: 50px;
-}
-
-.navBar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: rgba(#15151f, .99);
-  z-index: 900;
-  nav {
-    display: flex;
-    width: 100%;
-    max-width: $layoutWidth;
-    margin: auto;
-    padding: 0 $layoutPadding;
-
-
-    a {
-      color: white;
-      text-decoration: none;
-      line-height: 50px;
-
-      margin: 0 10px;
-      font-weight: 200;
-
-      &:first-child {
-        margin-left: 0;
-      }
-      &:last-child {
-        margin-right: 0;
-      }
-
-      &.logo {
-        font-size: 1.2em;
-        font-weight: 400;
-        margin-right: auto;
-      }
-    }
-  }
-}

src/components/seo.js

@@ -5,84 +5,84 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
+import React from "react";
-import PropTypes from "prop-types"
+import PropTypes from "prop-types";
-import { Helmet } from "react-helmet"
+import { Helmet } from "react-helmet";
-import { useStaticQuery, graphql } from "gatsby"
+import { useStaticQuery, graphql } from "gatsby";
 
 function SEO({ description, lang, meta, title }) {
-  const { site } = useStaticQuery(
+    const { site } = useStaticQuery(
-    graphql`
+        graphql`
-      query {
+            query {
-        site {
+                site {
-          siteMetadata {
+                    siteMetadata {
-            title
+                        title
-            description
+                        description
-            author
+                        author
-          }
+                    }
-        }
+                }
-      }
+            }
-    `
+        `
-  )
+    );
 
-  const metaDescription = description || site.siteMetadata.description
+    const metaDescription = description || site.siteMetadata.description;
 
-  return (
+    return (
-    <Helmet
+        <Helmet
-      htmlAttributes={{
+            htmlAttributes={{
-        lang,
+                lang,
-      }}
+            }}
-      title={title}
+            title={title || site.siteMetadata.title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
+            titleTemplate={`%s | ${site.siteMetadata.title}`}
-      meta={[
+            meta={[
-        {
+                {
-          name: `description`,
+                    name: `description`,
-          content: metaDescription,
+                    content: metaDescription,
-        },
+                },
-        {
+                {
-          property: `og:title`,
+                    property: `og:title`,
-          content: title,
+                    content: title,
-        },
+                },
-        {
+                {
-          property: `og:description`,
+                    property: `og:description`,
-          content: metaDescription,
+                    content: metaDescription,
-        },
+                },
-        {
+                {
-          property: `og:type`,
+                    property: `og:type`,
-          content: `website`,
+                    content: `website`,
-        },
+                },
-        {
+                {
-          name: `twitter:card`,
+                    name: `twitter:card`,
-          content: `summary`,
+                    content: `summary`,
-        },
+                },
-        {
+                {
-          name: `twitter:creator`,
+                    name: `twitter:creator`,
-          content: site.siteMetadata.author,
+                    content: site.siteMetadata.author,
-        },
+                },
-        {
+                {
-          name: `twitter:title`,
+                    name: `twitter:title`,
-          content: title,
+                    content: title,
-        },
+                },
-        {
+                {
-          name: `twitter:description`,
+                    name: `twitter:description`,
-          content: metaDescription,
+                    content: metaDescription,
-        },
+                },
-      ].concat(meta)}
+            ].concat(meta)}
-    ><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;900&family=Open+Sans:wght@300;400&display=swap" rel="stylesheet"/></Helmet>
+        ></Helmet>
-  )
+    );
 }
 
 SEO.defaultProps = {
-  lang: `en`,
+    lang: `en`,
-  meta: [],
+    meta: [],
-  description: ``,
+    description: ``,
-}
+};
 
 SEO.propTypes = {
-  description: PropTypes.string,
+    description: PropTypes.string,
-  lang: PropTypes.string,
+    lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
+    meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
-}
+};
 
-export default SEO
+export default SEO;

src/index.scss

@@ -0,0 +1,153 @@
+@use "@fontsource/noto-sans-display/scss/mixins" as NotoSansDisplay;
+@import "./globals";
+
+@include NotoSansDisplay.fontFaceVariable($weight: 400);
+
+:root {
+    --color-foreground: #0e0e0e;
+    --color-background: white;
+    --color-glass-background: #{rgba(white, 0.75)};
+    --color-primary: #3d2aec;
+    --color-primary-lighter: #503ef0;
+    --color-secondary: #e91b3e;
+    --color-secondary-lighter: #e43e5a;
+
+    --color-glass-primary: #{rgba(#503ef0, 0.75)};
+
+    --color-footer-background: #1c1c1c;
+    --color-footer-foreground: white;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: var(--color-background);
+    color: var(--color-foreground);
+    font-family: $fontMain;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0 0 1em 0;
+    font-weight: 600;
+}
+
+h1 {
+    font-size: 3em;
+}
+
+h2 {
+    font-size: 1.75em;
+}
+
+h3 {
+    font-size: 1.5em;
+}
+
+h4 {
+    font-size: 1.25em;
+}
+
+h5 {
+    font-size: 1.15em;
+}
+
+h6 {
+    font-size: 1em;
+    opacity: 0.5;
+}
+hr {
+    border: none;
+    border-bottom: 2px solid rgba(128, 128, 128, 0.5);
+}
+
+ul,
+ol {
+    padding-left: 1.5em;
+
+    > li {
+        padding-left: 0.5em;
+    }
+}
+
+a {
+    color: var(--color-primary);
+    text-decoration: underline dotted currentcolor;
+}
+
+pre {
+    padding: 16px;
+    background: rgba(128, 128, 128, 0.15);
+    border-radius: 5px;
+    line-height: 1.5;
+}
+
+table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    border-spacing: 0;
+    border-collapse: collapse;
+    tr {
+        border-top: thin solid rgba(128, 128, 128, 0.35);
+
+        &:nth-child(2n) {
+            background: rgba(128, 128, 128, 0.15);
+        }
+
+        th {
+            font-weight: 600;
+        }
+
+        td,
+        th {
+            border: thin solid rgba(128, 128, 128, 0.35);
+            padding: 6px 14px;
+        }
+    }
+}
+
+blockquote {
+    margin-left: 0;
+    padding-left: 20px;
+    border-left: 3px solid rgba(128, 128, 128, 0.5);
+    opacity: 0.7;
+    font-style: oblique;
+
+    > .quote-source {
+        display: block;
+        margin-left: 1em;
+        font-style: oblique;
+        opacity: 0.75;
+
+        &::before {
+            content: "-- ";
+        }
+    }
+}
+
+dl {
+    dt {
+        font-weight: 700;
+    }
+    dd {
+        font-style: oblique;
+    }
+}
+
+#___gatsby,
+#gatsby-focus-wrapper,
+.content {
+    height: 100%;
+}

src/index.scss.d.ts

@@ -0,0 +1,4 @@
+export const content: string;
+export const gatsby: string;
+export const gatsbyFocusWrapper: string;
+export const quoteSource: string;

src/layouts/DefaultLayout.module.scss

@@ -0,0 +1,72 @@
+@import "../globals";
+
+.layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+
+    > * {
+        flex-shrink: 0;
+    }
+
+    .topBar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: $layoutNavHeight;
+        background-color: var(--color-background);
+        z-index: 1000;
+
+        @include floatingBoxShadow;
+        @include glass;
+
+        &.transparent {
+            background-color: transparent;
+            backdrop-filter: blur(0);
+            box-shadow: none;
+        }
+
+        > nav {
+            max-width: $layoutWidth;
+            width: 100%;
+            display: flex;
+            margin: 0 auto;
+            height: $layoutNavHeight;
+
+            .logo {
+                margin-right: auto;
+                font-size: 1.2em;
+            }
+
+            a {
+                padding: $layoutPadding;
+                border-radius: $layoutBorderRadius;
+                display: flex;
+                align-items: center;
+                text-decoration: none;
+                color: inherit;
+                transition: color 0.25s;
+                position: relative;
+                @include respectReducedMotion;
+
+                &:hover,
+                &:focus {
+                    color: var(--color-primary-lighter);
+                }
+            }
+        }
+    }
+
+    .content {
+        flex-grow: 1;
+        padding-top: $layoutNavHeight;
+    }
+
+    .footer {
+        padding: $layoutPadding;
+        background-color: var(--color-footer-background);
+        color: var(--color-footer-foreground);
+        text-align: center;
+    }
+}

src/layouts/DefaultLayout.module.scss.d.ts

@@ -0,0 +1,6 @@
+export const content: string;
+export const footer: string;
+export const layout: string;
+export const logo: string;
+export const topBar: string;
+export const transparent: string;

src/layouts/DefaultLayout.tsx

@@ -0,0 +1,70 @@
+import { Link } from "gatsby";
+import React, { useEffect, useState } from "react";
+import SEO from "../components/seo";
+
+import "../index.scss";
+import * as styles from "./DefaultLayout.module.scss";
+
+type LayoutProps = {
+    topBarHome?: boolean;
+};
+
+const Layout = (props: React.PropsWithChildren<LayoutProps>) => {
+    const [isAtTop, setIsAtTop] = useState(false);
+    const updateIsAtTop = () => {
+        if (typeof window === "undefined") return;
+
+        if (window.scrollY > 25) {
+            if (isAtTop) setIsAtTop(false);
+        } else {
+            if (!isAtTop) setIsAtTop(true);
+        }
+    };
+
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            window.addEventListener("scroll", updateIsAtTop);
+            updateIsAtTop();
+        }
+
+        return () => {
+            if (typeof window !== "undefined") {
+                window.removeEventListener("scroll", updateIsAtTop);
+            }
+        };
+    });
+
+    return (
+        <div className={styles.layout}>
+            <SEO />
+            <div
+                className={
+                    styles.topBar +
+                    (props.topBarHome && isAtTop
+                        ? " " + styles.transparent
+                        : "")
+                }
+            >
+                <nav>
+                    <Link to="/" className={styles.logo}>
+                        Unkn0wnCat.net
+                    </Link>
+                    <Link to="/videos">Videos</Link>
+                </nav>
+            </div>
+            <main className={styles.content}>{props.children}</main>
+            <footer className={styles.footer}>
+                CC-BY-4.0 Kevin Kandlbinder |{" "}
+                <a
+                    href="https://kevink.dev/legal/imprint"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    Imprint
+                </a>
+            </footer>
+        </div>
+    );
+};
+
+export default Layout;

src/pages/404.js

@@ -1,20 +1,23 @@
-import React from "react"
+import React from "react";
 
 import { Link } from "gatsby";
 
-import Layout from "../components/layout"
+import SEO from "../components/seo";
-import SEO from "../components/seo"
 
 const NotFoundPage = () => (
-  <Layout>
+    <div>
-    <SEO title="404: Not found" />
+        <SEO title="404: Not found" />
-    <section style={{flexGrow: 1}}>
+        <section style={{ flexGrow: 1 }}>
-      <div>
+            <div>
-        <h1>404: NOT FOUND</h1>
+                <h1>404: NOT FOUND</h1>
-        <p>You just found a path we couldn't find a page for... :(<br/>Perhaps you should try going <Link to={"/"}>home</Link>.</p>
+                <p>
-      </div>
+                    You just found a path we couldn't find a page for... :(
-    </section>
+                    <br />
-  </Layout>
+                    Perhaps you should try going <Link to={"/"}>home</Link>.
-)
+                </p>
+            </div>
+        </section>
+    </div>
+);
 
-export default NotFoundPage
+export default NotFoundPage;

src/pages/index.js

@@ -1,80 +1,56 @@
-import React from "react"
+import React from "react";
-import { graphql } from 'gatsby'
+import { graphql } from "gatsby";
 
-import Layout from "../components/layout"
+import SEO from "../components/seo";
-import SEO from "../components/seo"
-
-import youtubeImage from "../images/assets/youtube.jpg"
-import twitchImage from "../images/assets/twitch.jpg"
-import twitterImage from "../images/assets/twitter.jpg"
-import steamImage from "../images/assets/steam.jpg"
 
 import * as styles from "./index.module.scss";
+import Layout from "../layouts/DefaultLayout";
+import { StaticImage } from "gatsby-plugin-image";
+import {Steam, Twitch, Twitter, Youtube} from "@icons-pack/react-simple-icons";
 
-const makeStyle = function(image) {
+const IndexPage = ({ data }) => <Layout topBarHome={true}>
-  return {
+    <div className={styles.heroOuter}>
-    backgroundImage: "linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url("+image+")"
+        <div className={styles.hero}>
-  };
+            <div className={styles.heroHalo}></div>
-}
+            <div className={styles.heroImage}>
+                <StaticImage
+                    src="../assets/chibi_nobg.png"
+                    placeholder="tracedSVG"
+                    quality="100"
+                    alt="Chibi drawing of Unkn0wnCat created by @Pericote9"
+                    fit="contain"
+                    layout="constrained"
+                />
+            </div>
+            <div className={styles.heroBoxBg}></div>
+            <div className={styles.heroBox}>
+                <div>
+                    <span className={styles.name}>Unkn0wn&shy;Cat</span>
+                    <span className={styles.description}>Gamer, Coder, Video Producer</span>
 
-const IndexPage = ({ data }) => (
+                    <a href="https://www.youtube.com/channel/UCCoZp-6_P3CVFj4clQ6uaeg" target="_blank" rel="noreferrer"><Youtube/> Unkn0wnCat</a>
-  <Layout noNavSpacer={true}>
+                    <a href="https://www.twitch.tv/thatunkn0wncat" target="_blank" rel="noreferrer"><Twitch/> ThatUnkn0wnCat</a>
-    <SEO title="Home" />
+                    <a href="https://twitter.com/Unkn0wnKevin" target="_blank" rel="noreferrer"><Twitter/> @Unkn0wnKevin</a>
-    <div className={styles.hero}>
+                    <a href="https://steamcommunity.com/id/unkn0wncat" target="_blank" rel="noreferrer"><Steam/> Unkn0wnCat</a>
-      <div>
+                    <a href="https://twitter.com/Unkn0wnKevin" target="_blank" rel="noreferrer"><Twitter/> @Unkn0wnKevin</a>
-        <span className={styles.title}>Unkn0wnCat</span>
+                </div>
-        <span className={styles.subtitle}>Gamer, Coder, Editor</span>
+            </div>
-      </div>
-    </div>
-    <section>
-      <div>
-        <h1>About me</h1>
-
-        <div
-          className="about-content"
-          dangerouslySetInnerHTML={{ __html: data.allMarkdownRemark.edges[0].node.html }}
-        />
-      </div>
-    </section>
-    <section className={styles.social}>
-      <div>
-        <h1>Social</h1>
-        <div className={styles.socialGrid}>
-          <a href="https://www.youtube.com/channel/UCCoZp-6_P3CVFj4clQ6uaeg" rel={"noreferrer"} target={"_blank"} style={makeStyle(youtubeImage)}>
-            <span className={styles.handle}>Unkn0wnCat</span>
-            <span className={styles.service}>YouTube</span>
-          </a>
-          <a href="https://www.twitch.tv/thatunkn0wncat" rel={"noreferrer"} target={"_blank"} style={makeStyle(twitchImage)}>
-            <span className={styles.handle}>ThatUnkn0wnCat</span>
-            <span className={styles.service}>Twitch</span>
-          </a>
-          <a href="https://twitter.com/unkn0wnkevin" rel={"noreferrer"} target={"_blank"} style={makeStyle(twitterImage)}>
-            <span className={styles.handle}>@Unkn0wnKevin</span>
-            <span className={styles.service}>Twitter</span>
-          </a>
-          <a href="https://steamcommunity.com/id/unkn0wncat" rel={"noreferrer"} target={"_blank"} style={makeStyle(steamImage)}>
-            <span className={styles.handle}>Unkn0wnCat</span>
-            <span className={styles.service}>Steam</span>
-          </a>
         </div>
-        <small>Images by <a href={"https://unsplash.com/photos/iKdQCIiSMlQ"} rel={"noreferrer"} target={"_blank"}>Wahid Khene</a>, <a href={"https://unsplash.com/photos/-oW0q0iOgBc"} rel={"noreferrer"} target={"_blank"}>Jackson David</a>, <a href={"https://unsplash.com/photos/gHrEvF7Ugb4"} rel={"noreferrer"} target={"_blank"}>Kon Karampelas</a> and <a href={"https://unsplash.com/photos/nCU4yq5xDEQ"} rel={"noreferrer"} target={"_blank"}>Mateo Vrbnjak</a> on Unsplash.</small>
+    </div>
-      </div>
+</Layout>;
-    </section>
-  </Layout>
-)
 
 export const query = graphql`
-query {
+    query {
-  allMarkdownRemark(
+        allMarkdownRemark(
-    filter: {fileAbsolutePath: {regex: "/home_about.md$/"}}
+            filter: { fileAbsolutePath: { regex: "/home_about.md$/" } }
-  ) {
+        ) {
-    edges {
+            edges {
-      node {
+                node {
-        html
+                    html
-      }
+                }
+            }
+        }
     }
-  }
+`;
-}
-`
 
-export default IndexPage
+export default IndexPage;

src/pages/index.module.scss

@@ -1,143 +1,122 @@
-@import 'src/scss/variables';
+@import "../globals";
-@import 'src/scss/base';
 
-.hero {
+$layoutTwoColBreakpoint: 800px;
-  width: 100%;
-  height: 100vh;
-  min-height: 400px;
-  background: radial-gradient(ellipse at top left,rgba(#1f0ba6, .2313),transparent), radial-gradient(ellipse at bottom right,rgba(#4a0868, .1137),transparent);
-  background-color: #1c1c1c;
-  z-index: 200;
-
-  > div {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: left;
-    background: linear-gradient(to right, #F27121, #E94057, #9A3397);
-    text-shadow: 0 0 10px 0 black;
-    padding: 0;
-    background-clip: text;
 
 
-    > span {
+.heroOuter {
-      display: block;
+    
-      color: transparent;
+    .hero {
+        margin-top: -$layoutNavHeight;
+    
+        
+        height: 100%;
+        min-height: 900px;
+    
+    
+        position: relative;
 
-      &.title {
+        .heroHalo {
-        font-size: 4em;
+            position: absolute;
-        font-family: $boldFont;
+            left: 50%;
-        font-weight: 900;
+            transform: translate(-63%, 0);
-      }
+            background: radial-gradient(circle at 44% 50%, var(--color-glass-primary) 0, transparent 40%);
+            width: 70%;
+            height: 100%;
+            transition: opacity .25s;
 
-      &.subtitle {
+            @media (max-width: $layoutTwoColBreakpoint) {
-        font-size: 1.5em;
+                opacity: 0;
-        color: white;
+            }
-      }
+        }
-    }
+    
-  }
+        .heroImage {
-}
+            position: absolute;
-
+            transform: translate(-130%, 0);
-@media(max-width: 600px) {
+            display: flex;
-  .hero {
+            justify-content: center;
-    font-size: .8em;
+            align-items: center;
-    > div {
+            top: 50px;
-      left: 0;
+            left: 50%;
-      transform: translate(0, -50%);
+            height: 90%;
-    }
+            max-width: 330px;
-  }
+            width: 30%;
-}
+            transition: width .25s;
-
+    
-@media(max-width: 420px) {
+            @media (max-width: $layoutTwoColBreakpoint) {
-  .hero {
+                width: 0;
-    > div {
+            }
-      > span.title {
+        }
-        font-size: 3em;
+    
-      }
+        .heroBox, .heroBoxBg {
-    }
+            position: absolute;
-  }
+            top: 25%;
-}
+            left: 50%;
-
+            width: 400px;
-@media(max-width: 320px) {
+            height: 400px;
-  .hero {
+            transition: transform .25s, clip-path .25s, width .25s, height .25s;
-    > div {
+    
-      > span.title {
+            @media (max-width: $layoutTwoColBreakpoint) {
-        font-size: 2em;
+                transform: translate(-50%, 0);
-      }
+            }
-    }
+    
-  }
+            @media (max-width: 400px) {
-}
+                clip-path: polygon(0 0,100% 0,100% 100%,0 100%) !important;
-
+                
-.social {
+                &.heroBoxBg {
-  text-align: left;
+                    height: 410px;
-
+                    transform: translate(-50%, -5px);
-  small {
+                    width: 100%;
-    display: block;
+                }
-    text-align: center;
+                
-  }
+                &.heroBox {
-
+                    width: calc(100% - 10px);
-  .socialGrid {
+                }
-    display: flex;
+    
-    flex-wrap: wrap;
+                > div {
-    justify-content: center;
+                    transform: rotate(0deg) !important;
-
+                    padding: $layoutPadding !important;
-    > a {
+                }
-      text-decoration: none;
+            }
-      width: 300px;
+        }
-      height: 200px;
+    
-      background: white;
+        .heroBox {
-      margin: 10px 20px;
+            clip-path: polygon(6% 8%,88% 5%,95% 91%,7% 96%);
-      border-radius: 5px;
+            background-color: var(--color-primary-lighter);
-      display: flex;
+            color: white;
-      overflow: hidden;
+    
-      transform: scale(1);
+            > div {
-      transition: transform .25s;
+                transform: rotate(-2deg);
-      flex-direction: column;
+                padding: 45px;
-
+                display: flex;
-      > span.handle {
+                flex-direction: column;
-        color: white;
+                transition: transform .25s, padding .25s;
-        opacity: .5;
+    
-        font-weight: 400;
+                .name {
-        font-size: 1em;
+                    font-size: 2em;
-        margin: auto 10px -5px auto;
+                    font-weight: 700;
-        transition: opacity .25s;
+                }
-        text-align: right;
+    
-      }
+                .description {
-
+                    margin-bottom: 25px;
-      > span.service {
+                }
-        color: white;
+    
-        opacity: .5;
+                a {
-        font-family: $boldFont;
+                    color: inherit;
-        font-weight: 900;
+                    display: flex;
-        font-size: 3em;
+                    align-items: center;
-        text-align: right;
+                    margin-bottom: 10px;
-        transition: opacity .25s;
+    
-        margin: 0 10px 10px 0;
+                    svg {
-      }
+                        margin-right: 10px;
-
+                    }
-      &:hover {
+                }
-        transform: scale(1.2);
+            }
-        > span {
+        }
-          opacity: 1;
+    
+        .heroBoxBg {
+            clip-path: polygon(14% 4%,95% 1%,88% 96%,2% 89%);
+            background-color: var(--color-secondary-lighter);
         }
-      }
-
-      /*&.youtube {
-        background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(https://cdn.kevink.dev/ucnet/images/yt-1536240478700-b869070f9279.jpg);
-      }
-
-      &.twitch {
-        background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(https://cdn.kevink.dev/ucnet/images/twitch.jpg);
-      }
-
-      &.twitter {
-        background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(https://cdn.kevink.dev/ucnet/images/twitter-1543185377-aa2f876d1760.jpg);
-      }
-
-      &.steam {
-        background-image: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(https://cdn.kevink.dev/ucnet/images/steam-1538481199705-c710c4e965fc.jpg);
-      }*/
     }
-  }
 }
+

src/pages/index.module.scss.d.ts

@@ -0,0 +1,8 @@
+export const description: string;
+export const hero: string;
+export const heroBox: string;
+export const heroBoxBg: string;
+export const heroHalo: string;
+export const heroImage: string;
+export const heroOuter: string;
+export const name: string;

src/pages/videos.js

@@ -1,52 +1,70 @@
-import React from "react"
+import React from "react";
 
-import { graphql } from "gatsby"
+import { graphql } from "gatsby";
 
-import Layout from "../components/layout"
+import SEO from "../components/seo";
-import SEO from "../components/seo"
 
-import * as styles from "./videos.module.scss"
+import * as styles from "./videos.module.scss";
+import Layout from "../layouts/DefaultLayout";
 
-const makeStyle = function(image) {
+const makeStyle = function (image) {
-  return {
+    return {
-    backgroundImage: "linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .75)), url("+image+")"
+        backgroundImage:
-  };
+            "linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .75)), url(" +
-}
+            image +
+            ")",
+    };
+};
 
 const VideoPage = ({ data }) => (
-  <Layout>
+    <Layout>
-    <SEO title="Videos" />
+        <SEO title="Videos" />
-    <section style={{flexGrow: 1}} className={styles.videos}>
+        <div className={styles.videos}>
-      <div>
+            <div>
-        <h1>Videos</h1>
+                <h1>Videos</h1>
-        <div className={styles.videoGrid}>
+                <div className={styles.videoGrid}>
-          {data.allYoutubeVideo.nodes.map((node, index) => (
+                    {data.allYoutubeVideo.nodes.map((node, index) => (
-            <a href={"https://youtu.be/"+node.videoId} style={makeStyle(node.localThumbnail ? node.localThumbnail.publicURL : "https://source.unsplash.com/Vy2cHqm0mCs/1920x1080")} target={"_blank"} rel={"noreferrer"}>
+                        <a
-              <span className={styles.title}>{node.title.replace(/ *\[[^)]*\] */g, "").replace(/\| Unkn0wnCat/g, "")}</span>
+                            href={"https://youtu.be/" + node.videoId}
-              <span className={styles.timeAgo}>{node.publishedAt}</span>
+                            style={makeStyle(
-            </a>
+                                node.localThumbnail
-          ))}
+                                    ? node.localThumbnail.publicURL
+                                    : "https://source.unsplash.com/Vy2cHqm0mCs/1920x1080"
+                            )}
+                            target={"_blank"}
+                            rel={"noreferrer"}
+                        >
+                            <span className={styles.title}>
+                                {node.title
+                                    .replace(/ *\[[^)]*\] */g, "")
+                                    .replace(/\| Unkn0wnCat/g, "")}
+                            </span>
+                            <span className={styles.timeAgo}>
+                                {node.publishedAt}
+                            </span>
+                        </a>
+                    ))}
+                </div>
+            </div>
         </div>
-      </div>
+    </Layout>
-    </section>
+);
-  </Layout>
-)
 
 export const query = graphql`
-  query {
+    query {
-    allYoutubeVideo {
+        allYoutubeVideo {
-      nodes {
+            nodes {
-        channelTitle
+                channelTitle
-        title
+                title
-        videoId
+                videoId
-        localThumbnail {
+                localThumbnail {
-          publicURL
+                    publicURL
+                }
+                description
+                publishedAt(fromNow: true)
+            }
         }
-        description
-        publishedAt(fromNow: true)
-      }
     }
-  }
 `;
 
-export default VideoPage
+export default VideoPage;

src/pages/videos.module.scss

@@ -1,60 +1,63 @@
 @use "sass:math";
+@import "../globals";
+
 $boxWidth: 300px;
 
 .videos {
-  .videoGrid {
+    @include layoutBox;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
 
-    a {
-      width: $boxWidth;
-      height: math.div($boxWidth, 16) * 9;
-      background-size: cover;
-      background-position: center;
-      color: white;
-      display: flex;
-      flex-direction: column;
-      text-decoration: none;
-      padding: 10px;
-      margin: 20px;
-      border-radius: 5px;
-      filter: grayscale(.5) brightness(.5);
-      transition: filter .25s, transform .25s, font-size .25s;
-
-      &:hover {
-        filter: grayscale(0) brightness(1);
-        transform: scale(1.5);
-        z-index: 100;
-        font-size: .75em;
-      }
-
-
-      .title {
-        display: block;
-        width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-weight: bold;
-        margin-top: auto;
-      }
-
-      .timeAgo {
-        display: block;
-      }
-    }
-  }
-}
-
-@media(max-width: 1152px) {
-  .videos {
     .videoGrid {
-      a {
+        display: flex;
-        &:hover {
+        flex-wrap: wrap;
-          transform: scale(1.25);
+        justify-content: center;
+
+        a {
+            width: $boxWidth;
+            height: math.div($boxWidth, 16) * 9;
+            background-size: cover;
+            background-position: center;
+            color: white;
+            display: flex;
+            flex-direction: column;
+            text-decoration: none;
+            padding: 10px;
+            margin: 20px;
+            border-radius: 5px;
+            filter: grayscale(0.5) brightness(0.5);
+            transition: filter 0.25s, transform 0.25s, font-size 0.25s;
+
+            &:hover, &:focus {
+                filter: grayscale(0) brightness(1);
+                transform: scale(1.5);
+                z-index: 100;
+                font-size: 0.75em;
+            }
+
+            .title {
+                display: block;
+                width: 100%;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-weight: bold;
+                margin-top: auto;
+            }
+
+            .timeAgo {
+                display: block;
+            }
+        }
+    }
+}
+
+@media (max-width: 1152px) {
+    .videos {
+        .videoGrid {
+            a {
+                &:hover {
+                    transform: scale(1.25);
+                }
+            }
         }
-      }
     }
-  }
 }

src/pages/videos.module.scss.d.ts

@@ -0,0 +1,4 @@
+export const timeAgo: string;
+export const title: string;
+export const videoGrid: string;
+export const videos: string;

src/scss/_base.scss

@@ -1,129 +0,0 @@
-@use 'variables';
-
-* {
-  box-sizing: border-box;
-}
-
-html, body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  font-family: $normalFont;
-  background: #15151f;
-  color: white;
-}
-
-
-h1, h2, h3, h4, h5, h6 {
-  margin: 0 0 1em 0;
-  font-family: $boldFont;
-  font-weight: 600;
-}
-
-h1 {
-  font-size: 3em;
-}
-
-h2 {
-  font-size: 1.75em;
-}
-
-h3 {
-  font-size: 1.5em;
-}
-
-h4 {
-  font-size: 1.25em;
-}
-
-h5 {
-  font-size: 1.15em;
-}
-
-h6 {
-  font-size: 1em;
-  opacity: .5;
-}
-hr {
-  border: none;
-  border-bottom: 2px solid rgba(128, 128, 128, .5);
-}
-
-ul, ol {
-  padding-left: 1.5em;
-
-  > li {
-    padding-left: .5em;
-  }
-}
-
-a {
-  color: $primaryColor;
-  text-decoration: underline dotted currentcolor;
-}
-
-pre {
-  padding: 16px;
-  background: rgba(128, 128, 128, .15);
-  border-radius: 5px;
-  line-height: 1.5;
-  font-family: $monospaceFont;
-}
-
-table {
-  display: block;
-  width: 100%;
-  overflow: auto;
-  border-spacing: 0;
-  border-collapse: collapse;
-  tr {
-    border-top: thin solid rgba(128, 128, 128, .35);
-
-    &:nth-child(2n) {
-      background: rgba(128, 128, 128, .15);
-    }
-
-    th {
-      font-weight: 600;
-    }
-
-    td, th {
-      border: thin solid rgba(128, 128, 128, .35);
-      padding: 6px 14px;
-    }
-  }
-}
-
-blockquote {
-  margin-left: 0;
-  padding-left: 20px;
-  border-left: 3px solid rgba(128, 128, 128, .5);
-  opacity: .7;
-  font-style: oblique;
-
-  > .quote-source {
-    display: block;
-    margin-left: 1em;
-    font-style: oblique;
-    opacity: .75;
-
-    &::before {
-      content: "-- ";
-    }
-  }
-}
-
-dl {
-  dt {
-    font-weight: 700;
-  }
-  dd {
-    font-style: oblique;
-  }
-}
-
-
-#___gatsby, #gatsby-focus-wrapper, .content {
-  height: 100%;
-}

src/scss/_variables.scss

@@ -1,6 +0,0 @@
-$boldFont: 'Montserrat', sans-serif;
-$normalFont: 'Open Sans', sans-serif;
-$primaryColor: #F95067;
-$monospaceFont: monospace;
-$layoutWidth: 1100px;
-$layoutPadding: 10px;

workers-site/index.js

@@ -1,4 +1,7 @@
-import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
+import {
+    getAssetFromKV,
+    mapRequestToAsset,
+} from "@cloudflare/kv-asset-handler";
 
 /**
  * The DEBUG flag will do two things that help during development:
@@ -7,55 +10,59 @@ import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
  * 2. we will return an error message on exception in your Response rather
  *    than the default 404.html page.
  */
-const DEBUG = false
+const DEBUG = false;
 
-addEventListener('fetch', event => {
+addEventListener("fetch", (event) => {
-  try {
+    try {
-    event.respondWith(handleEvent(event))
+        event.respondWith(handleEvent(event));
-  } catch (e) {
+    } catch (e) {
-    if (DEBUG) {
+        if (DEBUG) {
-      return event.respondWith(
+            return event.respondWith(
-        new Response(e.message || e.toString(), {
+                new Response(e.message || e.toString(), {
-          status: 500,
+                    status: 500,
-        }),
+                })
-      )
+            );
+        }
+        event.respondWith(new Response("Internal Error", { status: 500 }));
     }
-    event.respondWith(new Response('Internal Error', { status: 500 }))
+});
-  }
-})
 
 async function handleEvent(event) {
-  const url = new URL(event.request.url)
+    const url = new URL(event.request.url);
-  let options = {}
+    let options = {};
 
-  /**
+    /**
-   * You can add custom logic to how we fetch your assets
+     * You can add custom logic to how we fetch your assets
-   * by configuring the function `mapRequestToAsset`
+     * by configuring the function `mapRequestToAsset`
-   */
+     */
-  // options.mapRequestToAsset = handlePrefix(/^\/docs/)
+    // options.mapRequestToAsset = handlePrefix(/^\/docs/)
 
-  try {
+    try {
-    if (DEBUG) {
+        if (DEBUG) {
-      // customize caching
+            // customize caching
-      options.cacheControl = {
+            options.cacheControl = {
-        bypassCache: true,
+                bypassCache: true,
-      }
+            };
+        }
+        return await getAssetFromKV(event, options);
+    } catch (e) {
+        // if an error is thrown try to serve the asset at 404.html
+        if (!DEBUG) {
+            try {
+                let notFoundResponse = await getAssetFromKV(event, {
+                    mapRequestToAsset: (req) =>
+                        new Request(`${new URL(req.url).origin}/404.html`, req),
+                });
+
+                return new Response(notFoundResponse.body, {
+                    ...notFoundResponse,
+                    status: 404,
+                });
+            } catch (e) {}
+        }
+
+        return new Response(e.message || e.toString(), { status: 500 });
     }
-    return await getAssetFromKV(event, options)
-  } catch (e) {
-    // if an error is thrown try to serve the asset at 404.html
-    if (!DEBUG) {
-      try {
-        let notFoundResponse = await getAssetFromKV(event, {
-          mapRequestToAsset: req => new Request(`${new URL(req.url).origin}/404.html`, req),
-        })
-
-        return new Response(notFoundResponse.body, { ...notFoundResponse, status: 404 })
-      } catch (e) {}
-    }
-
-    return new Response(e.message || e.toString(), { status: 500 })
-  }
 }
 
 /**
@@ -66,15 +73,15 @@ async function handleEvent(event) {
  * to exist at a specific path.
  */
 function handlePrefix(prefix) {
-  return request => {
+    return (request) => {
-    // compute the default (e.g. / -> index.html)
+        // compute the default (e.g. / -> index.html)
-    let defaultAssetKey = mapRequestToAsset(request)
+        let defaultAssetKey = mapRequestToAsset(request);
-    let url = new URL(defaultAssetKey.url)
+        let url = new URL(defaultAssetKey.url);
 
-    // strip the prefix from the path for lookup
+        // strip the prefix from the path for lookup
-    url.pathname = url.pathname.replace(prefix, '/')
+        url.pathname = url.pathname.replace(prefix, "/");
 
-    // inherit all other props from the default request
+        // inherit all other props from the default request
-    return new Request(url.toString(), defaultAssetKey)
+        return new Request(url.toString(), defaultAssetKey);
-  }
+    };
-}
+}

yarn.lock

@@ -1040,6 +1040,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/noto-sans-display@^4.5.1":
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/@fontsource/noto-sans-display/-/noto-sans-display-4.5.1.tgz#a40cbe2c4d7589981ef3348f87a2e6d83ecbc972"
+  integrity sha512-+QNtGChngf5HbUiu1UTnzIfupEOXRZsklrUgr1XJ7QqIXvJvMrG798ukzy/0G8g0mUSdbD6libqKgLT25T7P5Q==
+
 "@gatsbyjs/reach-router@^1.3.6":
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/@gatsbyjs/reach-router/-/reach-router-1.3.6.tgz#4e8225836959be247890b66f21a3198a0589e34d"
@@ -1258,6 +1263,13 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
   integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
 
+"@icons-pack/react-simple-icons@^4.6.1":
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/@icons-pack/react-simple-icons/-/react-simple-icons-4.6.1.tgz#47e07a43ff90ce3ff7d64806cdac76fa68b986fc"
+  integrity sha512-ICONbofFzeTkXvmbnptDv4P9cqtW/N/8EFOqyzJQJ80b8fJoLzqhM7EKslBmWziIwjY9FBnOoL2ofzQOoDG1Gg==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@jimp/bmp@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@jimp/bmp/-/bmp-0.14.0.tgz#6df246026554f276f7b354047c6fff9f5b2b5182"
@@ -2599,6 +2611,11 @@ babel-helpers@^6.24.1:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
 
+babel-jsx-utils@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/babel-jsx-utils/-/babel-jsx-utils-1.1.0.tgz#304ce4fce0c86cbeee849551a45eb4ed1036381a"
+  integrity sha512-Mh1j/rw4xM9T3YICkw22aBQ78FhsHdsmlb9NEk4uVAFBOg+Ez9ZgXXHugoBPCZui3XLomk/7/JBBH4daJqTkQQ==
+
 babel-loader@^8.2.3:
   version "8.2.3"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.3.tgz#8986b40f1a64cacfcb4b8429320085ef68b1342d"
@@ -3213,7 +3230,7 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.3.0, chokidar@^3.5.2:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3718,6 +3735,18 @@ css-minimizer-webpack-plugin@^2.0.0:
     serialize-javascript "^5.0.1"
     source-map "^0.6.1"
 
+css-modules-loader-core@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16"
+  integrity sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=
+  dependencies:
+    icss-replace-symbols "1.1.0"
+    postcss "6.0.1"
+    postcss-modules-extract-imports "1.1.0"
+    postcss-modules-local-by-default "1.2.0"
+    postcss-modules-scope "1.1.0"
+    postcss-modules-values "1.3.0"
+
 css-select-base-adapter@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
@@ -3749,6 +3778,14 @@ css-selector-parser@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.4.1.tgz#03f9cb8a81c3e5ab2c51684557d5aaf6d2569759"
   integrity sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==
 
+css-selector-tokenizer@^0.7.0:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz#735f26186e67c749aaf275783405cf0661fae8f1"
+  integrity sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -4177,6 +4214,14 @@ domutils@^2.0.0, domutils@^2.5.2, domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 dot-prop@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
@@ -4910,6 +4955,11 @@ fastest-levenshtein@^1.0.12:
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
   integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
 
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 fastq@^1.13.0, fastq@^1.6.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
@@ -5318,6 +5368,25 @@ gatsby-page-utils@^2.6.0:
     lodash "^4.17.21"
     micromatch "^4.0.4"
 
+gatsby-plugin-image@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-image/-/gatsby-plugin-image-2.6.0.tgz#5342507be7fdd0109fc815c0f2906b0407a55e14"
+  integrity sha512-rWbIdkcopB02YIhR3UidoYhe2SDOFTpxzJSABq5TcLZ38FD8kth8QavvOO0h1ap9tWjaUNIjCvKRu2M3NvuC1g==
+  dependencies:
+    "@babel/code-frame" "^7.14.0"
+    "@babel/parser" "^7.15.5"
+    "@babel/runtime" "^7.15.4"
+    "@babel/traverse" "^7.15.4"
+    babel-jsx-utils "^1.1.0"
+    babel-plugin-remove-graphql-queries "^4.6.0"
+    camelcase "^5.3.1"
+    chokidar "^3.5.2"
+    common-tags "^1.8.2"
+    fs-extra "^10.0.0"
+    gatsby-core-utils "^3.6.0"
+    objectFitPolyfill "^2.3.5"
+    prop-types "^15.7.2"
+
 gatsby-plugin-manifest@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-4.6.0.tgz#73c69e980449af9a30d9a55ba919c49b1630c18a"
@@ -5452,7 +5521,7 @@ gatsby-source-filesystem@^1.5.27:
     slash "^1.0.0"
     valid-url "^1.0.9"
 
-gatsby-source-filesystem@^4.2.0:
+gatsby-source-filesystem@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-4.6.0.tgz#c8f19397a6f980b4d92bd57e8967f814b8b5d1de"
   integrity sha512-Ve6VfFJ4moTX7n8uDTGF7K07HdjWkWW7c9Bn1etcS2QcFRRMj/lxQ/2EFpgVM20jtZ60IG1vqnAzDabqz7UxXQ==
@@ -5835,7 +5904,7 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.2.0:
+glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6, glob@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
   integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
@@ -6093,6 +6162,11 @@ has-cors@1.1.0:
   resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
   integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=
 
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -6384,6 +6458,11 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+  integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
+
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
@@ -6462,6 +6541,11 @@ inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, i
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+inherits@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
 ini@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
@@ -8359,6 +8443,11 @@ object.values@^1.1.0, object.values@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
+objectFitPolyfill@^2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/objectFitPolyfill/-/objectFitPolyfill-2.3.5.tgz#be8c83064aabfa4e88780f776c2013c48ce1f745"
+  integrity sha512-8Quz071ZmGi0QWEG4xB3Bv5Lpw6K0Uca87FLoLMKMWjB6qIq9IyBegP3b/VLNxv2WYvIMGoeUQ+c6ibUkNa8TA==
+
 omggif@^1.0.10, omggif@^1.0.9:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/omggif/-/omggif-1.0.10.tgz#ddaaf90d4a42f532e9e7cb3a95ecdd47f17c7b19"
@@ -8550,6 +8639,14 @@ pako@^1.0.5:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
+param-case@^3.0.2:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -8737,6 +8834,14 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+path@^0.12.7:
+  version "0.12.7"
+  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
+  integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=
+  dependencies:
+    process "^0.11.1"
+    util "^0.10.3"
+
 peek-readable@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/peek-readable/-/peek-readable-4.0.2.tgz#a5cb847e347d3eccdc37642c82d2b4155c1ab8af"
@@ -8917,11 +9022,26 @@ postcss-minify-selectors@^5.1.2:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
+postcss-modules-extract-imports@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
+  integrity sha1-thTJcgvmgW6u41+zpfqh26agXds=
+  dependencies:
+    postcss "^6.0.1"
+
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
   integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
 
+postcss-modules-local-by-default@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
+  integrity sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
 postcss-modules-local-by-default@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
@@ -8931,6 +9051,14 @@ postcss-modules-local-by-default@^4.0.0:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.1.0"
 
+postcss-modules-scope@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
+  integrity sha1-1upkmUx5+XtipytCb75gVqGUu5A=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
 postcss-modules-scope@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
@@ -8938,6 +9066,14 @@ postcss-modules-scope@^3.0.0:
   dependencies:
     postcss-selector-parser "^6.0.4"
 
+postcss-modules-values@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
+  integrity sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^6.0.1"
+
 postcss-modules-values@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
@@ -9059,6 +9195,15 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
+  integrity sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=
+  dependencies:
+    chalk "^1.1.3"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
 postcss@7.0.36:
   version "7.0.36"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb"
@@ -9068,6 +9213,15 @@ postcss@7.0.36:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^6.0.1:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
 postcss@^7.0.27:
   version "7.0.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
@@ -9173,7 +9327,7 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-process@^0.11.10:
+process@^0.11.1, process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
@@ -9730,6 +9884,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reserved-words@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
+  integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=
+
 resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
@@ -10620,7 +10779,14 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^5.3.0:
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -11015,6 +11181,22 @@ type@^2.5.0:
   resolved "https://registry.yarnpkg.com/type/-/type-2.5.0.tgz#0a2e78c2e77907b252abe5f298c1b01c63f0db3d"
   integrity sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw==
 
+typed-scss-modules@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/typed-scss-modules/-/typed-scss-modules-4.1.2.tgz#41de1ec509de49ad28e516c4786ec92532acfda9"
+  integrity sha512-D2FZRC+KaKTEqqzeNRdMZnhjQcAOo9xNbGtuDKh2Q7BKJ9fuU2FKhs7z8lrIyt9nh5E3O6YWCXLufqcL8Zqg8w==
+  dependencies:
+    camelcase "^5.0.0"
+    chalk "^3.0.0"
+    chokidar "^3.3.0"
+    css-modules-loader-core "^1.1.0"
+    glob "^7.1.6"
+    param-case "^3.0.2"
+    path "^0.12.7"
+    reserved-words "^0.1.2"
+    slash "^3.0.0"
+    yargs "^15.0.2"
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@@ -11311,6 +11493,13 @@ util.promisify@~1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.0"
 
+util@^0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
 utila@~0.4:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
@@ -11693,7 +11882,7 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs@^15.4.1:
+yargs@^15.0.2, yargs@^15.4.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
   integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==