mirror of
https://github.com/Unkn0wnCat/Unkn0wnCat.net.git
synced 2025-05-21 04:46:31 +02:00
Redesign layout and frontpage
This commit is contained in:
parent
61ab21f4d8
commit
9d78864e5d
28 changed files with 2635 additions and 763 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 4,
|
||||
"semi": true,
|
||||
"singleQuote": false,
|
||||
"endOfLine": "lf"
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 4,
|
||||
"semi": true,
|
||||
"singleQuote": false,
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
# Unkn0wnCat.net
|
||||
*Made using Gatsby and Cloudflare Workers*
|
||||
|
||||
_Made using Gatsby and Cloudflare Workers_
|
||||
|
||||
|
||||
This repository contains the code used to run the website Unkn0wnCat.net.
|
||||
|
|
|
|||
1601
dist/main.js
vendored
1601
dist/main.js
vendored
File diff suppressed because one or more lines are too long
103
gatsby-config.js
103
gatsby-config.js
|
|
@ -1,51 +1,61 @@
|
|||
try {
|
||||
require('dotenv').config();
|
||||
} catch(e) {}
|
||||
require("dotenv").config();
|
||||
} catch (e) {}
|
||||
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: `Unkn0wnCat.net`,
|
||||
description: `A german gamer, coder, video editor.`,
|
||||
author: `@Unkn0wnKevin`,
|
||||
siteUrl: `https://unkn0wncat.net`,
|
||||
},
|
||||
plugins: [
|
||||
`gatsby-plugin-react-helmet`,
|
||||
{
|
||||
resolve: `gatsby-plugin-sitemap`,
|
||||
options: {
|
||||
output: `/sitemap.xml`,
|
||||
createLinkInHead: true
|
||||
}
|
||||
siteMetadata: {
|
||||
title: `Unkn0wnCat.net`,
|
||||
description: `A german gamer, coder, video editor.`,
|
||||
author: `@Unkn0wnKevin`,
|
||||
siteUrl: `https://unkn0wncat.net`,
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-sass`
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `images`,
|
||||
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`,
|
||||
/*{
|
||||
plugins: [
|
||||
{
|
||||
resolve: `gatsby-plugin-typescript`,
|
||||
options: {
|
||||
isTSX: true,
|
||||
allExtensions: true,
|
||||
},
|
||||
},
|
||||
`gatsby-plugin-image`,
|
||||
`gatsby-plugin-sharp`,
|
||||
`gatsby-transformer-sharp`,
|
||||
`gatsby-plugin-react-helmet`,
|
||||
{
|
||||
resolve: `gatsby-plugin-sitemap`,
|
||||
options: {
|
||||
output: `/sitemap.xml`,
|
||||
createLinkInHead: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-sass`,
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `images`,
|
||||
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'
|
||||
},
|
||||
},*/
|
||||
|
||||
],
|
||||
}
|
||||
],
|
||||
};
|
||||
|
|
|
|||
14
package.json
14
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",
|
||||
|
|
|
|||
31
src/_globals.scss
Normal file
31
src/_globals.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
BIN
src/assets/chibi_nobg.png
Normal file
BIN
src/assets/chibi_nobg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
|
|
@ -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>© 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
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,84 +5,84 @@
|
|||
* See: https://www.gatsbyjs.org/docs/use-static-query/
|
||||
*/
|
||||
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { Helmet } from "react-helmet"
|
||||
import { useStaticQuery, graphql } from "gatsby"
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Helmet } from "react-helmet";
|
||||
import { useStaticQuery, graphql } from "gatsby";
|
||||
|
||||
function SEO({ description, lang, meta, title }) {
|
||||
const { site } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
author
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
)
|
||||
const { site } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
author
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
);
|
||||
|
||||
const metaDescription = description || site.siteMetadata.description
|
||||
const metaDescription = description || site.siteMetadata.description;
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
htmlAttributes={{
|
||||
lang,
|
||||
}}
|
||||
title={title}
|
||||
titleTemplate={`%s | ${site.siteMetadata.title}`}
|
||||
meta={[
|
||||
{
|
||||
name: `description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
property: `og:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:type`,
|
||||
content: `website`,
|
||||
},
|
||||
{
|
||||
name: `twitter:card`,
|
||||
content: `summary`,
|
||||
},
|
||||
{
|
||||
name: `twitter:creator`,
|
||||
content: site.siteMetadata.author,
|
||||
},
|
||||
{
|
||||
name: `twitter:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
name: `twitter:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
].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>
|
||||
)
|
||||
return (
|
||||
<Helmet
|
||||
htmlAttributes={{
|
||||
lang,
|
||||
}}
|
||||
title={title || site.siteMetadata.title}
|
||||
titleTemplate={`%s | ${site.siteMetadata.title}`}
|
||||
meta={[
|
||||
{
|
||||
name: `description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
property: `og:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:type`,
|
||||
content: `website`,
|
||||
},
|
||||
{
|
||||
name: `twitter:card`,
|
||||
content: `summary`,
|
||||
},
|
||||
{
|
||||
name: `twitter:creator`,
|
||||
content: site.siteMetadata.author,
|
||||
},
|
||||
{
|
||||
name: `twitter:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
name: `twitter:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
].concat(meta)}
|
||||
></Helmet>
|
||||
);
|
||||
}
|
||||
|
||||
SEO.defaultProps = {
|
||||
lang: `en`,
|
||||
meta: [],
|
||||
description: ``,
|
||||
}
|
||||
lang: `en`,
|
||||
meta: [],
|
||||
description: ``,
|
||||
};
|
||||
|
||||
SEO.propTypes = {
|
||||
description: PropTypes.string,
|
||||
lang: PropTypes.string,
|
||||
meta: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string.isRequired,
|
||||
}
|
||||
description: PropTypes.string,
|
||||
lang: PropTypes.string,
|
||||
meta: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default SEO
|
||||
export default SEO;
|
||||
|
|
|
|||
153
src/index.scss
Normal file
153
src/index.scss
Normal file
|
|
@ -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%;
|
||||
}
|
||||
4
src/index.scss.d.ts
vendored
Normal file
4
src/index.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export const content: string;
|
||||
export const gatsby: string;
|
||||
export const gatsbyFocusWrapper: string;
|
||||
export const quoteSource: string;
|
||||
72
src/layouts/DefaultLayout.module.scss
Normal file
72
src/layouts/DefaultLayout.module.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
6
src/layouts/DefaultLayout.module.scss.d.ts
vendored
Normal file
6
src/layouts/DefaultLayout.module.scss.d.ts
vendored
Normal file
|
|
@ -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;
|
||||
70
src/layouts/DefaultLayout.tsx
Normal file
70
src/layouts/DefaultLayout.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
<SEO title="404: Not found" />
|
||||
<section style={{flexGrow: 1}}>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
)
|
||||
<div>
|
||||
<SEO title="404: Not found" />
|
||||
<section style={{ flexGrow: 1 }}>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default NotFoundPage
|
||||
export default NotFoundPage;
|
||||
|
|
|
|||
|
|
@ -1,80 +1,56 @@
|
|||
import React from "react"
|
||||
import { graphql } from 'gatsby'
|
||||
import React from "react";
|
||||
import { graphql } from "gatsby";
|
||||
|
||||
import Layout from "../components/layout"
|
||||
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 SEO from "../components/seo";
|
||||
|
||||
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) {
|
||||
return {
|
||||
backgroundImage: "linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url("+image+")"
|
||||
};
|
||||
}
|
||||
const IndexPage = ({ data }) => <Layout topBarHome={true}>
|
||||
<div className={styles.heroOuter}>
|
||||
<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­Cat</span>
|
||||
<span className={styles.description}>Gamer, Coder, Video Producer</span>
|
||||
|
||||
const IndexPage = ({ data }) => (
|
||||
<Layout noNavSpacer={true}>
|
||||
<SEO title="Home" />
|
||||
<div className={styles.hero}>
|
||||
<div>
|
||||
<span className={styles.title}>Unkn0wnCat</span>
|
||||
<span className={styles.subtitle}>Gamer, Coder, Editor</span>
|
||||
</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>
|
||||
<a href="https://www.youtube.com/channel/UCCoZp-6_P3CVFj4clQ6uaeg" target="_blank" rel="noreferrer"><Youtube/> Unkn0wnCat</a>
|
||||
<a href="https://www.twitch.tv/thatunkn0wncat" target="_blank" rel="noreferrer"><Twitch/> ThatUnkn0wnCat</a>
|
||||
<a href="https://twitter.com/Unkn0wnKevin" target="_blank" rel="noreferrer"><Twitter/> @Unkn0wnKevin</a>
|
||||
<a href="https://steamcommunity.com/id/unkn0wncat" target="_blank" rel="noreferrer"><Steam/> Unkn0wnCat</a>
|
||||
<a href="https://twitter.com/Unkn0wnKevin" target="_blank" rel="noreferrer"><Twitter/> @Unkn0wnKevin</a>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
</Layout>
|
||||
)
|
||||
</div>
|
||||
</Layout>;
|
||||
|
||||
export const query = graphql`
|
||||
query {
|
||||
allMarkdownRemark(
|
||||
filter: {fileAbsolutePath: {regex: "/home_about.md$/"}}
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
html
|
||||
}
|
||||
query {
|
||||
allMarkdownRemark(
|
||||
filter: { fileAbsolutePath: { regex: "/home_about.md$/" } }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
html
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export default IndexPage
|
||||
export default IndexPage;
|
||||
|
|
|
|||
|
|
@ -1,143 +1,122 @@
|
|||
@import 'src/scss/variables';
|
||||
@import 'src/scss/base';
|
||||
@import "../globals";
|
||||
|
||||
.hero {
|
||||
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;
|
||||
$layoutTwoColBreakpoint: 800px;
|
||||
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
color: transparent;
|
||||
.heroOuter {
|
||||
|
||||
.hero {
|
||||
margin-top: -$layoutNavHeight;
|
||||
|
||||
|
||||
height: 100%;
|
||||
min-height: 900px;
|
||||
|
||||
|
||||
position: relative;
|
||||
|
||||
&.title {
|
||||
font-size: 4em;
|
||||
font-family: $boldFont;
|
||||
font-weight: 900;
|
||||
}
|
||||
.heroHalo {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
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 {
|
||||
font-size: 1.5em;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.hero {
|
||||
font-size: .8em;
|
||||
> div {
|
||||
left: 0;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 420px) {
|
||||
.hero {
|
||||
> div {
|
||||
> span.title {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 320px) {
|
||||
.hero {
|
||||
> div {
|
||||
> span.title {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social {
|
||||
text-align: left;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.socialGrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
> a {
|
||||
text-decoration: none;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background: white;
|
||||
margin: 10px 20px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
transform: scale(1);
|
||||
transition: transform .25s;
|
||||
flex-direction: column;
|
||||
|
||||
> span.handle {
|
||||
color: white;
|
||||
opacity: .5;
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
margin: auto 10px -5px auto;
|
||||
transition: opacity .25s;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
> span.service {
|
||||
color: white;
|
||||
opacity: .5;
|
||||
font-family: $boldFont;
|
||||
font-weight: 900;
|
||||
font-size: 3em;
|
||||
text-align: right;
|
||||
transition: opacity .25s;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
> span {
|
||||
opacity: 1;
|
||||
@media (max-width: $layoutTwoColBreakpoint) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.heroImage {
|
||||
position: absolute;
|
||||
transform: translate(-130%, 0);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
height: 90%;
|
||||
max-width: 330px;
|
||||
width: 30%;
|
||||
transition: width .25s;
|
||||
|
||||
@media (max-width: $layoutTwoColBreakpoint) {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.heroBox, .heroBoxBg {
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
transition: transform .25s, clip-path .25s, width .25s, height .25s;
|
||||
|
||||
@media (max-width: $layoutTwoColBreakpoint) {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
clip-path: polygon(0 0,100% 0,100% 100%,0 100%) !important;
|
||||
|
||||
&.heroBoxBg {
|
||||
height: 410px;
|
||||
transform: translate(-50%, -5px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.heroBox {
|
||||
width: calc(100% - 10px);
|
||||
}
|
||||
|
||||
> div {
|
||||
transform: rotate(0deg) !important;
|
||||
padding: $layoutPadding !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heroBox {
|
||||
clip-path: polygon(6% 8%,88% 5%,95% 91%,7% 96%);
|
||||
background-color: var(--color-primary-lighter);
|
||||
color: white;
|
||||
|
||||
> div {
|
||||
transform: rotate(-2deg);
|
||||
padding: 45px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform .25s, padding .25s;
|
||||
|
||||
.name {
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
svg {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
8
src/pages/index.module.scss.d.ts
vendored
Normal file
8
src/pages/index.module.scss.d.ts
vendored
Normal file
|
|
@ -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;
|
||||
|
|
@ -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) {
|
||||
return {
|
||||
backgroundImage: "linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .75)), url("+image+")"
|
||||
};
|
||||
}
|
||||
const makeStyle = function (image) {
|
||||
return {
|
||||
backgroundImage:
|
||||
"linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .75)), url(" +
|
||||
image +
|
||||
")",
|
||||
};
|
||||
};
|
||||
|
||||
const VideoPage = ({ data }) => (
|
||||
<Layout>
|
||||
<SEO title="Videos" />
|
||||
<section style={{flexGrow: 1}} className={styles.videos}>
|
||||
<div>
|
||||
<h1>Videos</h1>
|
||||
<div className={styles.videoGrid}>
|
||||
{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"}>
|
||||
<span className={styles.title}>{node.title.replace(/ *\[[^)]*\] */g, "").replace(/\| Unkn0wnCat/g, "")}</span>
|
||||
<span className={styles.timeAgo}>{node.publishedAt}</span>
|
||||
</a>
|
||||
))}
|
||||
<Layout>
|
||||
<SEO title="Videos" />
|
||||
<div className={styles.videos}>
|
||||
<div>
|
||||
<h1>Videos</h1>
|
||||
<div className={styles.videoGrid}>
|
||||
{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"}
|
||||
>
|
||||
<span className={styles.title}>
|
||||
{node.title
|
||||
.replace(/ *\[[^)]*\] */g, "")
|
||||
.replace(/\| Unkn0wnCat/g, "")}
|
||||
</span>
|
||||
<span className={styles.timeAgo}>
|
||||
{node.publishedAt}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
)
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export const query = graphql`
|
||||
query {
|
||||
allYoutubeVideo {
|
||||
nodes {
|
||||
channelTitle
|
||||
title
|
||||
videoId
|
||||
localThumbnail {
|
||||
publicURL
|
||||
query {
|
||||
allYoutubeVideo {
|
||||
nodes {
|
||||
channelTitle
|
||||
title
|
||||
videoId
|
||||
localThumbnail {
|
||||
publicURL
|
||||
}
|
||||
description
|
||||
publishedAt(fromNow: true)
|
||||
}
|
||||
}
|
||||
description
|
||||
publishedAt(fromNow: true)
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default VideoPage
|
||||
export default VideoPage;
|
||||
|
|
|
|||
|
|
@ -1,60 +1,63 @@
|
|||
@use "sass:math";
|
||||
@import "../globals";
|
||||
|
||||
$boxWidth: 300px;
|
||||
|
||||
.videos {
|
||||
.videoGrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
@include layoutBox;
|
||||
|
||||
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 {
|
||||
&:hover {
|
||||
transform: scale(1.25);
|
||||
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(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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
src/pages/videos.module.scss.d.ts
vendored
Normal file
4
src/pages/videos.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export const timeAgo: string;
|
||||
export const title: string;
|
||||
export const videoGrid: string;
|
||||
export const videos: string;
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
$boldFont: 'Montserrat', sans-serif;
|
||||
$normalFont: 'Open Sans', sans-serif;
|
||||
$primaryColor: #F95067;
|
||||
$monospaceFont: monospace;
|
||||
$layoutWidth: 1100px;
|
||||
$layoutPadding: 10px;
|
||||
|
|
@ -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 => {
|
||||
try {
|
||||
event.respondWith(handleEvent(event))
|
||||
} catch (e) {
|
||||
if (DEBUG) {
|
||||
return event.respondWith(
|
||||
new Response(e.message || e.toString(), {
|
||||
status: 500,
|
||||
}),
|
||||
)
|
||||
addEventListener("fetch", (event) => {
|
||||
try {
|
||||
event.respondWith(handleEvent(event));
|
||||
} catch (e) {
|
||||
if (DEBUG) {
|
||||
return event.respondWith(
|
||||
new Response(e.message || e.toString(), {
|
||||
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)
|
||||
let options = {}
|
||||
const url = new URL(event.request.url);
|
||||
let options = {};
|
||||
|
||||
/**
|
||||
* You can add custom logic to how we fetch your assets
|
||||
* by configuring the function `mapRequestToAsset`
|
||||
*/
|
||||
// options.mapRequestToAsset = handlePrefix(/^\/docs/)
|
||||
/**
|
||||
* You can add custom logic to how we fetch your assets
|
||||
* by configuring the function `mapRequestToAsset`
|
||||
*/
|
||||
// options.mapRequestToAsset = handlePrefix(/^\/docs/)
|
||||
|
||||
try {
|
||||
if (DEBUG) {
|
||||
// customize caching
|
||||
options.cacheControl = {
|
||||
bypassCache: true,
|
||||
}
|
||||
try {
|
||||
if (DEBUG) {
|
||||
// customize caching
|
||||
options.cacheControl = {
|
||||
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 => {
|
||||
// compute the default (e.g. / -> index.html)
|
||||
let defaultAssetKey = mapRequestToAsset(request)
|
||||
let url = new URL(defaultAssetKey.url)
|
||||
return (request) => {
|
||||
// compute the default (e.g. / -> index.html)
|
||||
let defaultAssetKey = mapRequestToAsset(request);
|
||||
let url = new URL(defaultAssetKey.url);
|
||||
|
||||
// strip the prefix from the path for lookup
|
||||
url.pathname = url.pathname.replace(prefix, '/')
|
||||
// strip the prefix from the path for lookup
|
||||
url.pathname = url.pathname.replace(prefix, "/");
|
||||
|
||||
// inherit all other props from the default request
|
||||
return new Request(url.toString(), defaultAssetKey)
|
||||
}
|
||||
}
|
||||
// inherit all other props from the default request
|
||||
return new Request(url.toString(), defaultAssetKey);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
201
yarn.lock
201
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==
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue