diff options
| author | Joe Carstairs <jcarstairs@scottlogic.com> | 2024-05-13 10:40:01 +0100 |
|---|---|---|
| committer | Joe Carstairs <jcarstairs@scottlogic.com> | 2024-05-13 10:40:01 +0100 |
| commit | 400d04eca8602bd2dcb7ad4a3f790278fd2f2eed (patch) | |
| tree | 27facf4b5cfbf54efaed87f7da02803e4302b8a2 | |
| parent | 286e19ffaadcbf82150989dd14d9e6d045d0ac3c (diff) | |
Improves image and shrinks size
| -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 | |||
| -rw-r--r-- | website/src/components/Me.astro | 4 |
4 files changed, 32 insertions, 4 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 diff --git a/website/src/components/Me.astro b/website/src/components/Me.astro index 1a2140b..a77efc0 100644 --- a/website/src/components/Me.astro +++ b/website/src/components/Me.astro @@ -2,7 +2,9 @@ --- <section class="h-card"> - <img class="u-photo" src="/images/headshot.jpg" height="256" width="256" /> + <div> + <img class="u-photo" src="/images/headshot.webp" height="96" width="96" /> + </div> <header> <h1> |
