diff options
Diffstat (limited to 'website/public')
| -rw-r--r-- | website/public/css/base.css | 11 | ||||
| -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 |
4 files changed, 37 insertions, 6 deletions
diff --git a/website/public/css/base.css b/website/public/css/base.css index 846f08d..7d31609 100644 --- a/website/public/css/base.css +++ b/website/public/css/base.css @@ -45,9 +45,11 @@ /** Light theme */ @media (prefers-color-scheme: light) { - --colour-primary-fg: var(--colour-primary-20); - --colour-primary-bg: var(--colour-primary-95); - --colour-hyperlink: var(--colour-hyperlink-40); + :root { + --colour-primary-fg: var(--colour-primary-20); + --colour-primary-bg: var(--colour-primary-95); + --colour-hyperlink: var(--colour-hyperlink-40); + } } /** Base typography */ @@ -57,6 +59,9 @@ body { color: var(--colour-primary-fg); background-color: var(--colour-primary-bg); line-height: 1.5; + + /* Geometric Humanist stack from https://modernfontstacks.com */ + font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; } small { 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 |
