diff options
Diffstat (limited to 'website/public/css')
| -rw-r--r-- | website/public/css/hcard.css | 32 |
1 files changed, 29 insertions, 3 deletions
diff --git a/website/public/css/hcard.css b/website/public/css/hcard.css index 4f1713d..414eed9 100644 --- a/website/public/css/hcard.css +++ b/website/public/css/hcard.css @@ -1,8 +1,34 @@ .h-card { - img { + div:has(img) { width: 6rem; height: 6rem; - border-radius: 1rem; + margin-inline: auto; + + img { + width: 6rem; + height: 6rem; + border-radius: 1rem; + filter: contrast(1.25); + } + + &::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: ''; + } } } @@ -16,7 +42,7 @@ "empty heading" "photo text"; - img { + div:has(img) { grid-area: photo; margin-block-start: var(--spacing-block-sm); } |