From 78dbbe725289c7a351fad91385aa2894dfc93dc3 Mon Sep 17 00:00:00 2001
From: Billyyyyy3320 <newsbielt703@gmail.com>
Date: Mon, 27 Jan 2020 13:42:51 +0800
Subject: [PATCH] fix: section links should not be covered by navbar

---
 components/Header.vue                 | 1 +
 example/.vuepress/styles/palette.styl | 1 +
 styles/index.styl                     | 5 +++++
 styles/palette.styl                   | 1 +
 4 files changed, 8 insertions(+)

diff --git a/components/Header.vue b/components/Header.vue
index 05e89a6..dcf5fdc 100644
--- 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
index 0437226..377aa3f 100644
--- 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
index 20f8f3a..f7f237d 100644
--- 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
index 531dc0d..404dc9c 100644
--- 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