Adds jumplink highlight on target

ghostty-org · Dec 19, 2024 · edd8f11 · edd8f11
1 parent ef4496a
commit edd8f11
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/components/jumplink-header/JumplinkHeader.module.css b/src/components/jumplink-header/JumplinkHeader.module.css
@@ -1,6 +1,12 @@
 .jumplinkHeader {
   display: inline;
   scroll-margin-top: var(--header-height);
+  &:target {
+    & .text {
+      animation: jumplink-highlight 1.5s ease-in-out;
+      border-radius: 8px;
+    }
+  }
 
   & .content {
     display: flex;
@@ -63,3 +69,16 @@
     color: var(--gray-9);
   }
 }
+
+@keyframes jumplink-highlight {
+  from {
+    background-color: color-mix(in srgb, var(--brand-color) 60%, transparent);
+    padding: 6px 16px;
+    margin: -6px -16px;
+  }
+  to {
+    background-color: transparent;
+    padding: 0px;
+    margin: 0px;
+  }
+}
diff --git a/src/components/jumplink-header/index.tsx b/src/components/jumplink-header/index.tsx
@@ -28,7 +28,12 @@ export default function JumplinkHeader({
           [s.h6]: as === "h6",
         })}
       >
-        <Text className={className} as={as} font="display" weight="medium">
+        <Text
+          className={classNames(className, s.text)}
+          as={as}
+          font="display"
+          weight="medium"
+        >
           {children}
         </Text>
         <a href={`#${id}`} className={s.jumplinkCopy}>