diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/frontend/src/pages/user/home.vue | 25 |
1 files changed, 11 insertions, 14 deletions
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue index 3002eddda8..ae7893a7a8 100644 --- a/packages/frontend/src/pages/user/home.vue +++ b/packages/frontend/src/pages/user/home.vue @@ -368,23 +368,19 @@ onDeactivated(disposeBannerParallaxResizeObserver); > .banner-container { position: relative; - height: 250px; + --bannerHeight: 250px; + height: var(--bannerHeight); overflow: clip; - background-size: cover; - background-position: center; > .banner { - position: absolute; - top: 50%; - left: 0; width: 100%; - height: 300%; - background-size: 100% auto; + height: 100%; + background-size: cover; background-color: #4c5e6d; background-repeat: repeat-y; - background-position: center; - will-change: transform; - transform: translateY(-50%); + background-position-x: center; + background-position-y: 50%; + will-change: background-position-y; } > .fade { @@ -677,7 +673,8 @@ onDeactivated(disposeBannerParallaxResizeObserver); > .main { > .profile > .main { > .banner-container { - height: 140px; + --bannerHeight: 140px; + height: var(--bannerHeight); > .fade { display: none; @@ -763,10 +760,10 @@ onDeactivated(disposeBannerParallaxResizeObserver); @keyframes bannerParallaxKeyframes { from { - transform: translateY(-50%); + background-position-y: 50%; } to { - transform: translateY(-30%); + background-position-y: calc(50% + var(--bannerHeight, 250px) / 3); } } </style> |