From 6289598e400b7a869e6fac748bee1ed180161642 Mon Sep 17 00:00:00 2001
From: a <a@trwnh.com>
Date: Fri, 8 Mar 2024 11:26:46 -0600
Subject: [PATCH] responsive h-card on home page

---
 .../scss/layouts/shortcodes/hcard-full.scss   | 63 ++++++++++++++-----
 1 file changed, 47 insertions(+), 16 deletions(-)

diff --git a/assets/scss/layouts/shortcodes/hcard-full.scss b/assets/scss/layouts/shortcodes/hcard-full.scss
index bb4c950..4246a82 100644
--- a/assets/scss/layouts/shortcodes/hcard-full.scss
+++ b/assets/scss/layouts/shortcodes/hcard-full.scss
@@ -1,5 +1,7 @@
 .h-card.full {
+	--border-radius: 10px;
 	height: min-content;
+	border-radius: var(--border-radius, 10px);
 	background: #eee;
 	h2 {
 		text-align: center;
@@ -8,21 +10,24 @@
 		padding: 1rem;
 	}
 	header {
-		display: grid;
-		place-items: center;
 		aspect-ratio: 2;
 		background-image: url('/images/sunset.jpg');
 		background-size: cover;
 		background-position: center;
+		position: relative;
+		border-top-left-radius: var(--border-radius, 10px);
+		border-top-right-radius: var(--border-radius, 10px);
 		img {
-			border-radius: 100em;
-			background-color: rgba(255,255,255,0.4);
+			border-radius: 12px;
+			background-color: #ddd;
 			padding: 10px;
-			aspect-ratio: 1;
-			height: unset;
-			width: 25%;
-			min-width: 120px;
+			width: 120px;
+			height: 120px;
+			position: absolute;
+			left: calc(50% - 60px);
+			top: calc(100% - 60px);
 		}
+		margin-bottom: 60px;
 	}
 	.info {
 		text-align: center;
@@ -45,22 +50,48 @@
 		}
 	}
 	.metadata {
-		padding-block-end: 1rem;
+		padding-block-end: 2rem;
 		display: grid;
-		grid-template-columns: 1fr 2fr;
-		gap: 1em;
-		max-width: 520px;
+		max-width: calc(33ch + 1em);
 		margin: 0 auto;
+		gap: 1em;
 		.field {
-			display: contents;
+			display: grid;
+			place-items: start;
+			gap: 0.5em;
+			padding: 0 1em;
 		}
 		dt {
 			font-weight: bold;
-			place-self: center end;
-			text-align: right;
+			font-variant: small-caps
 		}
 		dd {
-			place-self: center start;
+
+		}
+	}
+	@media (min-width: 40em) {
+		display: grid;
+		grid-template-columns: 20em 1fr;
+		grid-template-areas:
+			"header meta"
+			"info meta";
+		header {
+			width: 20em;
+			grid-area: header;
+			border-top-right-radius: 0;
+		}
+		.info {
+			grid-area: info;
+		}
+		.metadata {
+			grid-area: meta;
+			padding-block-start: 2em;
+			max-width: unset;
+			width: 100%;
+			padding-left: 2em;
+			background: #e6e6e6;
+			border-top-right-radius: var(--border-radius, 10px);
+			border-bottom-right-radius: var(--border-radius, 10px);
 		}
 	}
 }
\ No newline at end of file