Add .heading__link styles

2024-11-29 14:32:14 -06:00
parent 45e94e4484
commit 84c11e11f5
1 changed files with 30 additions and 0 deletions
@@ -0,0 +1,30 @@
+.heading__link {
+  --hover-size: 0;
+  --opacity: 0.5;
+  --size: 0.8em;
+
+  background: url(link.svg) no-repeat center bottom 0.2em;
+  background-size: var(--size);
+  block-size: 1em;
+  color: var(--color-link);
+  display: inline-flex;
+  font-size: var(--size);
+  inline-size: var(--size);
+  padding: 1em 0 0;
+  opacity: var(--opacity);
+  overflow: hidden;
+  transition: opacity 300ms ease;
+  vertical-align: middle;
+
+  @media (hover: hover) {
+    --opacity: 0;
+
+    :is(h1, h2, h3, h4, h5, h6):hover & {
+      --opacity: 0.5;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    filter: invert(1);
+  }
+}