From e42746ece0a72f881343d9da045af7e1a8259fc6 Mon Sep 17 00:00:00 2001 From: Eugene Orlov Date: Tue, 6 Jun 2023 17:25:52 +0200 Subject: [PATCH 1/3] [site] fix: anchor offset when navigating through an anchor --- site/.eleventy.js | 2 +- site/src/styles.css | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/site/.eleventy.js b/site/.eleventy.js index 6040074652..4dcd9a3689 100644 --- a/site/.eleventy.js +++ b/site/.eleventy.js @@ -50,7 +50,7 @@ function getMarkdownLib() { .use(markdownItAnchor, { permalink: markdownItAnchor.permalink.linkInsideHeader({ placement: 'before', - class: '', + class: 'header-anchor', symbol: '', }), }) diff --git a/site/src/styles.css b/site/src/styles.css index 569914e132..2b77dae8aa 100644 --- a/site/src/styles.css +++ b/site/src/styles.css @@ -193,3 +193,17 @@ .token.space:before { color: #3c526d; } + +.header-anchor { + pointer-events: none; +} +.header-anchor::before { + content: ''; + display: block; + height: 75px; + margin-top: -75px; + visibility: hidden; +} +.header-anchor:focus-visible { + outline: none; +} From addc82303e5697fe070041d4c8bf3824047dcff0 Mon Sep 17 00:00:00 2001 From: Eugene Orlov Date: Tue, 6 Jun 2023 17:59:46 +0200 Subject: [PATCH 2/3] [site] fix: anchor offset make it use tailwind styles --- site/src/styles.css | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/site/src/styles.css b/site/src/styles.css index 2b77dae8aa..02fd4a5c49 100644 --- a/site/src/styles.css +++ b/site/src/styles.css @@ -195,15 +195,12 @@ } .header-anchor { - pointer-events: none; + @apply pointer-events-none; } .header-anchor::before { - content: ''; - display: block; - height: 75px; - margin-top: -75px; - visibility: hidden; -} -.header-anchor:focus-visible { - outline: none; + @apply content-['']; + @apply block; + @apply h-16; + @apply -mt-16; + @apply invisible; } From 93b6fdd556e4f334b16291de2d2b0d3bdbe43077 Mon Sep 17 00:00:00 2001 From: Eugene Orlov Date: Tue, 6 Jun 2023 20:25:44 +0200 Subject: [PATCH 3/3] [site] fix: anchor offset use different header size on mobiles and desktops --- site/src/styles.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/site/src/styles.css b/site/src/styles.css index 02fd4a5c49..4a7d09f8af 100644 --- a/site/src/styles.css +++ b/site/src/styles.css @@ -198,9 +198,5 @@ @apply pointer-events-none; } .header-anchor::before { - @apply content-['']; - @apply block; - @apply h-16; - @apply -mt-16; - @apply invisible; + @apply content-[''] block h-24 -mt-24 invisible md:h-16 md:-mt-16; }