moritzruth/moritzruth.de
1
0
Fork 0
Code Activity Actions

Update MyProject and NavigationBar

Browse source
This commit is contained in:
Moritz Ruth 2020-08-08 18:34:33 +02:00
parent f80f33e166
commit 886c38882b
No known key found for this signature in database
GPG key ID: AFD57E23E753841B
5 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/styles/_variables.scss Normal file
View file

@ -0,0 +1,2 @@
$page-transition-duration: 500ms;
$page-transition-easing: ease;

3
assets/styles/global.scss
View file

@ -1,6 +1,7 @@
@use "./colors";
@use "./content";
@use "./formatted";
@use "./variables";
// General
html, body {
@ -23,7 +24,7 @@ html, body {
// Transitions
.page-enter-active, .page-leave-active {
transition: 500ms ease opacity;
transition: variables.$page-transition-duration variables.$page-transition-easing opacity;
}
.page-enter, .page-leave-to {

2
components/MyButton.vue
View file

@ -100,7 +100,7 @@
.my-button__prefix {
display: inline-flex;
margin-right: 10px;
margin-left: -5px;
margin-left: -10px;
justify-content: center;

12
components/NavigationBar.vue
View file

@ -39,6 +39,7 @@
@use "~@/assets/styles/screenSize";
@use "~@/assets/styles/colors";
@use "~@/assets/styles/content";
@use "~@/assets/styles/variables";
@use "~@/assets/styles/z-indexes";
body {
@ -70,6 +71,14 @@
align-items: center;
justify-content: space-between;
padding: 0 30px 0 20px;
transition: variables.$page-transition-duration variables.$page-transition-easing background;
background: transparent;
.navigation-bar--show-background & {
background: transparentize(colors.$background, 0.8);
backdrop-filter: blur(10px);
}
}
.navigation-bar__toggle {
@ -294,7 +303,8 @@
return toModifierClasses("navigation-bar", {
open,
hideActiveState
hideActiveState,
showBackground: this.$route.fullPath !== "/"
})
}
},

8
components/pages/projects/MyProject.vue
View file

@ -52,7 +52,7 @@
.my-project__content {
margin: 2px;
padding: 20px;
padding: 30px;
background: colors.$background;
font-size: 1.1rem;
@ -79,10 +79,10 @@
.my-project__links {
flex-grow: 1;
margin-top: 10px;
margin: 10px -5px -15px;
display: grid;
gap: 2px;
gap: 4px;
grid-auto-flow: column;
grid-auto-columns: min-content;
grid-auto-rows: min-content;
@ -105,7 +105,7 @@
@media (max-width: 500px) {
.my-project__links {
grid-template-columns: 1fr;
grid-template-columns: 1fr 1fr;
grid-auto-flow: row;
}
}