<main role="main" class="podcast-detail-page podcast-detail-page--security">
    <header class="standard-header podcast-header--avatar--overlay" style="
      background-image: url(../../assets/heribert-rechts.png),
        url(../../assets/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--grid">
        <section class="center">
            <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&amp;token=QiMQwGUlJ2PGRN84ZSThpw"></script>
        </section>
        <section class="center">
            <ul class="toolbar">
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-feedback icon--brand-secondary"></span>Feedback</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-apple-itunes icon--brand-secondary"></span>Apple</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-spotify icon--brand-secondary"></span>Spotify</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg icon-rss icon--brand-secondary"></span>RSS</a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link"><span class="icon-svg 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>
        </section>
        <section class="center">
            <h3>Shownotes &amp; 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>
        </section>
    </article>
    <section class="breakout tag-section">
        <h3 class="tag-section__headline">TAGS</h3>
        <div class="tag-section__container">
            <ul class="tag-list">
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=microservices">Microservices</a>
                </li>
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=business+technology">Business Technology</a>
                </li>
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=architecture">Architecture</a>
                </li>
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=organization">Organization</a>
                </li>
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=innovation">Innovation</a>
                </li>
                <li class="tag-list__item">
                    <a class="tag-list__link" href="/de/timeline/?tag=project+management">Project Management</a>
                </li>
            </ul>
        </div>
    </section>
    <aside class="page-layout--grid">
        <section class="center share-section">
            <img src="../../assets/icons/arrow-long-down.svg" class="share-section__arrow" />
            <h3 class="share-section__heading">Share on</h3>
            <ul class="share-section__list">
                <li>
                    <a class="share-section__link" target="_blank" href=""><span class="icon-svg icon-facebook icon--brand-gray"></span></a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href=""><span class="icon-svg icon-twitter icon--brand-gray"></span></a>
                </li>
                <li>
                    <a class="share-section__link" href=""><span class="icon-svg icon-email icon--brand-gray"></span></a>
                </li>
            </ul>
        </section>
        <section class="center">
            <div class="blocks">
                <div id="author-bio" class="author-bio author-bio--long" itemscope="" itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--base">
                        <img itemprop="photo" class="avatar__image" src="../../assets/heribert.jpg" alt="Portrait von Alexander Hesingfeld" />
                    </div>
                    <div class="author-bio__head">
                        <div class="author-bio__name" itemprop="name">
                            <a class="author-bio__link" href="#">Heribert Innoq</a>
                        </div>
                        <div class="author-bio__info" itemprop="jobTitle">
                            Senior Consultant
                        </div>
                        <div class="author-bio__social">
                            <a class="author-bio__social-profile" href="#" title="Twitter"><span class="icon-svg icon-svg--small icon-twitter icon--brand-gray"></span></a><a class="author-bio__social-profile" href="#" title="GitHub"><span class="icon-svg icon-svg--small icon-github icon--brand-gray"></span></a>
                        </div>
                    </div>
                    <div class="author-bio__text">
                        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.
                    </div>
                </div>
            </div>
        </section>
    </aside>
</main>
import { cssRight, cssBoth } from "./components/02-molecules/visual-elements/teaser/tile-teaser/podcast-tile-teaser/config";
<main role="main" class="podcast-detail-page podcast-detail-page--security">
    <header class="standard-header podcast-header--avatar--overlay" style={cssBoth}>
        <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--grid">
        <section class="center">
            <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>
        </section>
        <section class="center">
            <ul class="toolbar">
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-feedback icon--brand-secondary"></span>
                        Feedback
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-apple-itunes icon--brand-secondary"></span>
                        Apple
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-spotify icon--brand-secondary"></span>
                        Spotify
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg icon-rss icon--brand-secondary"></span>
                        RSS
                    </a>
                </li>
                <li class="toolbar__item">
                    <a href="#" class="toolbar__link">
                        <span class="icon-svg 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>
        </section>
        <section class="center">
            <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>
        </section>
    </article>

    <section class="breakout tag-section">
        <h3 class="tag-section__headline">TAGS</h3>
        <div class="tag-section__container">
            <ul class="tag-list">
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=microservices">Microservices</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=business+technology">Business Technology</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=architecture">Architecture</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=organization">Organization</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=innovation">Innovation</a></li>
                <li class="tag-list__item"><a class="tag-list__link" href="/de/timeline/?tag=project+management">Project Management</a></li>
            </ul>
        </div>
    </section>

    <aside class="page-layout--grid">
        <section class="center share-section">
            <img src={context.app.uri('assets/icons/arrow-long-down.svg')} class="share-section__arrow" />
            <h3 class="share-section__heading">Share on</h3>
            <ul class="share-section__list">
                <li>
                    <a class="share-section__link" target="_blank" href="">
                        <span class="icon-svg icon-facebook icon--brand-gray"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" target="_blank" href="">
                        <span class="icon-svg icon-twitter icon--brand-gray"></span>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" href="">
                        <span class="icon-svg icon-email icon--brand-gray"></span>
                    </a>
                </li>
            </ul>
        </section>
        <section class="center">
            <div class="blocks">
                <div id="author-bio" class="author-bio author-bio--long" itemscope="" itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--base">
                      <img itemprop="photo" class="avatar__image" src={context.app.uri("assets/heribert.jpg")} alt="Portrait von Alexander Hesingfeld" />
                    </div>
                    <div class="author-bio__head">
                        <div class="author-bio__name" itemprop="name">
                            <a class="author-bio__link" href="#">Heribert Innoq</a>
                        </div>
                        <div class="author-bio__info" itemprop="jobTitle" >Senior Consultant</div>
                        <div class="author-bio__social">
                            <a class="author-bio__social-profile" href="#" title="Twitter">
                                <span class="icon-svg icon-svg--small icon-twitter icon--brand-gray"></span>
                            </a>
                            <a class="author-bio__social-profile" href="#" title="GitHub">
                                <span class="icon-svg icon-svg--small icon-github icon--brand-gray"></span>
                            </a>
                        </div>
                    </div>
                    <div class="author-bio__text">
                        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.
                    </div>
                </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"
}
  • Content:
    .podcast-detail-page--security {
    
      a:not([class]):hover {
        background-color: $brand-yellow;
      }
    
      .podcast-header--avatar--overlay {
        background-color: $brand-yellow;
      }
    
      .standard-header__intro__label {
        color: $brand-yellow;
      }
    
      .standard-header__title,
      .standard-header__type {
        color: $brand-gray;
      }
    
      .toolbar__link,
      .share-section__link,
      .author-bio__social-profile {
        &:hover,
        &:focus {
          color: $brand-gray;
        }
    
        .icon-svg:hover,
        .icon-svg:focus {
          background: $brand-gray;
        }
      }
    
      .btn--cta {
        border-color: $brand-yellow;
        background-color: $brand-yellow;
        color: $brand-gray;
    
        &::after {
          background-color: $brand-gray;
        }
    
        &:hover,
        &:focus {
          border-color: $brand-gray;
          color: $brand-yellow;
        }
      }
    
      ul {
        & > li::before {
          background: $brand-yellow;
        }
    
        ul > li::before {
          border: 3px solid $brand-yellow;
          background: $brand-white;
        }
      }
    
      .tag-list__link {
        background-color: $brand-yellow;
        color: $brand-gray;
    
        &:hover {
          background-color: $brand-gray;
          color: $brand-yellow;
        }
      }
    }
    
  • URL: /components/raw/security-podcast-detail-page/_security-podcast-detail-page.scss
  • Filesystem Path: components/04-pages/podcast-pages/security-podcast/security-podcast-detail-page/_security-podcast-detail-page.scss
  • Size: 1.2 KB
  • Handle: @security-podcast-detail-page
  • Preview:
  • Filesystem Path: components/04-pages/podcast-pages/security-podcast/security-podcast-detail-page/security-podcast-detail-page.html

There are no notes for this item.