1 files changed, 57 insertions, 0 deletions
diff --git a/http/src/css/hcard.uppcss b/http/src/css/hcard.uppcss
new file mode 100644
index 0000000..78f82b5
--- /dev/null
+++ b/http/src/css/hcard.uppcss
@@ -0,0 +1,57 @@
+.h-card div:has(img) {
+  width: 6rem;
+  height: 6rem;
+  margin-inline: auto;
+}
+
+.h-card img {
+  width: 6rem;
+  height: 6rem;
+  border-radius: 1rem;
+  filter: contrast(1.25);
+}
+
+.h-card div:has(img)::after {
+  /* Colour overlay */
+  background-color: var(--colour-primary-80);
+  opacity: 0.3;
+
+  /* Same size and shape as the img */
+  border-radius: 1rem;
+  width: 6rem;
+  height: 6rem;
+
+  /* Positioned on top of the img */
+  display: block;
+  position: relative;
+  top: -6rem;
+
+  /* A content value is needed to get the ::after to render */
+  content: "";
+}
+
+@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";
+    column-gap: var(--spacing-block-sm);
+  }
+
+  .h-card div:has(img) {
+    grid-area: photo;
+    margin-block-start: var(--spacing-block-sm);
+  }
+
+  .h-card header {
+    grid-area: heading;
+  }
+
+  .h-card__text {
+    grid-area: text;
+  }
+}