# Ctoneedtoknow Podcast Detail Page

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <main role="main" class="podcast-detail-page podcast-detail-page--ctoneedtoknow">
        <header class="standard-header bg-image-podcast-02">
            <span class="standard-header__type standard-header__type--underlined">Content Type</span>
            <h1 class="standard-header__title">Titel Filet mignon sausage tongue, hamburger porchetta fatback kielbasa</h1>
            <div class="standard-header__intro">
                <time class="standard-header__intro__label">
                    01.01.2018
                </time>
                <div class="standard-header__intro__text">
                    Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                    ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                    prosciutto buffalo drumstick strip steak capicola short loin.
                    Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                    chuck doner. Pig venison pork chop shoulder corned beef capicola
                    meatball.
                </div>
            </div>
        </header>
        <article class="page-layout-md--default">
            <script class="podigee-podcast-player" src="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js" data-configuration="https://innoq.podigee.io/74-new-episode/embed?context=external&token=QiMQwGUlJ2PGRN84ZSThpw"></script>
            <ul class="toolbar">
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon icon-feedback icon--brand-secondary"></span>
                        Feedback
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon icon-apple-itunes icon--brand-secondary"></span>
                        Apple
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon icon-spotify icon--brand-secondary"></span>
                        Spotify
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon icon-rss icon--brand-secondary"></span>
                        RSS
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon icon-text icon--brand-secondary"></span>
                        Transkript
                    </a>
                </li>
            </ul>
            <a href="#" class="btn btn--cta" data-label="Weitere Episoden anhören">Weitere Episoden anhören</a>
            <h3>Shownotes & Links</h3>
            <ul>
                <li>
                    <a href="#!">ein klassischer Text Link</a>
                </li>
                <li>
                    Unordered List item
                    <ul>
                        <li>
                            <a href="#!">ein klassischer Text Link</a>
                        </li>
                        <li>
                            Nested unordered list item
                            <ul>
                                <li>
                                    <a href="#!">ein klassischer Text Link</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    Unordered List item <br />
                    Unordered List item
                </li>
            </ul>
        </article>

        <section class="stripe stripe--gray">
            <div class="tag-section">
                <h3 class="tag-section__headline">TAGS</h3>
                <ul class="tag-list">
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 1</a></li>
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 2</a></li>
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 3</a></li>
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 4</a></li>
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 5</a></li>
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 6</a></li>
                </ul>
            </div>
        </section>

        <div class="container-md container-vertical-spacing-lg">
            <section class="tile-grid-sm">
                <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                    <a rel="author" class="author-bio__head" itemprop="url" href="#">
                        <div class="author-bio__image avatar avatar--base">
                            <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                        </div>
                        <address class="author">
                            <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                            <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                        </address>
                    </a>

                    <address class="author-bio__social">
                        <a rel="author" class="author-bio__social-profile" href="#" title="Twitter">
                            <span class="icon icon--small icon-twitter icon--brand-secondary"></span>
                        </a>
                        <a rel="author" class="author-bio__social-profile" href="#" title="GitHub">
                            <span class="icon icon--small icon-github icon--brand-secondary"></span>
                        </a>
                    </address>
                    <div class="author-bio__text">
                        <p>Heribert Innoq ist Senior Consultant bei INNOQ.
                            Als Berater, Entwickler und Architekt unterstützt er Kunden vor allem mit seinen langjährigen Kenntnissen von Java- und JVM-basierten Systemen.
                            Meist beschäftigt er sich hier mit dem Design, der Evaluierung und Implementierung von Architekturen für moderne Webanwendungen und Microservices
                            in Softwaremodernisierungsprojekten. Sein aktueller Fokus gilt den Themen Team-Organisation und Softwareevolution.
                        </p>
                    </div>
                </div>
            </section>
        </div>
    </main>

`
`

    <main role="main" class="podcast-detail-page podcast-detail-page--ctoneedtoknow">
        <header class="standard-header bg-image-podcast-02">
            <span class="standard-header__type standard-header__type--underlined">Content Type</span>
            <h1 class="standard-header__title">Titel Filet mignon sausage tongue, hamburger porchetta fatback kielbasa</h1>
            <div class="standard-header__intro">
                <time class="standard-header__intro__label">
                    01.01.2018
                </time>
                <div class="standard-header__intro__text">
                    Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
                    ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
                    prosciutto buffalo drumstick strip steak capicola short loin.
                    Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
                    chuck doner. Pig venison pork chop shoulder corned beef capicola
                    meatball.
                </div>
            </div>
        </header>
        <article class="page-layout-md--default">
            <script class="podigee-podcast-player" src="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js" data-configuration="https://innoq.podigee.io/74-new-episode/embed?context=external&token=QiMQwGUlJ2PGRN84ZSThpw"></script>
                <ul class="toolbar">
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-feedback icon--brand-secondary"></span>
                            Feedback
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-apple-itunes icon--brand-secondary"></span>
                            Apple
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-spotify icon--brand-secondary"></span>
                            Spotify
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-rss icon--brand-secondary"></span>
                            RSS
                        </a>
                    </li>
                    <li class="toolbar__item">
                        <a href="#" class="toolbar__link">
                            <span class="icon icon-text icon--brand-secondary"></span>
                            Transkript
                        </a>
                    </li>
                </ul>
                <a href="#" class="btn btn--cta" data-label="Weitere Episoden anhören" >Weitere Episoden anhören</a>
                <h3>Shownotes & Links</h3>
                <ul>
                    <li>
                        <a href="#!">ein klassischer Text Link</a>
                    </li>
                    <li>
                        Unordered List item
                        <ul>
                            <li>
                                <a href="#!">ein klassischer Text Link</a>
                            </li>
                            <li>
                                Nested unordered list item
                                <ul>
                                    <li>
                                        <a href="#!">ein klassischer Text Link</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        Unordered List item <br />
                        Unordered List item
                    </li>
                </ul>
        </article>

        <section class="stripe stripe--gray">
            <div class="tag-section">
                <h3 class="tag-section__headline">TAGS</h3>
                <ul class="tag-list">
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 1</a></li>
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 2</a></li>
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 3</a></li>
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 4</a></li>
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 5</a></li>
                    <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 6</a></li>
                </ul>
            </div>
        </section>

        <div class="container-md container-vertical-spacing-lg">
            <section class="tile-grid-sm">
                <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                    <a rel="author" class ="author-bio__head" itemprop="url" href="#">
                        <div class="author-bio__image avatar avatar--base">
                            <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
                        </div>
                        <address class="author">
                            <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                            <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                        </address>
                    </a>

                    <address class="author-bio__social">
                        <a rel="author" class="author-bio__social-profile" href="#" title="Twitter">
                            <span class="icon icon--small icon-twitter icon--brand-secondary"></span>
                        </a>
                        <a rel= "author" class="author-bio__social-profile" href="#" title="GitHub">
                            <span class="icon icon--small icon-github icon--brand-secondary"></span>
                        </a>
                    </address>
                    <div class="author-bio__text">
                        <p>Heribert Innoq ist Senior Consultant bei INNOQ.
                            Als Berater, Entwickler und Architekt unterstützt er Kunden vor allem mit seinen langjährigen Kenntnissen von Java- und JVM-basierten Systemen.
                            Meist beschäftigt er sich hier mit dem Design, der Evaluierung und Implementierung von Architekturen für moderne Webanwendungen und Microservices
                            in Softwaremodernisierungsprojekten. Sein aktueller Fokus gilt den Themen Team-Organisation und Softwareevolution.
                        </p>
                    </div>
                </div>
            </section>
        </div>
    </main>

`
`

    {
      "code": "pick(:love) do |something|\n    n.times do\n        result = play(something)\n        result.publish\n    end\nend\n"
    }

`
File:

- Content:
  `

      .podcast-detail-page--ctoneedtoknow {
        ::selection {
          color: $brand-white;
          background: $brand-gray;
        }

        a:not([class]):hover,
        a:not([class]):focus {
          color: $brand-white;
          background-color: $brand-gray;
        }

        .standard-header__intro__label {
          color: $brand-white;
          background-color: $brand-gray;
        }

        .standard-header__intro {
          color: $brand-gray;
          background-color: $brand-white;
        }

        .standard-header__title,
        .standard-header__subtitle,
        .standard-header__type {
          color: $brand-white;
        }

        .standard-header__intro__text {
          color: $brand-gray;
        }

        .standard-header__type--underlined {
          border-bottom: $brand-white solid 3px;
        }

        .page-layout-md--default {
          h3,
          .teaser-section-heading {
            color: $brand-gray;
          }
        }

        .toolbar__link,
        .share-section__link,
        .author-bio__social-profile,
        .author-bio {
          color: $brand-gray;

          &:hover,
          &:focus {
            color: $brand-gray;
          }

          .icon {
            background: $brand-gray;
          }

          .icon:hover,
          .icon:focus {
            background: $brand-gray;
          }
        }

        .btn--cta {
          color: $brand-white;
          background-color: $brand-gray;
          border-color: $brand-gray;

          &::after {
            background-color: $brand-white;
          }

          &:hover,
          &:focus {
            color: $brand-gray;
            border-color: $brand-gray;
          }
        }

        ul {
          > li {
            &::marker {
              color: $brand-gray;
            }

            /* stylelint-disable-next-line selector-max-compound-selectors */
            li::marker {
              color: $brand-gray;
            }
          }
        }

        .tag-section__headline {
          color: $brand-gray;
        }

        .tag-list__link {
          color: $brand-white;
          background-color: $brand-gray;
          border: 2px solid $brand-gray;

          &:hover {
            color: $brand-gray;
            background-color: $brand-white;
          }
        }
      }

  `
- URL: /components/raw/ctoneedtoknow-podcast-detail-page/_ctoneedtoknow-podcast-detail-page.scss
- Filesystem Path: components/01-pages/podcast-pages/ctoneedtoknow-podcast/ctoneedtoknow-podcast-detail-page/_ctoneedtoknow-podcast-detail-page.scss
- Size: 1.8 KB

- Handle: @ctoneedtoknow-podcast-detail-page
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/01-pages/podcast-pages/ctoneedtoknow-podcast/ctoneedtoknow-podcast-detail-page/ctoneedtoknow-podcast-detail-page.html

No notes defined.