Add active state for mobile HoverCard

- **New functionality**: Introduced an active state for `HoverCard` on mobile devices, triggered via click.
- **Style updates**: Added styles to handle `active` class for text and image opacity.
- **Responsive aspect ratio**: Ensured square aspect ratio with the addition of `aspect-ratio: 1 / 1` in CSS.
- **Script enhancement**: Implemented JavaScript for toggling the active state on mobile.

src/components/HoverCard.astro

@@ -1,15 +1,34 @@
 ---
 // src/components/HoverCard.astro
 import "../styles/components/HoverCard.css";
-const {title, description, image = ""} = Astro.props;
+const {title, description, image = "", date} = Astro.props;
 ---
 
 <article class="hover-card">
+	{title && <h3 class="card-title">{title}</h3>}
+	{date && <p class="card_date">{date}</p>}
 	<div class="image-container">
 		<img class="card-image" src={image} alt={title} />
 	</div>
 
 	<div class="hover-text">
-		<p set:html={description} />
+		<div>
+			<p set:html={description} />
+		</div>
 	</div>
 </article>
+
+<script>
+	document.addEventListener('DOMContentLoaded', () => {
+		const hoverCards = document.querySelectorAll('.hover-card');
+		
+		hoverCards.forEach(card => {
+			card.addEventListener('click', () => {
+				// Only toggle on mobile devices
+				if (window.innerWidth <= 768) {
+					card.classList.toggle('active');
+				}
+			});
+		});
+	});
+</script>

src/styles/components/HoverCard.css

@@ -101,6 +101,15 @@
 	opacity: 0.1;
 }
 
+/* Active state for mobile click functionality */
+.hover-card.active .hover-text {
+	opacity: 1;
+}
+
+.hover-card.active .card-image {
+	opacity: 0.1;
+}
+
 .hover-text p {
 	margin: 0;
 	padding: 0;
@@ -110,5 +119,8 @@
 	.hover-card {
 		width: 100%;
 		max-width: 350px;
+		/* Maintain square aspect ratio */
+		aspect-ratio: 1 / 1;
+		height: auto;
 	}
 }