init

themes/duckquill/sass/_zola-anchor.scss

@@ -0,0 +1,62 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	&:hover .zola-anchor {
+		transform: translateY(-0.125em);
+		opacity: 1;
+
+		:root[dir*="rtl"] & {
+			transform: translateY(-0.125em);
+		}
+	}
+}
+
+.zola-anchor {
+	position: absolute;
+	transform: translateX(0.5rem) translateY(-0.125em);
+	opacity: 0;
+	transition: var(--transition);
+	margin-inline-start: calc(-1em + -0.5rem);
+	color: var(--fg-muted-4);
+	line-height: 1;
+
+	@media only screen and (max-width: 832px) {
+		display: none;
+	}
+
+	:root[dir*="rtl"] & {
+		transform: translateX(-0.5rem) translateY(-0.125em);
+	}
+
+	&:hover {
+		color: var(--accent-color);
+	}
+
+	&:active {
+		transform: var(--active);
+	}
+
+	&:focus-visible {
+		opacity: 1;
+	}
+
+	.icon {
+		-webkit-mask-image: var(--icon-link);
+		mask-image: var(--icon-link);
+		mask-size: cover;
+		transition: var(--transition);
+		width: 1em;
+		height: 1em;
+
+		:root[dir*="rtl"] & {
+			transform: scaleX(-1);
+		}
+	}
+}
+
+:target .zola-anchor {
+	color: var(--accent-color-alpha);
+}