fix: section links should not be covered by navbar (fix #60)(#61)

vuepress · Jan 27, 2020 · 89b08b6 · 89b08b6
1 parent ec897da
commit 89b08b6
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 0 deletions.
diff --git a/components/Header.vue b/components/Header.vue
@@ -40,6 +40,7 @@ export default {
   position fixed
   top 0
   width 100vw
+  height $headerHeight
   box-sizing border-box
   background-color $headerBgColor
   padding 20px 32px 20px

diff --git a/example/.vuepress/styles/palette.styl b/example/.vuepress/styles/palette.styl
@@ -18,6 +18,7 @@
 // $newsletterBgColor = #f8f8f8
 
 // layout
+// $headerHeight = 80px
 // $contentWidth = 740px
 
 // responsive breakpoints

diff --git a/styles/index.styl b/styles/index.styl
@@ -75,6 +75,11 @@ h1, h2, h3, h4, h5, h6
   line-height 1.25
   font-family PT Serif
 
+  {$contentClass}:not(.custom) > &
+    margin-top 'calc(0.5rem - %s)' % ($headerHeight)
+    padding-top 'calc(%s + 1rem)' % ($headerHeight)
+    margin-bottom 0
+
   &:hover .header-anchor
     opacity: 1
 

diff --git a/styles/palette.styl b/styles/palette.styl
@@ -21,6 +21,7 @@ $postTagBgColor = #ededed;
 $postTagColor = darken($postTagBgColor,50%)
 
 // layout
+$headerHeight = 80px
 // $contentWidth = 740px
 
 // responsive breakpoints