mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-05-16 10:26:27 +02:00
Increase topbar-transparency when supporting blur
This commit is contained in:
GitHub
parent
5368d7bc3b
commit
8d153ff39b
2 changed files with 210 additions and 206 deletions
src/layouts
|
|
@ -1,45 +1,45 @@
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types"
|
||||||
import Navigation from "../components/navigation"
|
import Navigation from "../components/navigation"
|
||||||
import SEO from "../components/seo";
|
import SEO from "../components/seo";
|
||||||
|
|
||||||
import "./default.scss";
|
import "./default.scss";
|
||||||
import { Link, Trans } from 'gatsby-plugin-react-i18next';
|
import { Link, Trans } from 'gatsby-plugin-react-i18next';
|
||||||
import LanguageSwitcher from "../components/languageSwitcher";
|
import LanguageSwitcher from "../components/languageSwitcher";
|
||||||
|
|
||||||
class Layout extends React.Component {
|
class Layout extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SEO description={this.props.description} lang={this.props.lang} meta={this.props.meta} title={this.props.title} />
|
<SEO description={this.props.description} lang={this.props.lang} meta={this.props.meta} title={this.props.title} />
|
||||||
<Navigation isHome={this.props.transparentTopbar} module={this.props.module} />
|
<Navigation isHome={this.props.transparentTopbar} module={this.props.module} />
|
||||||
<div id="content" role="main">
|
<div id="content" role="main">
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</div>
|
</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>
|
<footer role="contentinfo">CC-BY 4.0 Kevin Kandlbinder, <Link to="/legal/about" className="spf-link"><Trans i18nKey="imprint">Imprint</Trans></Link> | <Link to="/legal/datasec" className="spf-link"><Trans i18nKey="datasec">Data Protection</Trans></Link> | <Link to="/legal/disclaimer" className="spf-link"><Trans i18nKey="disclaimer">Disclaimer</Trans></Link> | <a href="#languageChooser">Language</a></footer>
|
||||||
<div className="languageModal" id="languageChooser">
|
<div className="languageModal" id="languageChooser">
|
||||||
<LanguageSwitcher />
|
<LanguageSwitcher />
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Layout.defaultProps = {
|
Layout.defaultProps = {
|
||||||
module: `none`,
|
module: `none`,
|
||||||
meta: [],
|
meta: [],
|
||||||
description: ``,
|
description: ``,
|
||||||
transparentTopbar: false
|
transparentTopbar: false
|
||||||
}
|
}
|
||||||
|
|
||||||
Layout.propTypes = {
|
Layout.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,
|
||||||
module: PropTypes.string.isRequired,
|
module: PropTypes.string.isRequired,
|
||||||
transparentTopbar: PropTypes.bool,
|
transparentTopbar: PropTypes.bool,
|
||||||
children: PropTypes.any.isRequired
|
children: PropTypes.any.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Layout;
|
export default Layout;
|
||||||
|
|
@ -1,163 +1,167 @@
|
||||||
@import "../variables";
|
@import "../variables";
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body,
|
body,
|
||||||
html,
|
html,
|
||||||
#___gatsby,
|
#___gatsby,
|
||||||
#gatsby-focus-wrapper {
|
#gatsby-focus-wrapper {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
font-family: $mainFont;
|
font-family: $mainFont;
|
||||||
}
|
}
|
||||||
|
|
||||||
#gatsby-focus-wrapper {
|
#gatsby-focus-wrapper {
|
||||||
background: $background;
|
background: $background;
|
||||||
color: $textColor;
|
color: $textColor;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
background: darken($background, 1);
|
background: darken($background, 1);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: underline dotted currentColor;
|
text-decoration: underline dotted currentColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
/*min-height: calc(100vh - 26px);*/
|
/*min-height: calc(100vh - 26px);*/
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topBar {
|
.topBar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgba($background, .95);
|
background: rgba($background, .95);
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
transition: background .25s;
|
transition: background .25s;
|
||||||
|
|
||||||
.topBarInner {
|
@supports(backdrop-filter: blur(5px)) {
|
||||||
display: flex;
|
background: rgba($background, .9);
|
||||||
width: 100%;
|
}
|
||||||
max-width: $layoutWidth;
|
|
||||||
margin: auto;
|
.topBarInner {
|
||||||
|
display: flex;
|
||||||
> :first-child {
|
width: 100%;
|
||||||
padding-left: $layoutPadding;
|
max-width: $layoutWidth;
|
||||||
}
|
margin: auto;
|
||||||
|
|
||||||
> :last-child {
|
> :first-child {
|
||||||
padding-right: $layoutPadding;
|
padding-left: $layoutPadding;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
> :last-child {
|
||||||
display: block;
|
padding-right: $layoutPadding;
|
||||||
padding: 10px $layoutPadding;
|
}
|
||||||
color: white;
|
|
||||||
/*text-decoration: underline dotted white;*/
|
a {
|
||||||
text-decoration: none;
|
display: block;
|
||||||
border-top: 2px solid transparent;
|
padding: 10px $layoutPadding;
|
||||||
|
color: white;
|
||||||
&:hover {
|
/*text-decoration: underline dotted white;*/
|
||||||
border-color: rgba(255, 255, 255, .25);
|
text-decoration: none;
|
||||||
}
|
border-top: 2px solid transparent;
|
||||||
|
|
||||||
&.active {
|
&:hover {
|
||||||
border-color: white;
|
border-color: rgba(255, 255, 255, .25);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
&.active {
|
||||||
}
|
border-color: white;
|
||||||
|
}
|
||||||
.homeBar.homeBarTransparent {
|
}
|
||||||
background: transparent;
|
}
|
||||||
backdrop-filter: blur(0);
|
}
|
||||||
}
|
|
||||||
|
.homeBar.homeBarTransparent {
|
||||||
.flexSpacer {
|
background: transparent;
|
||||||
flex-grow: 1;
|
backdrop-filter: blur(0);
|
||||||
text-align: center;
|
}
|
||||||
}
|
|
||||||
|
.flexSpacer {
|
||||||
section>div:not(.profile),
|
flex-grow: 1;
|
||||||
section>article,
|
text-align: center;
|
||||||
.section>div:not(.profile),
|
}
|
||||||
.section>article {
|
|
||||||
max-width: $layoutWidth;
|
section>div:not(.profile),
|
||||||
width: 100%;
|
section>article,
|
||||||
padding: 39px 20px;
|
.section>div:not(.profile),
|
||||||
margin: 0 auto;
|
.section>article {
|
||||||
}
|
max-width: $layoutWidth;
|
||||||
|
width: 100%;
|
||||||
article {
|
padding: 39px 20px;
|
||||||
p {
|
margin: 0 auto;
|
||||||
text-align: justify;
|
}
|
||||||
}
|
|
||||||
|
article {
|
||||||
a {
|
p {
|
||||||
color: $accentColor;
|
text-align: justify;
|
||||||
text-decoration: underline dotted currentColor;
|
}
|
||||||
text-decoration-skip: none;
|
|
||||||
}
|
a {
|
||||||
}
|
color: $accentColor;
|
||||||
|
text-decoration: underline dotted currentColor;
|
||||||
h1 {
|
text-decoration-skip: none;
|
||||||
font-size: 2em;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.languageModal {
|
h1 {
|
||||||
position: fixed;
|
font-size: 2em;
|
||||||
top: 0;
|
}
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
.languageModal {
|
||||||
height: 100%;
|
position: fixed;
|
||||||
background: rgba(0, 0, 0, .7);
|
top: 0;
|
||||||
z-index: 1000;
|
left: 0;
|
||||||
opacity: 0;
|
width: 100%;
|
||||||
pointer-events: none;
|
height: 100%;
|
||||||
transition: opacity .25s;
|
background: rgba(0, 0, 0, .7);
|
||||||
|
z-index: 1000;
|
||||||
&:target {
|
opacity: 0;
|
||||||
opacity: 1;
|
pointer-events: none;
|
||||||
pointer-events: auto;
|
transition: opacity .25s;
|
||||||
}
|
|
||||||
|
&:target {
|
||||||
.languageModalInner {
|
opacity: 1;
|
||||||
position: fixed;
|
pointer-events: auto;
|
||||||
top: 50%;
|
}
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
.languageModalInner {
|
||||||
color: white;
|
position: fixed;
|
||||||
background: black;
|
top: 50%;
|
||||||
font-family: $mainFont;
|
left: 50%;
|
||||||
padding: 20px;
|
transform: translate(-50%, -50%);
|
||||||
border-radius: 5px;
|
color: white;
|
||||||
|
background: black;
|
||||||
a {
|
font-family: $mainFont;
|
||||||
color: white;
|
padding: 20px;
|
||||||
text-decoration-style: dotted;
|
border-radius: 5px;
|
||||||
}
|
|
||||||
|
a {
|
||||||
}
|
color: white;
|
||||||
|
text-decoration-style: dotted;
|
||||||
.modalCloseLink {
|
}
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modalCloseLink {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue