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