feat: 🎸 improve style of header-anchor

ttskch · May 11, 2020 · c08db8b · c08db8b
1 parent 8d51f27
commit c08db8b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 32 deletions.
diff --git a/example/blog/_posts/post1.md b/example/blog/_posts/post1.md
@@ -103,20 +103,12 @@ You can use emojis like `:+1:` :+1:
 
 ### h3
 
-h3
-
 #### h4
 
-h4
-
 ##### h5
 
-h5
-
 ###### h6
 
-h6
-
 ## About Markdown see also
 
 * [Markdown Extensions | VuePress](https://vuepress.vuejs.org/guide/markdown.html)

diff --git a/styles/_header-anchor.scss b/styles/_header-anchor.scss
@@ -4,42 +4,43 @@
   h1, h2, h3, h4, h5, h6 {
     &[id] {
       position: relative;
+      pointer-events: none;
 
+      // for scrolling offset
       &:before {
         content: '';
         display: block;
         height: $h-anchor-margin-top;
         margin-top: -1 * $h-anchor-margin-top;
       }
 
+      // for ability to fire hover event of parent
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 1.3em;
+        pointer-events: auto;
+      }
+
       // #
-      & {
+      a.header-anchor {
+        font-size: 0.85em;
+        font-weight: normal;
+        position: absolute;
+        padding-right: 0.3em; // for click-ability
+        left: -0.8em;
+        opacity: 0;
+        pointer-events: auto;
+      }
+      &:hover {
         a.header-anchor {
-          font-size: 0.85em;
-          font-weight: normal;
-          position: absolute;
-          padding-right: 0.3em; // for click-ability
-          left: -0.8em;
-          opacity: 0;
-        }
-        &:hover {
-          a.header-anchor {
-            opacity: 1;
-          }
+          opacity: 1;
         }
       }
     }
   }
-
-}
-
-// prevent to cannot click under margin of h tags
-.v-app-bar, .v-navigation-drawer--open {
-  z-index: 100 !important;
-}
-#content {
-  a, details {
-    position: relative;
-    z-index: 99;
-  }
 }