From 286e19ffaadcbf82150989dd14d9e6d045d0ac3c Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Mon, 13 May 2024 10:39:11 +0100 Subject: Fixes theming --- website/public/css/base.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/website/public/css/base.css b/website/public/css/base.css index 846f08d..1ef8492 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 */ -- cgit v1.2.3 From 400d04eca8602bd2dcb7ad4a3f790278fd2f2eed Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Mon, 13 May 2024 10:40:01 +0100 Subject: Improves image and shrinks size --- website/public/css/hcard.css | 32 +++++++++++++++++++++++++++++--- website/public/images/headshot.jpg | Bin 971952 -> 0 bytes website/public/images/headshot.webp | Bin 0 -> 29186 bytes website/src/components/Me.astro | 4 +++- 4 files changed, 32 insertions(+), 4 deletions(-) delete mode 100644 website/public/images/headshot.jpg create mode 100644 website/public/images/headshot.webp 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 deleted file mode 100644 index 2ca13cf..0000000 Binary files a/website/public/images/headshot.jpg and /dev/null differ diff --git a/website/public/images/headshot.webp b/website/public/images/headshot.webp new file mode 100644 index 0000000..0c2a15b Binary files /dev/null and b/website/public/images/headshot.webp differ 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 @@ ---
- +
+ +

-- cgit v1.2.3 From 2b1a34c97590bf071a49d2189a360827629f9ac0 Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Mon, 13 May 2024 10:49:51 +0100 Subject: Uses Geometric Humanist font stack --- website/public/css/base.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/website/public/css/base.css b/website/public/css/base.css index 1ef8492..7d31609 100644 --- a/website/public/css/base.css +++ b/website/public/css/base.css @@ -59,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 { -- cgit v1.2.3