kevin/Unkn0wnCat.net
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/Unkn0wnCat.net.git synced 2025-07-26 21:08:13 +02:00
Code Issues Projects Releases Wiki Activity

Redesign layout and frontpage

Browse source
This commit is contained in:
Kevin Kandlbinder 2022-01-25 20:09:01 +01:00
parent 61ab21f4d8
commit 9d78864e5d
28 changed files with 2635 additions and 763 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/layout.js
View file

@ -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

38
src/components/layout.module.scss
View file

@ -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;
}
}
}

27
src/components/navbar.js
View file

@ -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

45
src/components/navbar.module.scss
View file

@ -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;
}
}
}
}

142
src/components/seo.js
View file

@ -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;