mirror of
https://github.com/Unkn0wnCat/Unkn0wnCat.net.git
synced 2025-04-28 17:56:47 +02:00
Lay out basic homepage
This commit is contained in:
parent
d3d5d0bd56
commit
1df7c7cb65
8 changed files with 297 additions and 12 deletions
|
|
@ -18,7 +18,7 @@
|
|||
"format": "prettier --write --ignore-unknown ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource/nunito": "^4.5.11",
|
||||
"@fontsource/roboto-flex": "^4.5.2",
|
||||
"@mdx-js/react": "^2.1.5",
|
||||
"gatsby": "^5.0.0",
|
||||
"gatsby-plugin-image": "^3.2.0",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,14 @@
|
|||
@mixin vars {
|
||||
--color-base: white;
|
||||
--color-splash: #234ef6;
|
||||
|
||||
--layout-width: 1000px;
|
||||
--layout-padding: 20px;
|
||||
--layout-slant: -30deg;
|
||||
}
|
||||
|
||||
@mixin boxConstraints {
|
||||
max-width: var(--layout-width);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
@use "@fontsource/nunito/scss/mixins" as Nunito;
|
||||
@use "@fontsource/roboto-flex/scss/mixins" as RobotoFlex;
|
||||
@import "./global";
|
||||
|
||||
@include Nunito.fontFaceVariable($type: "wghtOnly");
|
||||
@include RobotoFlex.fontFaceVariable($type: "full");
|
||||
|
||||
:root {
|
||||
@include vars;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
|
|
@ -10,7 +15,8 @@
|
|||
|
||||
html,
|
||||
body,
|
||||
#___gatsby {
|
||||
#___gatsby,
|
||||
#gatsby-focus-wrapper {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
|
|
@ -18,5 +24,13 @@ body,
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: "NunitoVariable", "Nunito", "Nunito Sans", sans-serif;
|
||||
font-family: "Roboto FlexVariable", "RobotoVariable", "Roboto Flex",
|
||||
"Roboto", sans-serif;
|
||||
color: var(--color-splash);
|
||||
background-color: var(--color-base);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: underline dotted currentColor;
|
||||
}
|
||||
|
|
|
|||
58
src/layout/Layout.module.scss
Normal file
58
src/layout/Layout.module.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
@import "../global";
|
||||
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.navigation {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 900;
|
||||
background-color: var(--color-base);
|
||||
|
||||
> .navigationBorder {
|
||||
max-width: var(--layout-width);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin-top: -10px;
|
||||
height: 15px;
|
||||
background-image: repeating-linear-gradient(
|
||||
var(--layout-slant),
|
||||
white 0px,
|
||||
var(--color-splash) 0.5px 3px,
|
||||
white 3.5px 12px
|
||||
);
|
||||
}
|
||||
|
||||
> nav {
|
||||
max-width: var(--layout-width);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
z-index: 905;
|
||||
|
||||
a {
|
||||
padding: var(--layout-padding);
|
||||
text-decoration: none;
|
||||
font-size: 1.3em;
|
||||
font-weight: 700;
|
||||
|
||||
&.logo {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: var(--layout-padding);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
36
src/layout/Layout.tsx
Normal file
36
src/layout/Layout.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import { Link } from "gatsby";
|
||||
import React from "react";
|
||||
|
||||
import "../index.scss";
|
||||
import * as styles from "./Layout.module.scss";
|
||||
|
||||
const Layout = ({ children }: React.PropsWithChildren<{}>) => {
|
||||
return (
|
||||
<div className={styles.layout}>
|
||||
<div className={styles.navigation}>
|
||||
<nav>
|
||||
<Link to="/" className={styles.logo}>
|
||||
Unkn0wnCat.net
|
||||
</Link>
|
||||
<Link to="/videos">Videos</Link>
|
||||
</nav>
|
||||
<div className={styles.navigationBorder} />
|
||||
</div>
|
||||
<div role="main" className={styles.main}>
|
||||
{children}
|
||||
</div>
|
||||
<footer>
|
||||
© CC-BY-4.0 Kevin Kandlbinder |{" "}
|
||||
<a
|
||||
href="https://kevink.dev/legal/about"
|
||||
target="_blank"
|
||||
rel="noreferer"
|
||||
>
|
||||
Imprint
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
100
src/pages/index.module.scss
Normal file
100
src/pages/index.module.scss
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
@import "../global";
|
||||
|
||||
.container {
|
||||
@include boxConstraints;
|
||||
padding-top: var(--layout-padding);
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
min-height: 80vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> * {
|
||||
width: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chibi {
|
||||
> .imgWrapper {
|
||||
max-height: 80vh;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
> div {
|
||||
object-fit: contain;
|
||||
height: 100%;
|
||||
max-height: 80vh;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
transition: width 0.25s;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: 0px;
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
transition: width 0.25s;
|
||||
max-width: 400px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.infoTitle {
|
||||
display: block;
|
||||
font-size: 3em;
|
||||
font-weight: 900;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
.tagLine {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
font-variation-settings: "wdth" 151;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.impactLine {
|
||||
margin: 7px 0;
|
||||
height: 3px;
|
||||
background-color: var(--color-splash);
|
||||
}
|
||||
|
||||
.impactBox {
|
||||
height: 90px;
|
||||
background-image: repeating-linear-gradient(
|
||||
var(--layout-slant),
|
||||
white 0px,
|
||||
var(--color-splash) 0.5px 3px,
|
||||
white 3.5px 12px
|
||||
);
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--layout-padding);
|
||||
padding: var(--layout-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.artCredit {
|
||||
transition: opacity 0.25s;
|
||||
padding: var(--layout-padding);
|
||||
|
||||
@media (max-width: 800px) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,78 @@
|
|||
import * as React from "react";
|
||||
import type { HeadFC, PageProps } from "gatsby";
|
||||
import Layout from "../layout/Layout";
|
||||
|
||||
import * as styles from "./index.module.scss";
|
||||
import { StaticImage } from "gatsby-plugin-image";
|
||||
|
||||
const IndexPage: React.FC<PageProps> = () => {
|
||||
return (
|
||||
<div>
|
||||
<span>Unkn0wnCat.net</span>
|
||||
</div>
|
||||
<Layout>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.hero}>
|
||||
<div className={styles.chibi}>
|
||||
<div className={styles.imgWrapper}>
|
||||
<StaticImage
|
||||
src="../images/chibi_nobg.png"
|
||||
placeholder="blurred"
|
||||
quality={80}
|
||||
alt="Chibi drawing of Unkn0wnCat created by @Pericote9"
|
||||
layout="constrained"
|
||||
objectFit="contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.info}>
|
||||
<span className={styles.infoTitle}>Unkn0wnCat</span>
|
||||
<div className={styles.impactLine} />
|
||||
<span className={styles.tagLine}>
|
||||
Gamer - Coder - Video Producer
|
||||
</span>
|
||||
<div className={styles.impactLine} />
|
||||
<div className={styles.links}>
|
||||
<a
|
||||
href="https://www.youtube.com/channel/UCCoZp-6_P3CVFj4clQ6uaeg"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Unkn0wnCat
|
||||
</a>
|
||||
<a
|
||||
href="https://www.twitch.tv/thatunkn0wncat"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
ThatUnkn0wnCat
|
||||
</a>
|
||||
<a
|
||||
href="https://steamcommunity.com/id/unkn0wncat"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Unkn0wnCat
|
||||
</a>
|
||||
<a
|
||||
href="https://kreig.de/de/members/75eec884-c9fc-4626-82bd-f0fdaaa1a4c0"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
My Clan (KREIG)
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.impactBox} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
className={styles.artCredit}
|
||||
href="https://twitter.com/Pericote9"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
Chibi drawn by @Pericote9
|
||||
</a>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1071,10 +1071,10 @@
|
|||
minimatch "^3.0.4"
|
||||
strip-json-comments "^3.1.1"
|
||||
|
||||
"@fontsource/nunito@^4.5.11":
|
||||
version "4.5.11"
|
||||
resolved "https://registry.yarnpkg.com/@fontsource/nunito/-/nunito-4.5.11.tgz#0992075ddc3f3ed8e3e83bf5944b1b0efd4c24dd"
|
||||
integrity sha512-j2WIvzsI+6wjbJ/gQjyHJL/SYZxyg1qomvRswMZAWj2lvv+eX4kzJOSbr9YhZLYywoMspYb0643EO4cHRy6zpQ==
|
||||
"@fontsource/roboto-flex@^4.5.2":
|
||||
version "4.5.2"
|
||||
resolved "https://registry.yarnpkg.com/@fontsource/roboto-flex/-/roboto-flex-4.5.2.tgz#f487bd75a52c9fcb3a77d05b10766afbe5c77393"
|
||||
integrity sha512-GYG8WbC9K8HdIYwIzgPb7dc4CrMMb0QUOP6IYPeuVvd33PyZRvVvu1CvRzXhqbI+trV37Ti3WBCfJJl9RvsVTQ==
|
||||
|
||||
"@gatsbyjs/parcel-namer-relative-to-cwd@^2.2.0":
|
||||
version "2.2.0"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue