mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-05-12 16:37:00 +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
|
|
@ -1,45 +1,45 @@
|
|||
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 } 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.transparentTopbar} 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 className="languageModal" id="languageChooser">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Layout.defaultProps = {
|
||||
module: `none`,
|
||||
meta: [],
|
||||
description: ``,
|
||||
transparentTopbar: false
|
||||
}
|
||||
|
||||
Layout.propTypes = {
|
||||
description: PropTypes.string,
|
||||
lang: PropTypes.string,
|
||||
meta: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string.isRequired,
|
||||
module: PropTypes.string.isRequired,
|
||||
transparentTopbar: PropTypes.bool,
|
||||
children: PropTypes.any.isRequired
|
||||
}
|
||||
|
||||
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 } 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.transparentTopbar} 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" 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">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Layout.defaultProps = {
|
||||
module: `none`,
|
||||
meta: [],
|
||||
description: ``,
|
||||
transparentTopbar: false
|
||||
}
|
||||
|
||||
Layout.propTypes = {
|
||||
description: PropTypes.string,
|
||||
lang: PropTypes.string,
|
||||
meta: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string.isRequired,
|
||||
module: PropTypes.string.isRequired,
|
||||
transparentTopbar: PropTypes.bool,
|
||||
children: PropTypes.any.isRequired
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
|
|
@ -1,163 +1,167 @@
|
|||
@import "../variables";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
#___gatsby,
|
||||
#gatsby-focus-wrapper {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: $mainFont;
|
||||
}
|
||||
|
||||
#gatsby-focus-wrapper {
|
||||
background: $background;
|
||||
color: $textColor;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: darken($background, 1);
|
||||
width: 100%;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
|
||||
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: rgba($background, .95);
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 999;
|
||||
transition: background .25s;
|
||||
|
||||
.topBarInner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: $layoutWidth;
|
||||
margin: auto;
|
||||
|
||||
> :first-child {
|
||||
padding-left: $layoutPadding;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
padding-right: $layoutPadding;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px $layoutPadding;
|
||||
color: white;
|
||||
/*text-decoration: underline dotted white;*/
|
||||
text-decoration: none;
|
||||
border-top: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.homeBar.homeBarTransparent {
|
||||
background: transparent;
|
||||
backdrop-filter: blur(0);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $accentColor;
|
||||
text-decoration: underline dotted currentColor;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: opacity .25s;
|
||||
|
||||
&:target {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.languageModalInner {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
background: black;
|
||||
font-family: $mainFont;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.modalCloseLink {
|
||||
text-decoration: none;
|
||||
}
|
||||
@import "../variables";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
#___gatsby,
|
||||
#gatsby-focus-wrapper {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: $mainFont;
|
||||
}
|
||||
|
||||
#gatsby-focus-wrapper {
|
||||
background: $background;
|
||||
color: $textColor;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: darken($background, 1);
|
||||
width: 100%;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
|
||||
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: rgba($background, .95);
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 999;
|
||||
transition: background .25s;
|
||||
|
||||
@supports(backdrop-filter: blur(5px)) {
|
||||
background: rgba($background, .9);
|
||||
}
|
||||
|
||||
.topBarInner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: $layoutWidth;
|
||||
margin: auto;
|
||||
|
||||
> :first-child {
|
||||
padding-left: $layoutPadding;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
padding-right: $layoutPadding;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px $layoutPadding;
|
||||
color: white;
|
||||
/*text-decoration: underline dotted white;*/
|
||||
text-decoration: none;
|
||||
border-top: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.homeBar.homeBarTransparent {
|
||||
background: transparent;
|
||||
backdrop-filter: blur(0);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $accentColor;
|
||||
text-decoration: underline dotted currentColor;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: opacity .25s;
|
||||
|
||||
&:target {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.languageModalInner {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
background: black;
|
||||
font-family: $mainFont;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.modalCloseLink {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue