kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-07-10 13:17:55 +02:00
Code Issues Projects Releases Wiki Activity

Rework homepage concept

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-10-18 16:51:26 +02:00
parent 07c240be4f
commit b50b7d83c3
11 changed files with 548 additions and 222 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/components/navigation.module.scss
View file

@ -1,6 +1,75 @@
@import "../variables";
@import "../mixins";
.offscreenNav {
position: fixed;
top: 0;
left: 120px;
width: 100%;
height: 100%;
z-index: 1200;
background-color: rgba($background, 0.9);
backdrop-filter: blur(10px);
color: white;
overflow: auto;
opacity: 0;
transition: opacity .25s, left .25s;
pointer-events: none;
overscroll-behavior: contain;
&.active {
left: 0;
opacity: 1;
pointer-events: auto;
}
@media(prefers-color-scheme: light) {
background-color: rgba($lightBackground, 0.9);
color: black;
}
.inner {
display: flex;
flex-direction: column;
max-width: $layoutWidth;
margin: 0 auto;
position: relative;
text-align: center;
font-size: 1.25em;
.close {
position: absolute;
top: 0;
right: 0;
padding: $layoutPadding;
color: inherit;
background-color: transparent;
border: none;
font: inherit;
}
> a {
text-decoration: underline dotted currentColor;
}
> * {
padding: $layoutPadding;
color: inherit;
&.active {
border-left: 3px solid white;
border-right: 3px solid white;
@media(prefers-color-scheme: light) {
border-left: 3px solid black;
border-right: 3px solid black;
}
}
}
}
}
.topBar {
position: fixed;
top: 0;
@ -40,8 +109,18 @@
padding-right: $layoutPadding;
}
.hamburger {
display: none;
height: 43px;
@media(max-width: 500px) {
display: block;
}
}
a {
display: block;
display: flex;
align-items: center;
padding: 10px $layoutPadding;
color: inherit;
text-decoration: none;
@ -59,6 +138,12 @@
border-color: $accentColor;
}
}
@media(max-width: 500px) {
&:not(.logo) {
display: none;
}
}
}
}
}