🚸 Add ability to change link targets and titles

assets/css/compiled/main.css

@@ -1008,11 +1008,6 @@ video {
   border-radius: 0.12rem;
 }
 
-body a,
-body button {
-  /* @apply transition; */
-}
-
 /* Scale SVG icons to text size */
 
 .icon svg {
@@ -1187,6 +1182,30 @@ body button {
   background-color: #ff0000;
 }
 
+/* -- Chroma Highlight -- */
+
+/* Background */
+
+.prose .chroma {
+  border-radius: 0.375rem;
+  --tw-bg-opacity: 1;
+  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(63, 63, 70, var(--tw-text-opacity));
+}
+
+@media (prefers-color-scheme: dark) {
+  .prose .chroma {
+    --tw-bg-opacity: 1;
+    background-color: rgba(63, 63, 70, var(--tw-bg-opacity));
+  }
+
+  .prose .chroma {
+    --tw-text-opacity: 1;
+    color: rgba(228, 228, 231, var(--tw-text-opacity));
+  }
+}
+
 .relative {
   position: relative;
 }

assets/css/main.css

@@ -3,11 +3,6 @@
 @tailwind base;
 @tailwind components;
 
-body a,
-body button {
-  /* @apply transition; */
-}
-
 /* Scale SVG icons to text size */
 .icon svg {
   height: 1em;
@@ -134,4 +129,10 @@ body button {
   background-color: #ff0000;
 }
 
+/* -- Chroma Highlight -- */
+/* Background */
+.prose .chroma {
+  @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
+}
+
 @tailwind utilities;