diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-10-26 16:49:19 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-10-26 16:49:19 +0200 |
| commit | 567ed30350c9948fbd2199131daba426b8f13d4b (patch) | |
| tree | a9462c7bda1efcbb06cc4f91948608f1ee8c4731 /htdocs/src/scss/base | |
| parent | 02847dfce8f7fd31487e4c0b7fd2fdbbcab2ac26 (diff) | |
chore(styles): improve project details animation and increase height
Depending on content, the project details block was not completely
below the toolbar before the animation ended. By using vh instead of %,
the issue is fixed. I also increase a little the animation timing.
I also give project details block a full height when expanded. This
allows me to right longer description if needed and I can use the
default font-size. It improves readability.
Diffstat (limited to 'htdocs/src/scss/base')
| -rw-r--r-- | htdocs/src/scss/base/_animations.scss | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/htdocs/src/scss/base/_animations.scss b/htdocs/src/scss/base/_animations.scss index 9ec8e9e..6da56b2 100644 --- a/htdocs/src/scss/base/_animations.scss +++ b/htdocs/src/scss/base/_animations.scss @@ -44,7 +44,7 @@ @keyframes slideInUp { 0% { - margin-bottom: -100%; + margin-bottom: -100vh; } 100% { @@ -59,7 +59,7 @@ } 100% { - margin-bottom: -100%; + margin-bottom: -100vh; visibility: hidden; } } @@ -81,9 +81,9 @@ } .slide-in--up { - animation: slideInUp 0.8s; + animation: slideInUp 1s; } .slide-out--bottom { - animation: slideOutBottom 0.8s; + animation: slideOutBottom 1s; } |