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
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 "./colors";
@use "./content"; @use "./content";
@use "./formatted"; @use "./formatted";
@use "./variables";
// General // General
html, body { html, body {
@ -23,7 +24,7 @@ html, body {
// Transitions // Transitions
.page-enter-active, .page-leave-active { .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 { .page-enter, .page-leave-to {

2
components/MyButton.vue
View file

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

12
components/NavigationBar.vue
View file

@ -39,6 +39,7 @@
@use "~@/assets/styles/screenSize"; @use "~@/assets/styles/screenSize";
@use "~@/assets/styles/colors"; @use "~@/assets/styles/colors";
@use "~@/assets/styles/content"; @use "~@/assets/styles/content";
@use "~@/assets/styles/variables";
@use "~@/assets/styles/z-indexes"; @use "~@/assets/styles/z-indexes";
body { body {
@ -70,6 +71,14 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 30px 0 20px; 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 { .navigation-bar__toggle {
@ -294,7 +303,8 @@
return toModifierClasses("navigation-bar", { return toModifierClasses("navigation-bar", {
open, open,
hideActiveState hideActiveState,
showBackground: this.$route.fullPath !== "/"
}) })
} }
}, },

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

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