Add ctoneedtoknow overview page and detail page

innoq · Dec 14, 2023 · 3e902bb · 3e902bb
1 parent 572696e
commit 3e902bb
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 66 deletions.
diff --git a/...now-podcast/ctoneedtoknow-podcast-overview-page/_ctoneedtoknow-podcast-overview-page.scss b/...now-podcast/ctoneedtoknow-podcast-overview-page/_ctoneedtoknow-podcast-overview-page.scss
@@ -1,16 +1,26 @@
-.podcast-overview-page {
+.ctoneedtoknow-podcast-overview-page {
+  ::selection {
+    background: $brand-gray-20;
+  }
+
   .topic-header {
     margin-bottom: $spacer-lg;
   }
 
+  .topic-header__body {
+    color: $brand-gray;
+    background-color: $brand-white;
+  }
+
   .toolbar__link {
-    .icon {
-      background: $brand-secondary;
-    }
+    padding: $spacer-xs;
+    color: $brand-gray;
+    transition: standard-transition(background-color);
 
     &:hover,
     &:focus {
       color: $brand-white;
+      background-color: $brand-gray;
 
       .icon {
         background: $brand-white;

diff --git a/...know-podcast/ctoneedtoknow-podcast-overview-page/ctoneedtoknow-podcast-overview-page.html b/...know-podcast/ctoneedtoknow-podcast-overview-page/ctoneedtoknow-podcast-overview-page.html
@@ -1,8 +1,8 @@
-<main role="main" class="podcast-overview-page">
-    <header class="topic-header bg-image-edition-05">
+<main role="main" class="ctoneedtoknow-podcast-overview-page">
+    <header class="topic-header bg-image-podcast-02">
         <div class="topic-header__body">
             <div>
-                <h1 class="topic-header__title bg-image-edition-05">Der INNOQ Podcast</h1>
+                <h1 class="topic-header__title bg-image-podcast-02">#CTO<br>NEED<br>TO<br>KNOW</h1>
             </div>
             <div class="topic-header__text">
                 Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
@@ -15,58 +15,42 @@ <h1 class="topic-header__title bg-image-edition-05">Der INNOQ Podcast</h1>
             <ul class="toolbar">
                 <li class="toolbar__item">
                     <a href="#" class="toolbar__link">
-                        <span class="icon icon-feedback icon--brand-secondary"></span>
+                        <span class="icon icon-feedback icon--brand-gray"></span>
                         Feedback
                     </a>
                 </li>
                 <li class="toolbar__item">
                     <a href="#" class="toolbar__link">
-                        <span class="icon icon-apple-itunes icon--brand-secondary"></span>
+                        <span class="icon icon-apple-itunes icon--brand-gray"></span>
                         Apple
                     </a>
                 </li>
                 <li class="toolbar__item">
                     <a href="#" class="toolbar__link">
-                        <span class="icon icon-spotify icon--brand-secondary"></span>
+                        <span class="icon icon-spotify icon--brand-gray"></span>
                         Spotify
                     </a>
                 </li>
                 <li class="toolbar__item">
                     <a href="#" class="toolbar__link">
-                        <span class="icon icon-rss icon--brand-secondary"></span>
+                        <span class="icon icon-rss icon--brand-gray"></span>
                         RSS
                     </a>
                 </li>
                 <li class="toolbar__item">
                     <a href="#" class="toolbar__link">
-                        <span class="icon icon-text icon--brand-secondary"></span>
+                        <span class="icon icon-text icon--brand-gray"></span>
                         Transkript
                     </a>
                 </li>
             </ul>
-            <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
+            <span class="icon icon-arrow-long-down icon--brand-gray"></span>
         </div>
     </header>
 
     <article class="teaser-page-layout">
         <div class="podcast-grid">
-            <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
-                <div class="podcast-teaser__body">
-                    <div class="podcast-teaser__caption">Podcast</div>
-                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
-                    <h3 class="podcast-teaser__subheadline">
-                        Podcast Subheadline
-                    </h3>
-                    <span class="icon icon-arrow-long-right icon--brand-white"></span>
-                </div>
-                <div class="podcast-teaser__footer">
-                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
-                        Heribert Innoq
-                    </div>
-                </div>
-            </a>
-
-            <a href="#" class="podcast-teaser podcast-teaser--default">
+            <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-1">
                 <div class="podcast-teaser__body">
                     <div class="podcast-teaser__caption">Podcast</div>
                     <h2 class="podcast-teaser__headline">Podcast Headline</h2>
@@ -85,23 +69,7 @@ <h3 class="podcast-teaser__subheadline">
                 </div>
             </a>
 
-            <a href="#" class="podcast-teaser podcast-teaser--avatar" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
-                <div class="podcast-teaser__body">
-                    <div class="podcast-teaser__caption">Podcast</div>
-                    <h2 class="podcast-teaser__headline">Podcast Headline</h2>
-                    <h3 class="podcast-teaser__subheadline">
-                        Podcast Subheadline
-                    </h3>
-                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
-                </div>
-                <div class="podcast-teaser__footer">
-                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
-                        Heribert Innoq
-                    </div>
-                </div>
-            </a>
-
-            <a href="#" class="podcast-teaser podcast-teaser--default">
+            <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-2">
                 <div class="podcast-teaser__body">
                     <div class="podcast-teaser__caption">Podcast</div>
                     <h2 class="podcast-teaser__headline">Podcast Headline</h2>
@@ -117,7 +85,7 @@ <h3 class="podcast-teaser__subheadline">
                 </div>
             </a>
 
-            <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay--big" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }}), url({{ path '/assets/example-content/heribert-links.png' }}) ">
+            <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-3">
                 <div class="podcast-teaser__body">
                     <div class="podcast-teaser__caption">Podcast</div>
                     <h2 class="podcast-teaser__headline">Podcast Headline</h2>
@@ -127,16 +95,13 @@ <h3 class="podcast-teaser__subheadline">
                     <span class="icon icon-arrow-long-right icon--brand-white"></span>
                 </div>
                 <div class="podcast-teaser__footer">
-                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
-                        Heribert Innoq
-                    </div>
-                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
+                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                         Heribert Innoq
                     </div>
                 </div>
             </a>
 
-            <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
+            <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-4">
                 <div class="podcast-teaser__body">
                     <div class="podcast-teaser__caption">Podcast</div>
                     <h2 class="podcast-teaser__headline">Podcast Headline</h2>
@@ -155,7 +120,7 @@ <h3 class="podcast-teaser__subheadline">
                 </div>
             </a>
 
-            <a href="#" class="podcast-teaser podcast-teaser--default">
+            <a href="#" class="podcast-teaser podcast-teaser--ctoneedtoknow-1">
                 <div class="podcast-teaser__body">
                     <div class="podcast-teaser__caption">Podcast</div>
                     <h2 class="podcast-teaser__headline">Podcast Headline</h2>

diff --git a/...ages/security-podcast/security-podcast-overview-page/_security-podcast-overview-page.scss b/...ages/security-podcast/security-podcast-overview-page/_security-podcast-overview-page.scss
@@ -1,23 +1,27 @@
 .podcast-overview-page--security {
+  ::selection {
+    background: $brand-yellow;
+  }
+
   .topic-header {
     .topic-header__body {
       color: $brand-gray;
       background-color: $brand-white;
     }
+  }
 
-    .toolbar__link {
-      padding: $spacer-xs;
-      color: $brand-gray;
-      transition: standard-transition(background-color);
+  .toolbar__link {
+    padding: $spacer-xs;
+    color: $brand-gray;
+    transition: standard-transition(background-color);
 
-      &:hover,
-      &:focus {
-        background-color: $brand-yellow;
-      }
+    &:hover,
+    &:focus {
+      color: $brand-white;
+      background-color: $brand-gray;
 
-      /* stylelint-disable-next-line selector-max-compound-selectors */
       .icon {
-        background: $brand-gray;
+        background: $brand-white;
       }
     }
   }

diff --git a/...pages/security-podcast/security-podcast-overview-page/security-podcast-overview-page.html b/...pages/security-podcast/security-podcast-overview-page/security-podcast-overview-page.html
@@ -1,4 +1,3 @@
-import { cssRight, cssBoth } from "./components/04-molecules/visual-elements/teaser/tile-teaser/podcast-tile-teaser/config";
 <main role="main" class="podcast-overview-page podcast-overview-page--security">
     <header class="topic-header bg-image-edition-12">
         <div class="topic-header__body">

diff --git a/components/02-layouts/page-layouts/_page-layout-podcast.scss b/components/02-layouts/page-layouts/_page-layout-podcast.scss
@@ -28,7 +28,8 @@
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  .podcast-teaser--avatar--overlay--big {
+  .podcast-teaser--avatar--overlay--big,
+  .podcast-teaser--ctoneedtoknow-4 {
     grid-column: span 2;
   }
 }
diff --git a/components/04-molecules/teaser/tile-teaser/podcast-tile-teaser/_podcast-tile-teaser.scss b/components/04-molecules/teaser/tile-teaser/podcast-tile-teaser/_podcast-tile-teaser.scss
@@ -177,6 +177,37 @@ $podcast-teaser-height-md: ms(35);
   }
 }
 
+.podcast-teaser--ctoneedtoknow-1,
+.podcast-teaser--ctoneedtoknow-2,
+.podcast-teaser--ctoneedtoknow-3,
+.podcast-teaser--ctoneedtoknow-4 {
+  color: $brand-white;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+
+  .podcast-teaser__headline,
+  .podcast-teaser__subheadline {
+    color: $brand-white;
+  }
+}
+
+.podcast-teaser--ctoneedtoknow-1 {
+  @extend %bg-image-podcast-cover-01;
+}
+
+.podcast-teaser--ctoneedtoknow-2 {
+  @extend %bg-image-podcast-cover-02;
+}
+
+.podcast-teaser--ctoneedtoknow-3 {
+  @extend %bg-image-podcast-cover-03;
+}
+
+.podcast-teaser--ctoneedtoknow-4 {
+  @extend %bg-image-podcast-cover-04;
+}
+
 //Breakpoints
 @media screen and (min-width: $grid-breakpoint-md) {
   .podcast-teaser--avatar--overlay--big {

diff --git a/components/06-subatoms/bg-images/_bg-images.scss b/components/06-subatoms/bg-images/_bg-images.scss
@@ -136,6 +136,26 @@
   background-image: asset-url('bg-images/general/visual-podcast-ctoneedtoknow.webp');
 }
 
+.bg-image-podcast-cover-01,
+%bg-image-podcast-cover-01 {
+  background-image: asset-url('bg-images/podcast-episodes/ctoneedtoknow-cover-1.webp');
+}
+
+.bg-image-podcast-cover-02,
+%bg-image-podcast-cover-02 {
+  background-image: asset-url('bg-images/podcast-episodes/ctoneedtoknow-cover-2.webp');
+}
+
+.bg-image-podcast-cover-03,
+%bg-image-podcast-cover-03 {
+  background-image: asset-url('bg-images/podcast-episodes/ctoneedtoknow-cover-3.webp');
+}
+
+.bg-image-podcast-cover-04,
+%bg-image-podcast-cover-04 {
+  background-image: asset-url('bg-images/podcast-episodes/ctoneedtoknow-cover-4.webp');
+}
+
 //Trainings
 .bg-image-trainings-01,
 %bg-image-trainings-01 {

diff --git a/lib/images/bg-images/podcast-episodes/ctoneedtoknow-cover-1.webp b/lib/images/bg-images/podcast-episodes/ctoneedtoknow-cover-1.webp
diff --git a/lib/images/bg-images/podcast-episodes/ctoneedtoknow-cover-2.webp b/lib/images/bg-images/podcast-episodes/ctoneedtoknow-cover-2.webp
diff --git a/lib/images/bg-images/podcast-episodes/ctoneedtoknow-cover-3.webp b/lib/images/bg-images/podcast-episodes/ctoneedtoknow-cover-3.webp
diff --git a/lib/images/bg-images/podcast-episodes/ctoneedtoknow-cover-4.webp b/lib/images/bg-images/podcast-episodes/ctoneedtoknow-cover-4.webp