notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove peeking effect for smaller devices and add back shadow to the card

Browse Source
This commit is contained in:
Minh Vo
2025-12-27 00:38:27 -05:00
parent bbc4e373a3
commit 36632b025f
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.css
View File

@@ -226,8 +226,10 @@ h2 {
100% { transform: rotateY(0); } 100% { transform: rotateY(0); }
} }
.flip-box:hover .flip-box-front{ @media (min-width: 448px) { /* Apply hover effect only on screens wider than md*/
.flip-box:hover .flip-box-front {
animation: rotate-and-back 0.3s ease-in-out; animation: rotate-and-back 0.3s ease-in-out;
}
} }
.flip-box-front, .flip-box-front,

6
src/components/event/EventBlock.svelte
View File

@@ -61,13 +61,13 @@
<div <div
class=" class="
flip-box flip-box
group relative flex flex-col overflow-hidden rounded-2xl transition-all duration-300 hover:-translate-y-3 " group relative flex flex-col rounded-2xl transition-all duration-300 hover:-translate-y-3"
> >
<!--Flip Card container--> <!--Flip Card container-->
<div class="flip-box-inner rounded-2xl " class:show-back={showDescription}> <div class="flip-box-inner rounded-2xl " class:show-back={showDescription}>
<!--Front Side--> <!--Front Side-->
<!--Opacity thing is to fix the visual bug on ios--> <!--Opacity thing is to fix the visual bug on ios-->
<div class="flip-box-front bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl transition-opacity duration-500 {showDescription ? 'opacity-0 pointer-events-none' : 'opacity-100'}"> <div class="flip-box-front bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl transition-opacity duration-500 {showDescription ? 'opacity-0 pointer-events-none' : 'opacity-100'}">
<!--Flip button--> <!--Flip button-->
<div <div
class=" class="
@@ -239,7 +239,7 @@
</div> </div>
</div> </div>
<!-- Back Side --> <!-- Back Side -->
<div class=" flip-box-back bg-ecsess-950 shadow-ecsess-950/50 rounded-2xl"> <div class=" flip-box-back bg-ecsess-950 shadow-xl shadow-ecsess-950/60 rounded-2xl">
<!--Flip button--> <!--Flip button-->
<div <div
class=" class="