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

billyyyyy3320 · web-flow · commit 89b08b6117d8 · 2020-01-27T13:57:34.000+08:00
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
