From 6a0153e8f5cc19e16fa428d8fb558faf90c9d47f Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Tue, 15 Oct 2024 17:25:03 +0100 Subject: [PATCH 1/3] chore: replace permlink icon with hash icon --- packages/site-kit/src/lib/components/Text.svelte | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index 98ad223457..6fdb30bfc1 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -335,7 +335,7 @@ a.permalink { position: absolute !important; display: block; - background: url(../icons/link.svg) 50% 50% no-repeat; + background: url(../icons/hash-light.svg) 50% 50% no-repeat; background-size: 1em 1em; width: 1.2em; height: 0.8em; @@ -346,6 +346,10 @@ scale: 0.8; } + :root.dark & { + background: url(../icons/hash-dark.svg) 50% 50% no-repeat; + } + @media (min-width: 768px) { left: 0.7em; opacity: 0; From 2ad929ae841abe1308049aed44b2e4fb9baf11a6 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 15 Oct 2024 13:58:28 -0400 Subject: [PATCH 2/3] Update packages/site-kit/src/lib/components/Text.svelte --- packages/site-kit/src/lib/components/Text.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index 6fdb30bfc1..c8f09df870 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -347,7 +347,7 @@ } :root.dark & { - background: url(../icons/hash-dark.svg) 50% 50% no-repeat; + background-image: url(../icons/hash-dark.svg); } @media (min-width: 768px) { From 4fd5d40be7d136918d6983c00d561b7fbf3ea31c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 15 Oct 2024 14:02:36 -0400 Subject: [PATCH 3/3] use rem so size is consistent between h2 and h3 --- packages/site-kit/src/lib/components/Text.svelte | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index c8f09df870..b787877a34 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -75,11 +75,11 @@ h2, h3 { max-width: 100%; - padding: 0 1em 0 0; + padding: 0 2.4rem 0 0; @media (min-width: 768px) { - margin: 0 0 0 -2em; - padding: 0 1em 0 2em; + margin: 0 0 0 -4.8rem; + padding: 0 2.4rem 0 4.8rem; } /* we can't use `text-overflow` on the heading itself, @@ -336,10 +336,10 @@ position: absolute !important; display: block; background: url(../icons/hash-light.svg) 50% 50% no-repeat; - background-size: 1em 1em; - width: 1.2em; - height: 0.8em; - top: 0.2em; + background-size: 2.4rem 2.4rem; + width: 2.6rem; + height: 2.2rem; + top: calc(50% - 1rem); @media (max-width: 767px) { right: 0; @@ -351,7 +351,7 @@ } @media (min-width: 768px) { - left: 0.7em; + left: 1.6rem; opacity: 0; transition: opacity 0.2s;