💄 style: set custom header anchor

welpo · Jun 18, 2023 · 5bdb804 · 5bdb804
1 parent c47198f
commit 5bdb804
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 35 deletions.
diff --git a/sass/main.scss b/sass/main.scss
@@ -36,6 +36,7 @@
 @import 'parts/posts_list.scss';
 @import 'parts/tags.scss';
 @import 'parts/pagination.scss';
+@import 'parts/_header-anchor.scss';
 @import 'syntax/syntax-ayu-dark.scss';
 
 :root {
@@ -142,6 +143,10 @@ article {
     margin-top: -5vmin;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    position: relative;
+}
+
 h1 {
     display: block;
     font-size: 1.5em;

diff --git a/sass/parts/_header-anchor.scss b/sass/parts/_header-anchor.scss
@@ -0,0 +1,35 @@
+.header-anchor {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    width: 1.9rem;
+    margin-left: -2rem;
+    padding-right: 0.3rem;
+    opacity: 0;
+    user-select: none;
+    height: 100%;
+
+    @media (max-width: 500px) {
+        display: none;
+    }
+}
+
+.link-icon {
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.78 3.653a3.936 3.936 0 1 1 5.567 5.567l-3.627 3.627a3.936 3.936 0 0 1-5.88-.353.75.75 0 0 0-1.18.928 5.436 5.436 0 0 0 8.12.486l3.628-3.628a5.436 5.436 0 1 0-7.688-7.688l-3 3a.75.75 0 0 0 1.06 1.061l3-3Z'%3E%3C/path%3E%3Cpath d='M7.28 11.153a3.936 3.936 0 0 1 5.88.353.75.75 0 0 0 1.18-.928 5.436 5.436 0 0 0-8.12-.486L2.592 13.72a5.436 5.436 0 1 0 7.688 7.688l3-3a.75.75 0 1 0-1.06-1.06l-3 3a3.936 3.936 0 0 1-5.567-5.568l3.627-3.627Z'%3E%3C/path%3E%3C/svg%3E");
+    background: var(--text-color);
+    align-self: center;
+    cursor: pointer;
+    width: 1rem;
+    height: 1rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    &:hover .header-anchor {
+        opacity: 1;
+    }
+
+    .header-anchor:hover {
+        background-color: transparent;
+    }
+}
diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss
@@ -25,40 +25,6 @@ iframe {
     margin-bottom: 3vmin;
 }
 
-.zola-anchor {
-    font-size: 1rem;
-    position: absolute;
-    margin-left: -1.9em;
-    padding-right: 0.45em;
-    padding-left: 0.4em;
-    opacity: 0;
-    user-select: none;
-}
-
-h1:hover .zola-anchor,
-h2:hover .zola-anchor,
-h3:hover .zola-anchor,
-h4:hover .zola-anchor,
-h5:hover .zola-anchor,
-h6:hover .zola-anchor {
-    opacity: 1;
-}
-
-h1 .zola-anchor:hover,
-h2 .zola-anchor:hover,
-h3 .zola-anchor:hover,
-h4 .zola-anchor:hover,
-h5 .zola-anchor:hover,
-h6 .zola-anchor:hover {
-    background-color: transparent;
-}
-
-@media (max-width: 500px) {
-    .zola-anchor {
-        display: none;
-    }
-}
-
 ul {
     margin-top: 0;
 }
@@ -119,7 +85,7 @@ a:hover {
     color: var(--hover-color);
 }
 
-a:not(.no-hover-padding, .zola-anchor)::before {
+a:not(.no-hover-padding)::before {
     content: "";
     position: absolute;
     top: 0;

diff --git a/templates/anchor-link.html b/templates/anchor-link.html
@@ -0,0 +1 @@
+<a class="header-anchor no-hover-padding" href="#{{ id }}" aria-label="Anchor link for: {{ id }}"><span class="link-icon" aria-hidden="true"></span></a>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<a class="header-anchor no-hover-padding" href="#{{ id }}" aria-label="Anchor link for: {{ id }}"><span class="link-icon" aria-hidden="true"></span></a>