Refactor banner transform styles to use CSS variable for improved flexibility

zealsprince · zealsprince · commit 25208d4075ae · 2025-12-15T22:21:05.000-07:00
diff --git a/app/components/Announcements/AnnouncementCard.vue b/app/components/Announcements/AnnouncementCard.vue
@@ -284,7 +284,7 @@ const backgroundSurfaceStyle = computed(() => {
 }
 
 .announcement-card--pinned:hover .announcement-card__banner-surface--image {
-  transform: scale(1.05);
+  transform: var(--banner-placeholder-transform, scale(1)) scale(1.05);
 }
 
 .announcement-card__banner-overlay {
diff --git a/app/components/Community/ProjectCard.vue b/app/components/Community/ProjectCard.vue
@@ -279,12 +279,12 @@ const bannerSurfaceStyle = computed(() => {
   border-radius: inherit;
   background-size: cover;
   background-position: center;
-  transform: scale(1);
+  transform: var(--banner-placeholder-transform, scale(1));
   transition: transform 0.4s ease;
 }
 
 .project-card:hover .project-card__banner-surface--image {
-  transform: scale(1.05);
+  transform: var(--banner-placeholder-transform, scale(1)) scale(1.05);
 }
 
 .project-card__banner-badge {
diff --git a/app/pages/announcements/[id].vue b/app/pages/announcements/[id].vue
@@ -230,12 +230,12 @@ useHead({
   inset: 0;
   background-size: cover;
   background-position: center;
-  transform: scale(1);
+  transform: var(--banner-placeholder-transform, scale(1));
   transition: transform 0.4s ease;
 }
 
 .announcement-header:hover .announcement-header__banner-surface--image {
-  transform: scale(1.05);
+  transform: var(--banner-placeholder-transform, scale(1)) scale(1.05);
 }
 
 .announcement-header__body {
diff --git a/app/pages/community/projects/[id].vue b/app/pages/community/projects/[id].vue
@@ -237,12 +237,12 @@ useHead({
   inset: 0;
   background-size: cover;
   background-position: center;
-  transform: scale(1);
+  transform: var(--banner-placeholder-transform, scale(1));
   transition: transform 0.4s ease;
 }
 
 .project-header:hover .project-header__banner-surface--image {
-  transform: scale(1.05);
+  transform: var(--banner-placeholder-transform, scale(1)) scale(1.05);
 }
 
 .project-header__body {

Original file line number	Diff line number	Diff line change
`@@ -284,7 +284,7 @@ const backgroundSurfaceStyle = computed(() => {`
`284`	`284`	`}`
`285`	`285`
`286`	`286`	`.announcement-card--pinned:hover .announcement-card__banner-surface--image {`
`287`		`- transform: scale(1.05);`
	`287`	`+ transform: var(--banner-placeholder-transform, scale(1)) scale(1.05);`
`288`	`288`	`}`
`289`	`289`
`290`	`290`	`.announcement-card__banner-overlay {`
Original file line number	Diff line number	Diff line change
`@@ -279,12 +279,12 @@ const bannerSurfaceStyle = computed(() => {`
`279`	`279`	`border-radius: inherit;`
`280`	`280`	`background-size: cover;`
`281`	`281`	`background-position: center;`
`282`		`- transform: scale(1);`
	`282`	`+ transform: var(--banner-placeholder-transform, scale(1));`
`283`	`283`	`transition: transform 0.4s ease;`
`284`	`284`	`}`
`285`	`285`
`286`	`286`	`.project-card:hover .project-card__banner-surface--image {`
`287`		`- transform: scale(1.05);`
	`287`	`+ transform: var(--banner-placeholder-transform, scale(1)) scale(1.05);`
`288`	`288`	`}`
`289`	`289`
`290`	`290`	`.project-card__banner-badge {`
Original file line number	Diff line number	Diff line change
`@@ -230,12 +230,12 @@ useHead({`
`230`	`230`	`inset: 0;`
`231`	`231`	`background-size: cover;`
`232`	`232`	`background-position: center;`
`233`		`- transform: scale(1);`
	`233`	`+ transform: var(--banner-placeholder-transform, scale(1));`
`234`	`234`	`transition: transform 0.4s ease;`
`235`	`235`	`}`
`236`	`236`
`237`	`237`	`.announcement-header:hover .announcement-header__banner-surface--image {`
`238`		`- transform: scale(1.05);`
	`238`	`+ transform: var(--banner-placeholder-transform, scale(1)) scale(1.05);`
`239`	`239`	`}`
`240`	`240`
`241`	`241`	`.announcement-header__body {`
Original file line number	Diff line number	Diff line change
`@@ -237,12 +237,12 @@ useHead({`
`237`	`237`	`inset: 0;`
`238`	`238`	`background-size: cover;`
`239`	`239`	`background-position: center;`
`240`		`- transform: scale(1);`
	`240`	`+ transform: var(--banner-placeholder-transform, scale(1));`
`241`	`241`	`transition: transform 0.4s ease;`
`242`	`242`	`}`
`243`	`243`
`244`	`244`	`.project-header:hover .project-header__banner-surface--image {`
`245`		`- transform: scale(1.05);`
	`245`	`+ transform: var(--banner-placeholder-transform, scale(1)) scale(1.05);`
`246`	`246`	`}`
`247`	`247`
`248`	`248`	`.project-header__body {`