hr-design-system-handlebars 1.42.3 → 1.43.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.43.0 (Wed Oct 25 2023)
+
+#### 🚀 Enhancement
+
+- Dpe 2222 use grid for episode player [#736](https://github.com/mumprod/hr-design-system-handlebars/pull/736) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v1.42.4 (Wed Oct 25 2023)
+
+#### 🐛 Bug Fix
+
+- Integrate Dark Mode for Podcast Episode Player [#735](https://github.com/mumprod/hr-design-system-handlebars/pull/735) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.42.3 (Mon Oct 16 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1153,9 +1153,6 @@ video {
 .col-span-3 {
   grid-column: span 3 / span 3;
 }
-.col-span-8 {
-  grid-column: span 8 / span 8;
-}
 .col-span-full {
   grid-column: 1 / -1;
 }
@@ -1180,10 +1177,6 @@ video {
 .m-auto {
   margin: auto;
 }
-.-mx-3 {
-  margin-left: -0.75rem;
-  margin-right: -0.75rem;
-}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -1342,9 +1335,6 @@ video {
 .mr-4 {
   margin-right: 1rem;
 }
-.mr-6 {
-  margin-right: 1.5rem;
-}
 .mt-0 {
   margin-top: 0px;
 }
@@ -2282,9 +2272,21 @@ video {
 .to-purple-100 {
   --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
 }
+.fill-\[\#006dc1\] {
+  fill: #006dc1;
+}
+.fill-\[\#3b5999\] {
+  fill: #3b5999;
+}
+.fill-\[\#4dc247\] {
+  fill: #4dc247;
+}
 .fill-\[\#55acee\] {
   fill: #55acee;
 }
+.fill-\[\#606060\] {
+  fill: #606060;
+}
 .fill-blue-congress {
   fill: #005293;
 }
@@ -3038,7 +3040,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1697445217445;
+  counter-reset: cnt1698244023078;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3116,6 +3118,34 @@ video {
             [main-start] minmax(0, 63.75rem) [main-end]
             minmax(0, 1fr) [full-end];
     }
+.grid-content {
+        grid-template-areas:
+    "head"
+    "main "
+    "aside";
+        grid-template-columns: 100%;
+    }
+@media only screen and (min-width: 600px){
+        .grid-content {
+            grid-template-areas:
+    "head head"
+    "main  aside";
+
+            grid-template-columns: 3fr 1fr;
+        }
+    }
+.head{
+        grid-area: head;
+    }
+.main{
+        grid-area: main;
+    }
+.aside{
+        grid-area: aside;
+    }
+.col-main {
+        grid-column: main;
+    }
 .col-full {
         grid-column: full;
     }
@@ -3273,7 +3303,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1697445217445 1;
+  counter-increment: cnt1698244023078 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3289,7 +3319,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1697445217445);
+  content: counter(cnt1698244023078);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -3389,6 +3419,7 @@ video {
     --color-highlight-1: #eaf3fa;
     --color-highlight-2: #d34600;
     --color-highlight-3: #707070;
+    --color-highlight-1-dark: #2d2d2d;
 
     /* Text */
     --color-standard-text: #000000;
@@ -3490,7 +3521,9 @@ video {
     --color-content-nav: var(--color-primary-ds);
     /* Podcast-Player */
     --color-podcast: #006dc1;
+    --color-podcast-dark : var(--color-highlight-1-dark);
     --color-podcast-text: var(--color-link);
+    --color-podcast-text-dark: var(---color-standard-text-dark);
     /* Byline */
     --color-byline: #606060;
     /* Font */
@@ -4643,9 +4676,6 @@ video {
 .backdrop\:bg-gray-scorpion\/90::backdrop {
   background-color: rgba(96, 96, 96, 0.9);
 }
-.first\:mt-6:first-child {
-  margin-top: 1.5rem;
-}
 .first\:border-t:first-child {
   border-top-width: 1px;
 }
@@ -4665,9 +4695,6 @@ video {
   border-color: #fff;
   border-color: var(--color-navigation-border-color);
 }
-.last\:pb-6:last-child {
-  padding-bottom: 1.5rem;
-}
 .last\:pr-0:last-child {
   padding-right: 0px;
 }
@@ -4893,6 +4920,18 @@ video {
 .after\:col-full::after {
         grid-column: full;
     }
+[class~='tw-dark'] .dark\:bg-highlight-1-dark {
+  background-color: #2d2d2d;
+  background-color: var(--color-highlight-1-dark);
+}
+[class~='tw-dark'] .dark\:bg-podcast-dark {
+  background-color: #2d2d2d;
+  background-color: var(--color-podcast-dark);
+}
+[class~='tw-dark'] .dark\:bg-podcast-text {
+  background-color: #006eb7;
+  background-color: var(--color-podcast-text);
+}
 [class~='tw-dark'] .dark\:fill-link-dark {
   fill: #006eb7;
   fill: var(--color-link-dark);
@@ -4901,10 +4940,21 @@ video {
   color: #006eb7;
   color: var(--color-link-dark);
 }
+[class~='tw-dark'] .dark\:text-podcast-text {
+  color: #006eb7;
+  color: var(--color-podcast-text);
+}
+[class~='tw-dark'] .dark\:text-podcast-text-dark {
+  color: #F0F0F0;
+  color: var(--color-standard-text-dark);
+}
 [class~='tw-dark'] .dark\:text-text-dark {
   color: #F0F0F0;
   color: var(--color-standard-text-dark);
 }
+[class~='tw-dark'] .dark\:ring-podcast {
+  --tw-ring-color: var(--color-podcast);
+}
 @media print {
 
   .print\:flex {
@@ -4997,6 +5047,10 @@ video {
     margin-right: 2rem;
   }
 
+  .sm\:ml-8 {
+    margin-left: 2rem;
+  }
+
   .sm\:mt-1 {
     margin-top: 0.25rem;
   }
@@ -5017,6 +5071,10 @@ video {
     width: 58.333333%;
   }
 
+  .sm\:w-\[220px\] {
+    width: 220px;
+  }
+
   .sm\:w-fit {
     width: -webkit-fit-content;
     width: -moz-fit-content;

package/dist/assets/js/components/podcast/podcast_player.alpine.js

@@ -101,6 +101,9 @@ export default function playaudio() {
         },
 
         updateCurrentTime(range, timeDisplay, newTime, id) {
+            let darkmodeColor;
+            window.matchMedia('(prefers-color-scheme: dark)').matches && document.getElementsByTagName('html')[0].classList.contains('tw-dark') ? darkmodeColor = "var(--color-podcast) " : darkmodeColor = "white "
+
             timeDisplay.querySelector('.js-currentTime').innerHTML = this.fancyTimeFormat(
                 newTime,
                 false
@@ -108,7 +111,7 @@ export default function playaudio() {
             range.style.background =
                 'linear-gradient(to right, var(--color-podcast) ' +
                 range.value / 10 +
-                '%, white ' +
+                '%,'+ darkmodeColor +
                 range.value / 10 +
                 '% )'
             range.value = ((100 * newTime) / this.playlist[id].audioElement.duration) * 10

package/dist/views/components/article/components/podcast/podcast_episode_article.hbs

@@ -1,40 +1,41 @@
 <article class="grid grid-page">
-<div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
-    {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
-</div>
-<div class="order-1 col-span-8 px-5">
-    {{> components/podcast/components/podcast_player_shorttext }}
-</div>
-<div class="order-3 col-span-8">
-    {{> components/content/content_footer/content_footer 
-        _author=this.audioAuthor
-        _showDate=this.hasDwellTime
-        _date=this.airdateDate
-        _copyright=this.copyright
-        _isArchiveContent=this.isArchiveContent
-        _posterCopyright="poster_copyright"}}
-</div>
+    <div class="grid pt-6 col-main grid-content">
+        <div class="p-5 head bg-highlight-1 dark:bg-highlight-1-dark rounded-tl-hr rounded-br-hr">
+            {{> components/podcast/podcast_player _linkTitle=true _isSinglePage=true _isArticlePlayer=true}}
+        </div>
+        <div class="pt-6 main">
+            {{> components/podcast/components/podcast_player_shorttext }}
+            {{> components/content/content_footer/content_footer
+                    _author=this.audioAuthor
+                    _showDate=this.hasDwellTime
+                    _date=this.airdateDate
+                    _copyright=this.copyright
+                    _isArchiveContent=this.isArchiveContent
+                    _posterCopyright="poster_copyright"}}
+        </div>
 
-<aside class="order-4 col-full md:order-2 md:col-span-4"
-    aria-label='{{loca "appendix_title"}}'>
-    <div class="c-appendix">
-        {{#unless _webview}}
-           {{!--  {{~#with this.backLinkUrl ~}}
-                {{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
-            {{~/with~}}
+        <aside class="order-4 pt-6 aside md:order-2 sm:ml-8 sm:w-[220px]"
+               aria-label='{{loca "appendix_title"}}'>
+            <div class="c-appendix">
+                {{#unless _webview}}
+                {{!--  {{~#with this.backLinkUrl ~}}
+                        {{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
+                    {{~/with~}}
 
-            {{~#with this.geotag ~}}
-                {{~> modules/geotag/geotag-list ~}}
-            {{~/with~}}
+                    {{~#with this.geotag ~}}
+                        {{~> modules/geotag/geotag-list ~}}
+                    {{~/with~}}
 
-            {{~#with this.topictags ~}}
-                {{~> modules/topictag/topictag-list ~}}
-            {{~/with~}} --}}
+                    {{~#with this.topictags ~}}
+                        {{~> modules/topictag/topictag-list ~}}
+                    {{~/with~}} --}}
 
-            {{!-- {{~#with this.socialSharing ~}}
-                {{~> components/socialmedia/socialmedia ~}}
-            {{~/with~}} --}}
-        {{/unless}}
+                    {{~#with this.socialSharing ~}}
+                        {{~> components/socialmedia/socialmedia ~}}
+                    {{~/with~}}
+                {{/unless}}
+            </div>
+        </aside>
     </div>
-</aside>    
-</article>
+</article>
+

package/dist/views/components/content/content_footer/content_footer.hbs

@@ -1,19 +1,19 @@
-<footer class="flex flex-col px-5 text-sm font-copy{{#if _addClass}} {{_addClass}}{{/if}}">
+<footer class="flex flex-col mt-10 text-xs font-copy{{#if _addClass}} {{_addClass}}{{/if}}">
     {{~#with _author ~}}
-        <p class="block first:mt-6 contentFooter__byline text__byline">
+        <p>
             Autor: {{this}}
         </p>
     {{~/with~}}
     {{#if _showDate ~}}
         {{#with _date}}
-            <p class="block contentFooter__byline text__byline">
+            <p>
                 <time datetime="{{this.htmlDateTime}}">{{loca "date_published" this.date this.time }}</time>
             </p>
         {{/with~}}
     {{/if}}
 
     {{~#with _source}}
-        <p class="block contentFooter__byline text__byline">
+        <p>
             {{~loca "copyright_source"~}}
             {{~#each this}}
                 {{~#if @first}} {{this}}{{else}}, {{this}}{{/if~}}
@@ -22,20 +22,20 @@
     {{/with~}}
 
     {{~#with _copyright ~}}
-        <p class="block contentFooter__byline text__byline">
+        <p>
             {{~loca "copyright_source"}} {{loca "copyright_symbol" this ~}}
         </p>
     {{~/with~}}
 
     {{~#if _isArchiveContent}}
-        <p class="block contentFooter__byline text__byline">
+        <p>
             {{loca "archive_content"}}
         </p>
     {{/if}}
 
     {{~#with _posterCopyright ~}}
         {{~#with ../teaseritem.copyrightWithLinks}}
-            <p class="block contentFooter__byline text__byline">
+            <p>
                 {{~loca ../this this}}
             </p>
         {{~/with~}}
@@ -43,7 +43,7 @@
 
     <!-- TODO teaseritem.copyrightWithLinks dont work in gallery, generalize model -->
     {{~#with _galleryCopyright ~}}
-        <p class="block contentFooter__byline text__byline">
+        <p>
             {{~loca this ../copyrightWithLinks}}
         </p>
     {{~/with~}}

package/dist/views/components/grid/grid_item.hbs

@@ -1,3 +1,3 @@
-<article class="col-span-12 {{inline-switch _size '["12","8","6","4","3"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}" >
+<article class="col-span-12 {{inline-switch _size '["12","9","8","6","4","3"]' '["","md:col-span-9","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}" >
     {{> @partial-block }}    
 </article>

package/dist/views/components/podcast/components/podcast_playbutton.hbs

@@ -5,10 +5,10 @@
     class="flex justify-start cursor-pointer group ds-button-round  {{_css}}"
     aria-label="Podcast starten"
     >           
-    <div class="text-white rounded-full js-playbutton bg-podcast ring-white ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
+    <div class="text-white rounded-full js-playbutton bg-podcast dark:bg-podcast-dark ring-white dark:ring-podcast dark:text-podcast-text ring js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:play"}]}'>
         {{> components/base/image/icon _icon="play-wide" _iconmap="icons" _addClass="inline w-12 h-12 fill-current"}}
     </div>
-    <div class="hidden bg-white rounded-full js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
+    <div class="hidden bg-white rounded-full dark:bg-podcast-dark js-pausebutton ring-podcast ring text-podcast-text js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "clickLabel": "podcastPlayer:pause"}]}'>
         {{> components/base/image/icon _icon="pause" _iconmap="icons" _addClass="inline py-2 w-12 h-12 fill-current"}}
     </div>  
 </button>

package/dist/views/components/podcast/components/podcast_player_shorttext.hbs

@@ -1,7 +1,7 @@
 {{#unless _isSinglePage}}
   {{#unless this.hideShortText}}
       {{~#with this.shorttext}}
-          <div class="col-span-12 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
+          <div class="col-span-12 text-sm md:text-base font-copy">
               <span class="c-teaser__shorttext"> {{this}} </span>
           </div>
       {{/with~}}

package/dist/views/components/podcast/components/podcast_player_ui.hbs

@@ -52,7 +52,7 @@
                         min="0" 
                         max="1000"
                         value="0"
-                        class="h-1 my-4 bg-white appearance-none cursor-pointer ds-link grow seek_slider" 
+                        class="h-1 my-4 bg-white appearance-none cursor-pointer dark:bg-podcast-text ds-link grow seek_slider" 
                         aria-label="Schieberegler" >  
                 </div>
 
@@ -62,8 +62,8 @@
                         {{> components/podcast/components/podcast_timedisplay 
                         _id=_id
                         _duration=duration
-                        _currentTimeClasses="font-bold text-podcast-text" 
-                        _durationClasses="text-podcast-text" 
+                        _currentTimeClasses="font-bold text-podcast-text dark:text-podcast-text-dark" 
+                        _durationClasses="text-podcast-text dark:text-podcast-text-dark" 
                         _containerCss="flex text-sm grow font-heading" }}
                     </div>
                 {{/if}}
@@ -76,8 +76,8 @@
             {{> components/podcast/components/podcast_timedisplay 
                 _id=_id
                 _duration=duration 
-                _currentTimeClasses="font-bold text-podcast-text" 
-                _durationClasses="text-podcast-text" 
+                _currentTimeClasses="font-bold text-podcast-text dark:text-podcast-text-dark" 
+                _durationClasses="text-podcast-text dark:text-podcast-text-dark" 
                 _containerCss="pl-16 -mt-3 flex text-sm grow font-heading"}}              
             </div>
         {{/unless}}

package/dist/views/components/podcast/components/podcast_title.hbs

@@ -1,11 +1,11 @@
 {{#if this.isSingleChannel}}
-    {{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
+    {{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text dark:text-podcast-text-dark"}}
         <span class="mt-0.5 group-hover:underline {{#if ../../_ordered-adjust_context}} pl-8 {{/if}}line-clamp-4 {{inline-switch ../../_teaserSize-adjust_context '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
             {{~../../_title-adjust_context~}}
         </span>
     {{/components/base/link}}
 {{else}}
-    <div class="font-title text-base mt-2.5 text-podcast-text">
+    <div class="font-title text-base mt-2.5 text-podcast-text dark:text-podcast-text-dark">
         <span class="mt-0.5 {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
             {{~_title~}}
         </span>

package/dist/views/components/podcast/podcast_player.hbs

@@ -1,79 +1,79 @@
-<div class="flex col-span-12 p-5">   
-  <div class="flex flex-col grow">
-  {{!-- First Row --}}
-    <div class="flex flex-row {{#if ../_ordered}} pl-8 {{/if}} ">
-      <div class="flex flex-col grow">  
-        <div class="flex max-h-6">
-          {{!-- Label / Airdate --}}
-          {{#with label}} 
-            <div class="">
+<div class="flex col-span-12 {{#unless _isArticlePlayer}} p-5 {{/unless}} {{#if _isArticlePlayer}} bg-highlight-1 {{/if}}">
+    <div class="flex flex-col grow">
+        {{!-- First Row --}}
+        <div class="flex flex-row {{#if ../_ordered}} pl-8 {{/if}} ">
+            <div class="flex flex-col grow">
+                <div class="flex max-h-6">
+                    {{!-- Label / Airdate --}}
+                    {{#with label}}
+                        <div class="">
               <span class='sb-label mr-2 rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading bg-labelMedia'>
-                {{ loca this.loca }}
+                  {{ loca this.loca }}
               </span>
             </div> 
           {{/with}}
           
           
-            <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text">
+            <div class="flex pr-2 text-xs grow md:pr-5 font-headingSerif text-podcast-text dark:text-podcast-text-dark">
               {{~#with airdateDate}}
                 <time class="flex grow pt-1.5" datetime="{{this.htmlDateTime}}">{{this.date}}</time>
               {{/with}}
 
-              {{!-- Download --}}
-              {{> components/podcast/components/podcast_downloadbutton 
-                _addClass=""
-                _iconClass="h-6 w-6 text-podcast-text fill-current"
-                _url=this.podcastDownloadUrl }}
+                        {{!-- Download --}}
+                        {{> components/podcast/components/podcast_downloadbutton
+                                _addClass=""
+                                _iconClass="h-6 w-6 text-podcast-text fill-current"
+                                _url=this.podcastDownloadUrl }}
 
-            </div>
-        </div>
+                    </div>
+                </div>
 
-        {{!-- Überschrift: --}}
-        <div class="flex pb-5 pr-2 md:pr-5">          
-          {{> components/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}  
-        </div>
+                {{!-- Überschrift: --}}
+                <div class="flex pb-5 pr-2 md:pr-5">
+                    {{> components/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}
+                </div>
+
+            </div>
 
-      </div>
+            {{!-- Podcast Image      --}}
+            <div class="flex flex-col ">
+                <div class="w-22 {{#if _isArticlePlayer }} md:w-32 lg:w-42 {{else}} {{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}} {{/if}}">
+                    {{> components/base/image/responsive_image this.teaseritem
+                            _type="podcastEpisodePlayer"
+                            _variant="default"
+                            _addClass="overflow-hidden"
+                            _noDelay=this.dontLazyload
+                            _addClassImg="w-full block"
+                    }}
+                </div>
+            </div>
 
-      {{!-- Podcast Image      --}}
-      <div class="flex flex-col ">
-        <div class="w-22 {{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}">
-          {{> components/base/image/responsive_image this.teaseritem 
-            _type="podcastEpisodePlayer"
-            _variant="default"
-            _addClass="overflow-hidden"
-            _noDelay=this.dontLazyload 
-            _addClassImg="w-full block"
-          }}
         </div>
-      </div>
 
-    </div>
+        {{!-- Player UI --}}
+        <div class="flex {{#if _isArticlePlayer }} lg:pr-48 lg:-mt-14 {{else}} {{inline-switch this.realTeaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14"," "]'}} {{/if}}"
+             x-data="podcastPlayer()"
+             x-init="listenToGlobalStop()"
+             ax-load
+             x-ignore>
+            {{> components/podcast/components/podcast_player_ui
+                    _isPlaylistPlayer=false
+                    _podcastDuration=duration
+                    _id=(nextRandom)
+                    _first=true
+            }}
+        </div>
 
-    {{!-- Player UI --}}
-    <div class="flex {{inline-switch this.realTeaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14"," "]'}}" 
-      x-data="podcastPlayer()"
-      x-init="listenToGlobalStop()"
-      ax-load
-      x-ignore>
-      {{> components/podcast/components/podcast_player_ui 
-        _isPlaylistPlayer=false
-        _podcastDuration=duration
-        _id=(nextRandom) 
-        _first=true
-      }}    
-    </div>    
-  
-    {{!-- Abo-Dropdown    --}}
-    <div class="flex flex-row pt-5">
-      {{#with this.podcastChannel}}       
-        {{> components/podcast/components/podcast_subscribe_button}}
-      {{/with}}
+        {{!-- Abo-Dropdown    --}}
+        <div class="flex flex-row pt-5">
+            {{#with this.podcastChannel}}
+                {{> components/podcast/components/podcast_subscribe_button}}
+            {{/with}}
 
       {{#with this.podcastChannel}}    
         {{!-- Sendungs-Link --}}
         <div class="flex justify-end w-full pl-4">
-          <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text">
+          <div class="flex flex-col flex-wrap self-end text-xs font-heading text-podcast-text dark:text-podcast-text-dark">
             <span class="self-end font-bold">Zur Sendung</span>
             <a class="self-end underline ds-link" href="{{this.url}}">{{this.title}}</a>
           </div>