kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-08-06 01:58:26 +02:00
Code Issues Projects Releases Wiki Activity

Increase topbar-transparency when supporting blur

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-03-17 09:22:12 +00:00 • committed by GitHub
parent 5368d7bc3b
commit 8d153ff39b
2 changed files with 210 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

328
src/layouts/default.scss
View file

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