Merge pull request #273 from filecoin-project/fix/239

fix: allow for hash link offsets with breadcrumbs

Author: cwaring

docs/.vuepress/theme/components/Breadcrumbs.vue

@@ -42,6 +42,18 @@ export default {
 }
 </script>
 
+<style lang="stylus">
+// offset hash position for breadcrumb bar
+h1, h2, h3, h4, h5, h6
+  {$contentClass}:not(.custom) > &
+    margin-top (0.5rem - ($navbarHeight + $breadcrumbsHeight)) !important
+    padding-top $navbarHeight + $breadcrumbsHeight + 1rem !important
+
+.breadcrumbs.fixed + {$contentClass} {
+  padding-top: $breadcrumbsHeight - 0.5rem;
+}
+</style>
+
 <style lang="stylus" scoped>
 nav
   border-bottom 1px solid #eaecef

docs/.vuepress/theme/components/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <main class="home">
-    <div class="theme-default-content">
+    <div class="home-container theme-default-content">
       <Content class="intro" />
       <div class="grid">
         <div
@@ -36,7 +36,7 @@ import { isExternal } from '@parent-theme/util/'
 
 export default {
   name: 'Home',
-  data: function() {
+  data: function () {
     return {
       manualSidebar: [
         {
@@ -95,7 +95,7 @@ export default {
             }
           ]
         },
-                {
+        {
           title: 'Build',
           path: '/build',
           children: [
@@ -121,27 +121,28 @@ export default {
             },
             {
               title: 'Filecoin community resources',
-              path: 'https://github.com/filecoin-project/docs/wiki#community-resources'
+              path:
+                'https://github.com/filecoin-project/docs/wiki#community-resources'
             },
             {
               title: 'Component design system',
               path: 'http://filecoin.onrender.com/'
             }
           ]
         },
-               {
-         title: 'Mine',
-         path: '/mine',
-         children: [
-           {
+        {
+          title: 'Mine',
+          path: '/mine',
+          children: [
+            {
               title: 'Mining overview',
               path: '/mine/'
             },
-           {
+            {
               title: 'Improving connectivity',
               path: '/mine/connectivity'
             },
-           {
+            {
               title: 'Space Race',
               path: '/mine/spacerace'
             }
@@ -232,15 +233,21 @@ export default {
 }
 </script>
 
+<style lang="stylus">
+.home .header-anchor {
+  display: none
+}
+</style>
+
 <style lang="stylus" scoped>
-.home .theme-default-content:not(.custom) {
-    padding: 2rem 2.5rem 6rem;
-    max-width: 740px;
-    background: no-repeat url("/images/main-page-background.png");
-    background-position: 550px 34px;
-    background-size: 280px 336px;
+@media (min-width: $MQNarrow) {
+  .home {$contentClass}:not(.custom) {
+      background: no-repeat url("/images/main-page-background.png");
+      background-position: right 3rem;
+      background-size: 280px 336px;
+  }
 }
-.home .theme-default-content:not(.custom) > h1:first-child {
+.home {$contentClass}:not(.custom) > h1:first-child {
     font-weight: normal;
     margin: 0 0 3rem;
 }

docs/.vuepress/theme/components/Page.vue

@@ -92,10 +92,6 @@ export default {
   display: block;
 }
 
-.breadcrumbs.fixed + .theme-default-content {
-  padding-top: 6em;
-}
-
 .content-footer {
   padding-top: 0;
   max-width: $contentWidth;

docs/.vuepress/theme/styles/palette.styl

@@ -17,8 +17,10 @@ $badgeInfoColorLight = #e6F6ff;
 $badgeInfoColorDark = #0e74aa;
 // layout
 $navbarHeight = 4rem;
+$breadcrumbsHeight = 4.5rem;
 $sidebarWidth = 19rem;
 $contentWidth = 740px;
+$contentClass = '.theme-default-content';
 // responsive breakpoints
 $MQNarrow = 959px;
 $MQMobile = 719px;