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/layout/_main.scss | |
| 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/layout/_main.scss')
| -rw-r--r-- | htdocs/src/scss/layout/_main.scss | 11 |
1 files changed, 5 insertions, 6 deletions
diff --git a/htdocs/src/scss/layout/_main.scss b/htdocs/src/scss/layout/_main.scss index 92602f9..5a7ec20 100644 --- a/htdocs/src/scss/layout/_main.scss +++ b/htdocs/src/scss/layout/_main.scss @@ -5,6 +5,7 @@ .main { display: flex; flex-flow: column nowrap; + height: calc(100% - #{fun.get-var(toolbar-height)}); @include mix.media("screen") { @include mix.dimensions("lg") { @@ -35,7 +36,8 @@ .project-preview { background: fun.get-var(color-bg); - flex: 0 1 calc(100% - #{fun.get-var(toolbar-height)}); + flex: 0 1 100%; + min-height: 0; width: 100%; @include mix.media("screen") { @@ -54,11 +56,8 @@ .project-details { background: fun.get-var(color-bg-secondary); box-shadow: 0 -1px 2px 0 fun.get-var(color-shadow); - display: flex; - flex-flow: column nowrap; - font-size: fun.get-var(font-size-sm); - padding: fun.get-var(spacing-md) fun.get-var(spacing-md) - calc(#{fun.get-var(toolbar-height)} + #{fun.get-var(spacing-md)}); + flex: 1 0 100%; + padding: fun.get-var(spacing-md); @include mix.media("screen") { @include mix.dimensions("lg") { |