mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-06-12 15:42:18 +02:00
Initialize project and port basics
This commit is contained in:
commit
ebb4f4d515
31 changed files with 20401 additions and 0 deletions
42
src/layouts/default.js
Normal file
42
src/layouts/default.js
Normal file
|
@ -0,0 +1,42 @@
|
|||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import Navigation from "../components/navigation"
|
||||
import SEO from "../components/seo";
|
||||
|
||||
import "./default.scss";
|
||||
import {Link, Trans, useTranslation} from 'gatsby-plugin-react-i18next';
|
||||
import LanguageSwitcher from "../components/languageSwitcher";
|
||||
|
||||
class Layout extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<SEO description={this.props.description} lang={this.props.lang} meta={this.props.meta} title={this.props.title} />
|
||||
<Navigation isHome={this.props.module == "home"} module={this.props.module} />
|
||||
<div id="content" role="main">
|
||||
{this.props.children}
|
||||
</div>
|
||||
<footer role="contentinfo">CC-BY 4.0 Kevin Kandlbinder, <Link to="/legal/about" class="spf-link"><Trans i18nKey="imprint">Imprint</Trans></Link> | <Link to="/legal/datasec" class="spf-link"><Trans i18nKey="datasec">Data Protection</Trans></Link> | <Link to="/legal/disclaimer" class="spf-link"><Trans i18nKey="disclaimer">Disclaimer</Trans></Link> | <a href="#languageChooser">Language</a></footer>
|
||||
<div class="languageModal" id="languageChooser">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Layout.defaultProps = {
|
||||
module: `none`,
|
||||
meta: [],
|
||||
description: ``,
|
||||
}
|
||||
|
||||
Layout.propTypes = {
|
||||
description: PropTypes.string,
|
||||
lang: PropTypes.string,
|
||||
meta: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string.isRequired,
|
||||
module: PropTypes.string.isRequired
|
||||
}
|
||||
|
||||
export default Layout;
|
146
src/layouts/default.scss
Normal file
146
src/layouts/default.scss
Normal file
|
@ -0,0 +1,146 @@
|
|||
@import "../variables";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, html, #___gatsby, #gatsby-focus-wrapper {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
}
|
||||
|
||||
#gatsby-focus-wrapper {
|
||||
background: $background;
|
||||
color: $textColor;
|
||||
transition: background .25s, color .25s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: #000710;
|
||||
width: 100%;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: white;
|
||||
text-decoration: underline dotted currentColor;
|
||||
}
|
||||
|
||||
#content {
|
||||
/*min-height: calc(100vh - 26px);*/
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.topBar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: #000710;
|
||||
z-index: 999;
|
||||
transition: background .25s;
|
||||
}
|
||||
|
||||
.homeBar.homeBarTransparent {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.topBarInner {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.topBar a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
/*text-decoration: underline dotted white;*/
|
||||
text-decoration: none;
|
||||
border-top: 2px solid transparent;
|
||||
}
|
||||
|
||||
.topBar a:hover {
|
||||
border-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
.topBar a.active {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.flexSpacer {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section > div:not(.profile), section > article, .section > div:not(.profile), .section > article {
|
||||
max-width: $layoutWidth;
|
||||
width: 100%;
|
||||
padding: 39px 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
article p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
article h1, section > div > h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
article a {
|
||||
color: $accentColor;
|
||||
text-decoration: underline dotted currentColor;
|
||||
text-decoration-skip: none;
|
||||
}.languageModal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-webkit-transition: opacity .25s;
|
||||
-moz-transition: opacity .25s;
|
||||
-ms-transition: opacity .25s;
|
||||
-o-transition: opacity .25s;
|
||||
transition: opacity .25s;
|
||||
}
|
||||
|
||||
.languageModal:target {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.languageModalInner {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
background: black;
|
||||
font-family: 'Anonymous Pro', monospace;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.languageModalInner a {
|
||||
color: white;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
||||
.modalCloseLink {
|
||||
text-decoration: none;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue