<main role="main" class="talk-page">
    <article class="page-layout--grid">
        <aside class="left talk-date">
            <div class="event-date-section">
                <div class="label talk">Vortrag</div>
                <time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span>
                    <span class="event-year">2017</span>
                </time>
            </div>
        </aside>
        <section class="center">
            <h1 class="talk-title">Vortrags Titel</h1>
            <div class="talk-description">
                <p>Lorem gibson <a href="#">face</a> forwards footage youtube concrete saturation
                    point urban Ono-Sendai shanty town stimulate temperfoam arcology Bosozoku
                    office tube franchise derm/dermadisk paranoid sprawl pen People of Importance
                    saturation point.</p>
            </div>
            <dl class="date-location-section">
                <dt>Datum</dt>
                <dd>24.12.2018</dd>
                <dt>Uhrzeit</dt>
                <dd>13 - 15 Uhr</dd>
                <dt>Ort</dt>
                <dd>INNOQ Monheim</dd>
            </dl>
        </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">
        <h2 class="teaser-section-heading center">Der Referent</h2>
        <section class="center">
            <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"><i class="icon icon-twitter"></i><a class="author-bio__handle" itemprop="url" title="Twitter" href="http://twitter.com/heribert_innoq">heribert_innoq</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 class="talk-link center"><a class="link-teaser" href="#">Mehr Vorträge von Heribert Innoq</a>
            </div>
        </section>
    </aside>
</main>
<main role="main" class="talk-page">
    <article class="page-layout--grid">
        <aside class="left talk-date">
            <div class="event-date-section">
                <div class="label talk">Vortrag</div>
                <time class="event-date" datetime="2017-06-23">
                    <span class="event-day-month">
                        <span class='event-day'>23</span>
                        <span class='event-month'>Jun</span>
                    </span>
                    <span class='event-year'>2017</span>
                </time>
            </div>
        </aside>

        <section class="center">
            <h1 class="talk-title">Vortrags Titel</h1>
            <div class="talk-description">
                <p>Lorem gibson <a href="#">face</a> forwards footage youtube concrete saturation point urban Ono-Sendai shanty
                    town stimulate temperfoam arcology Bosozoku office tube franchise derm/dermadisk paranoid sprawl pen
                    People of Importance saturation point.
                </p>
            </div>
            <dl class="date-location-section">
                <dt>Datum</dt>
                <dd>24.12.2018</dd>
                <dt>Uhrzeit</dt>
                <dd>13 - 15 Uhr</dd>
                <dt>Ort</dt>
                <dd>INNOQ Monheim</dd>
            </dl>
        </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">
        <h2 class='teaser-section-heading center'>Der Referent</h2>
        <section class="center">
            <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">
                        <i class="icon icon-twitter"></i>
                        <a class="author-bio__handle" itemprop="url" title="Twitter" href="http://twitter.com/heribert_innoq">
                            heribert_innoq
                        </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 class="talk-link center"><a class="link-teaser" href="#">Mehr Vorträge von Heribert Innoq</a></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:
    .talk-page {
      .tag-section {
        margin-bottom: $spacer-sm;
      }
    
      .teaser-section-heading {
        margin-bottom: $spacer-xxl;
      }
    
      .author-bio {
        &.author-bio--long {
          margin-bottom: $spacer-sm;
        }
      }
    
      .talk-link {
        text-align: center;
      }
    }
    
    .talk-date {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      margin-bottom: $spacer-md;
    
      .label {
        margin: 0;
        border-left: 0;
        text-align: center;
        }
      }
    
    .talk-title {
      @extend %h1;
    
      margin-bottom: $spacer-md;
    }
    
    .talk-description {
      & > * {
        @extend %body-font-italic;
        line-height: $talk-description-line-height-small;
        font-size: $talk-description-font-size-small;
      }
    }
    
    // Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      .talk-page {
        .tag-section {
          margin-bottom: $spacer-md;
        }
    
        .teaser-section-heading {
          margin-bottom: $spacer-md;
        }
    
        .author-bio {
          &.author-bio--long {
            margin-bottom: $spacer-base;
          }
        }
      }
    
      .talk-date {
        margin-bottom: $spacer-lg;
    
        .event-date-section {
          width: 40%;
        }
      }
    
      .talk-description {
        line-height: $talk-description-line-height;
        font-size: $talk-description-font-size;
      }
    }
    
    
    @media screen and (min-width: $grid-breakpoint-xl) {
      .talk-date {
        align-items: flex-end;
        margin-right: $spacer-md;
        margin-bottom: 0;
    
        .event-date-section,
        .label {
          width: 96px;
        }
      }
    }
    
  • URL: /components/raw/talk-page/_talk-page.scss
  • Filesystem Path: components/04-pages/talk-page/_talk-page.scss
  • Size: 1.5 KB

There are no notes for this item.