From 035161c2ce6ef74b3c2b654bd9c11a4e6710de23 Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Thu, 11 Jul 2024 18:23:09 +0200
Subject: [PATCH] Add typography classes for external links

REDMINE-20782
---
 .../doc/creating_themes/custom_typography.md  |  2 ++
 .../frontend/ExternalLink.module.css          | 24 ++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/entry_types/scrolled/doc/creating_themes/custom_typography.md b/entry_types/scrolled/doc/creating_themes/custom_typography.md
index 029700680..fd7860adb 100644
--- a/entry_types/scrolled/doc/creating_themes/custom_typography.md
+++ b/entry_types/scrolled/doc/creating_themes/custom_typography.md
@@ -79,6 +79,8 @@ The following rule names are supported:
 | `default_navigation_chapter_link` | Applies to chapter links in the default navigation. |
 | `default_navigation_chapter_summary` | Applies to chapter summary texts in the default navigation. |
 | `default_navigation_active_chapter_link` | Applies to the chapter link representing the current chapter. |
+| `external_link_title` | Applies to titles of external links. |
+| `external_link_description` | Applies to descriptions of external links. |
 
 ### Responsive Breakpoints
 
diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
index 26fce8add..9d2b46f1f 100644
--- a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
+++ b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
@@ -69,24 +69,30 @@
   --content-text-color: var(--theme-external-links-card-text-color, lightContentTextColor);
 }
 
-.details > .link_title {
+.link_title,
+.link_desc {
+  width: 100%;
+  white-space: normal;
+  line-height: 1.3em;
+  margin-bottom: 0;
+}
+
+.link_title {
+  composes: typography-externalLinkTitle from global;
   font-weight: bold;
   margin: 0 0 20px;
 }
 
+.link_desc {
+  composes: typography-externalLinkDescription from global;
+}
+
 @media screen and breakpoint-sm {
-  .details > .link_title {
+  .link_title {
     font-size: 1.2em;
   }
 }
 
-.details > p {
-  width: 100%;
-  white-space: normal;
-  line-height: 1.3em;
-  margin-bottom: 0;
-}
-
 .tooltip {
   position: absolute;
   left: 50%;