fix(theme-yun): header-anchor hover styles

YunYouJun · Oct 3, 2023 · b5b3e5b · b5b3e5b · vercel · Oct 3, 2023
1 parent 35abdd8
commit b5b3e5b
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 4 deletions.
diff --git a/packages/valaxy-theme-press/styles/markdown.scss b/packages/valaxy-theme-press/styles/markdown.scss
@@ -21,10 +21,6 @@
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: all 0.4s;
-
-    &:hover {
-      // border-bottom-color: var(--va-c-brand);
-    }
   }
 
   code:not(pre > code) {

diff --git a/packages/valaxy/client/styles/common/markdown.scss b/packages/valaxy/client/styles/common/markdown.scss
@@ -1,6 +1,17 @@
 @use "sass:map";
 
 .markdown-body {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+    font-weight: 600;
+    outline: none;
+  }
+
   figure {
     text-align: center;
   }
@@ -20,3 +31,54 @@
     }
   }
 }
+
+
+// header-anchor
+.markdown-body {
+  .header-anchor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-left: -0.87em;
+    font-weight: 500;
+    user-select: none;
+    opacity: 0;
+    text-decoration: none;
+    transition:
+      color 0.25s,
+      opacity 0.25s;
+  }
+
+  .header-anchor:before {
+    content: var(--va-header-anchor-symbol, '#');
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  h1:hover .header-anchor,
+  h1 .header-anchor:focus,
+  h2:hover .header-anchor,
+  h2 .header-anchor:focus,
+  h3:hover .header-anchor,
+  h3 .header-anchor:focus,
+  h4:hover .header-anchor,
+  h4 .header-anchor:focus,
+  h5:hover .header-anchor,
+  h5 .header-anchor:focus,
+  h6:hover .header-anchor,
+  h6 .header-anchor:focus {
+    opacity: 1;
+  }
+}
+
+
+@media (min-width: 768px) {
+  .markdown-body h1 {
+    letter-spacing: -0.02em;
+    line-height: 40px;
+    font-size: 32px;
+  }
+}
+
diff --git a/packages/valaxy/client/styles/css-vars.scss b/packages/valaxy/client/styles/css-vars.scss
@@ -93,3 +93,11 @@ $c-primary: #0078e7 !default;
   --va-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
   --va-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
 }
+
+/**
+ * Component: Header Anchor
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --va-header-anchor-symbol: '#';
+}