Styling overhaul

1 files changed, 27 insertions, 16 deletions

diff --git a/website/public/css/hcard.css b/website/public/css/hcard.css
index 99431d9..4f1713d 100644
--- a/website/public/css/hcard.css
+++ b/website/public/css/hcard.css
@@ -1,21 +1,32 @@
-.u-photo {
-	margin-inline: auto;
-	margin-block-end: 3rem;
+.h-card {
+	img {
+		width: 6rem;
+		height: 6rem;
+		border-radius: 1rem;
+	}
 }
 
-@media (min-width: 48rem) {
-	.h-card:not(.h-card--minimal) {
-		display: flex;
-		gap: 1rem;
-		align-items: center;
-	}
+@media (min-width: 36rem) {
+	.h-card {
+		grid-column: media-start / content-end;
+		display: grid;
+		grid-template-columns: subgrid; /** Subgrid of main column layout */
+		grid-template-rows: min-content 1fr;
+		grid-template-areas:
+			"empty heading"
+			"photo text";
 
-  .u-photo {
-		margin: 0;
-	}
-}
+		img {
+			grid-area: photo;
+			margin-block-start: var(--spacing-block-sm);
+		}
 
-.u-photo {
-	width: 256px;
-}
+		header {
+			grid-area: heading;
+		}
 
+		.h-card__text {
+			grid-area: text;
+		}
+	}
+}