Highlighted links and rounded image borders in prose text

hopfenspace · May 28, 2024 · 92ff69a · 92ff69a
1 parent 5d98c3e
commit 92ff69a
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 1 deletion.
diff --git a/assets/index.css b/assets/index.css
@@ -1705,6 +1705,41 @@ video {
   outline-color: #4f46e5;
 }
 
+.prose-a\:text-indigo-500 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  --tw-text-opacity: 1;
+  color: rgb(99 102 241 / var(--tw-text-opacity));
+}
+
+.prose-a\:text-indigo-600 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
+.prose-a\:text-indigo-400 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity));
+}
+
+.hover\:prose-a\:text-indigo-700 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
+  --tw-text-opacity: 1;
+  color: rgb(67 56 202 / var(--tw-text-opacity));
+}
+
+.hover\:prose-a\:text-indigo-800 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 48 163 / var(--tw-text-opacity));
+}
+
+.prose-img\:rounded-2xl :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  border-radius: 1rem;
+}
+
+.prose-img\:shadow-2xl :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 @media (min-width: 640px) {
   .sm\:-mr-80 {
     margin-right: -20rem;
@@ -1938,4 +1973,44 @@ video {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(30 27 75 / var(--tw-ring-opacity));
   }
+
+  .dark\:prose-a\:text-indigo-500 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+    --tw-text-opacity: 1;
+    color: rgb(99 102 241 / var(--tw-text-opacity));
+  }
+
+  .dark\:prose-a\:text-indigo-300 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+    --tw-text-opacity: 1;
+    color: rgb(165 180 252 / var(--tw-text-opacity));
+  }
+
+  .dark\:prose-a\:text-indigo-400 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+    --tw-text-opacity: 1;
+    color: rgb(129 140 248 / var(--tw-text-opacity));
+  }
+
+  .dark\:prose-a\:text-indigo-700 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+    --tw-text-opacity: 1;
+    color: rgb(67 56 202 / var(--tw-text-opacity));
+  }
+
+  .dark\:prose-a\:text-indigo-900 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+    --tw-text-opacity: 1;
+    color: rgb(49 46 129 / var(--tw-text-opacity));
+  }
+
+  .dark\:prose-a\:text-indigo-600 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
+    --tw-text-opacity: 1;
+    color: rgb(79 70 229 / var(--tw-text-opacity));
+  }
+
+  .dark\:hover\:prose-a\:text-indigo-400 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
+    --tw-text-opacity: 1;
+    color: rgb(129 140 248 / var(--tw-text-opacity));
+  }
+
+  .dark\:hover\:prose-a\:text-indigo-200 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
+    --tw-text-opacity: 1;
+    color: rgb(199 210 254 / var(--tw-text-opacity));
+  }
 }
diff --git a/layouts/aktionsteams/single.html b/layouts/aktionsteams/single.html
@@ -1,7 +1,11 @@
 {{ define "main" }}
 <div class="flex w-full justify-center p-6 pt-20">
   <div class="grid gap-24 lg:grid-cols-[1fr_20rem]">
-    <div class="prose dark:prose-invert">{{ .Content }}</div>
+    <div
+      class="prose dark:prose-invert prose-a:text-indigo-500 hover:prose-a:text-indigo-800 prose-img:rounded-2xl dark:prose-a:text-indigo-400 dark:hover:prose-a:text-indigo-200"
+    >
+      {{ .Content }}
+    </div>
     {{ with resources.Get "img/coding-isometric-03.png" }}
     <img alt="symbolbild" src="{{ .RelPermalink }}" class="hidden lg:block" />
     {{ end }}