48 lines
1.1 KiB
Plaintext
48 lines
1.1 KiB
Plaintext
---
|
|
import "../styles/components/HoverCard.css";
|
|
const {title, description, image = "", date} = Astro.props;
|
|
---
|
|
|
|
<article class="hover-card">
|
|
<div class="image-container">
|
|
<img class="card-image" src={image} alt={title} />
|
|
</div>
|
|
|
|
<div class="hover-text">
|
|
<div>
|
|
<p set:html={description} />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const hoverCards = document.querySelectorAll('.hover-card');
|
|
|
|
hoverCards.forEach(card => {
|
|
card.addEventListener('click', (e) => {
|
|
// Only toggle on mobile devices
|
|
if (window.innerWidth <= 768) {
|
|
e.preventDefault();
|
|
|
|
// Close all other active cards first
|
|
hoverCards.forEach(otherCard => {
|
|
if (otherCard !== card) {
|
|
otherCard.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Toggle current card
|
|
card.classList.toggle('active');
|
|
}
|
|
});
|
|
|
|
// Close card when clicking outside (mobile only)
|
|
document.addEventListener('click', (e) => {
|
|
if (window.innerWidth <= 768 && !card.contains(e.target as Node)) {
|
|
card.classList.remove('active');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script> |