Security Podcast Detail Page

Ready

HTML
View
Context
Assets
Info
Notes


        
        <main role="main" class="podcast-detail-page podcast-detail-page--security">
    <header class="standard-header podcast-header--avatar--overlay" style="background-image: url(../../assets/example-content/heribert-rechts.png), url(../../assets/example-content/heribert-links.png) ">
        <h3 class="standard-header__type">Security-Podcast</h3>
        <h1 class="standard-header__title">Podcast Titel</h1>
        <h2 class="standard-header__subtitle">Ein Untertitel</h2>
        <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>

    <aside class="page-layout-md--default">
        <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>
    </aside>
</main>


        <main role="main" class="podcast-detail-page podcast-detail-page--security">
    <header class="standard-header podcast-header--avatar--overlay" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }}), url({{ path '/assets/example-content/heribert-links.png' }}) ">
        <h3 class="standard-header__type">Security-Podcast</h3>
        <h1 class="standard-header__title">Podcast Titel</h1>
        <h2 class="standard-header__subtitle">Ein Untertitel</h2>
        <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>

    <aside class="page-layout-md--default">
        <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>
    </aside>
</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--security {
  ::selection {
    background: $brand-yellow;
  }

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

  .podcast-header--avatar--overlay {
    background-color: $brand-yellow;
  }

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

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

  h3,
  .standard-header__intro__text,
  .standard-header__title,
  .standard-header__subtitle,
  .standard-header__type {
    color: $brand-gray;
  }

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

    .icon {
      background: $brand-gray;
    }

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

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

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

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

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

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

  .tag-list__link {
    color: $brand-gray;
    background-color: $brand-yellow;

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

URL: /components/raw/security-podcast-detail-page/_security-podcast-detail-page.scss
Filesystem Path: components/01-pages/podcast-pages/security-podcast/security-podcast-detail-page/_security-podcast-detail-page.scss
Size: 1.5 KB

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

No notes defined.