From d2fb50b83c9557f1cd36e4706e9a11aa8f01e458 Mon Sep 17 00:00:00 2001 From: Aaron Pham <29749331+aarnphm@users.noreply.github.com> Date: Tue, 6 Feb 2024 02:06:19 -0500 Subject: [PATCH] fix(links): show backdrop on links highlighted in headers alias (#816) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: assign specific classes based on parent node Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: use custom role for anchor icone Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: allow color on links 😄 Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: unify search inner container Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --- quartz/components/styles/search.scss | 2 +- quartz/plugins/transformers/gfm.ts | 2 +- quartz/styles/base.scss | 6 ++---- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss index 2f07fe7..8a9ec67 100644 --- a/quartz/components/styles/search.scss +++ b/quartz/components/styles/search.scss @@ -160,7 +160,7 @@ width: min($pageWidth, 100%); } - & [data-icon] { + a[role="anchor"] { background-color: transparent; } } diff --git a/quartz/plugins/transformers/gfm.ts b/quartz/plugins/transformers/gfm.ts index dc0d1f0..48681ff 100644 --- a/quartz/plugins/transformers/gfm.ts +++ b/quartz/plugins/transformers/gfm.ts @@ -32,10 +32,10 @@ export const GitHubFlavoredMarkdown: QuartzTransformerPlugin | { behavior: "append", properties: { + role: "anchor", ariaHidden: true, tabIndex: -1, "data-no-popover": true, - "data-icon": true, }, content: { type: "element", diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 33d6267..f0e7c14 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -259,11 +259,9 @@ thead { font-weight: revert; margin-bottom: 0; - article > & > a { + article > & > a[role="anchor"] { color: var(--dark); - &.internal { - background-color: transparent; - } + background-color: transparent; } }