diff options
Diffstat (limited to 'website/public')
| -rw-r--r-- | website/public/css/hcard.css | 32 | ||||
| -rw-r--r-- | website/public/images/headshot.jpg | bin | 971952 -> 0 bytes | |||
| -rw-r--r-- | website/public/images/headshot.webp | bin | 0 -> 29186 bytes |
3 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); } diff --git a/website/public/images/headshot.jpg b/website/public/images/headshot.jpg Binary files differdeleted file mode 100644 index 2ca13cf..0000000 --- a/website/public/images/headshot.jpg +++ /dev/null diff --git a/website/public/images/headshot.webp b/website/public/images/headshot.webp Binary files differnew file mode 100644 index 0000000..0c2a15b --- /dev/null +++ b/website/public/images/headshot.webp |
