From 77c1b4d3cd3c47ffc5268ac24d0f983df443075d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=83=BD=E5=AE=81?= Date: Sat, 29 Jul 2023 19:23:08 +0800 Subject: [PATCH] fix(style): incorrect header anchor icon position with multline headers (#2694) Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> --- src/client/theme-default/components/VPBadge.vue | 2 +- src/client/theme-default/styles/components/vp-doc.css | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue index c99701f7..5811e358 100644 --- a/src/client/theme-default/components/VPBadge.vue +++ b/src/client/theme-default/components/VPBadge.vue @@ -30,7 +30,7 @@ h3 .VPBadge, h4 .VPBadge, h5 .VPBadge, h6 .VPBadge { - vertical-align: top; + vertical-align: text-top; } h2 .VPBadge { diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css index fe71fe4d..753843dc 100644 --- a/src/client/theme-default/styles/components/vp-doc.css +++ b/src/client/theme-default/styles/components/vp-doc.css @@ -36,9 +36,10 @@ } .vp-doc .header-anchor { - float: left; + position: absolute; + top: 0; + left: 0; margin-left: -0.87em; - padding-right: 0.23em; font-weight: 500; user-select: none; opacity: 0; @@ -74,6 +75,10 @@ } } +.vp-doc h2 .header-anchor { + top: 24px; +} + /** * Paragraph and inline elements * -------------------------------------------------------------------------- */