dealjus/justin.deal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide Card Background when image only mode is selected

Browse Source
This commit is contained in:
Justin Deal 2025-05-04 11:15:38 -07:00
parent 49e024343e
commit c2ff03521c
1 changed files with 61 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/common/ServiceCard.astro
View File

@ -94,15 +94,18 @@ const cardId = `service-card-${crypto.randomUUID().slice(0, 8)}`;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
/* Transitions */ /* Enhanced transitions for smoother mode changes */
transition: transition:
transform var(--card-transition-duration) var(--card-transition-timing), transform var(--card-transition-duration) var(--card-transition-timing),
box-shadow var(--card-transition-duration) var(--card-transition-timing), box-shadow var(--card-transition-duration) var(--card-transition-timing),
border-color var(--card-transition-duration) var(--card-transition-timing), border-color var(--card-transition-duration) var(--card-transition-timing),
background-color var(--card-transition-duration) var(--card-transition-timing); border var(--card-transition-duration) var(--card-transition-timing),
background-color var(--card-transition-duration) var(--card-transition-timing),
opacity var(--card-transition-duration) var(--card-transition-timing),
padding var(--card-transition-duration) var(--card-transition-timing);
/* Performance optimizations */ /* Performance optimizations */
will-change: transform, box-shadow, border-color; will-change: transform, box-shadow, border-color, background-color, opacity;
} }
/* Gradient background effect */ /* Gradient background effect */
@ -139,6 +142,18 @@ const cardId = `service-card-${crypto.randomUUID().slice(0, 8)}`;
transform var(--card-transition-duration) var(--card-transition-timing); transform var(--card-transition-duration) var(--card-transition-timing);
} }
/* Enhanced background glow in image-only mode */
:global(.display-image-only) .service-icon-background {
transition:
opacity calc(var(--card-transition-duration) * 1.5) var(--card-transition-timing),
transform calc(var(--card-transition-duration) * 1.5) var(--card-transition-timing);
}
:global(.display-image-only) .service-card:hover .service-icon-background {
opacity: 0.25;
transform: scale(1.8);
}
/* Icon image */ /* Icon image */
.service-icon { .service-icon {
width: var(--icon-size); width: var(--icon-size);
@ -150,6 +165,18 @@ const cardId = `service-card-${crypto.randomUUID().slice(0, 8)}`;
filter var(--card-transition-duration) var(--card-transition-timing); filter var(--card-transition-duration) var(--card-transition-timing);
} }
/* Special icon animation for image-only mode */
:global(.display-image-only) .service-icon {
transition:
transform calc(var(--card-transition-duration) * 1.2) var(--card-transition-timing),
filter var(--card-transition-duration) var(--card-transition-timing);
}
:global(.display-image-only) .service-card:hover .service-icon {
transform: scale(1.15) rotate(3deg);
filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.15));
}
/* Service name */ /* Service name */
.service-name { .service-name {
margin-top: 0.5rem; margin-top: 0.5rem;
@ -229,6 +256,37 @@ const cardId = `service-card-${crypto.randomUUID().slice(0, 8)}`;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transform: translateY(0);
transition:
transform var(--card-transition-duration) var(--card-transition-timing),
filter var(--card-transition-duration) var(--card-transition-timing);
}
/* Enhanced icon effects in image-only mode */
:global(.display-image-only) .service-card:hover .service-icon-container {
transform: translateY(-2px) scale(1.02);
}
/* Smooth animation for card background in image-only mode */
:global(.display-image-only) .service-card {
background-color: transparent;
border-color: transparent;
border-width: 0;
box-shadow: none;
/* Add slight scale effect during transition */
transform: scale(1.01);
}
/* Adjust hover/active states in image-only mode */
:global(.display-image-only) .service-card:hover {
transform: translateY(-4px) scale(1.03);
border-color: transparent;
background-color: transparent;
box-shadow: none;
}
:global(.display-image-only) .service-card:hover::before {
opacity: 0;
} }
/* Name only mode */ /* Name only mode */