<main role="main">
    <nav-bar class="navbar">
        <div class="navbar__inner">
            <a href="#main" class="navbtn navbtn--skip">Zum Inhalt springen</a>
            <div class="navbar__brand">
                <a href="#" class="navbar__brand-link"><img alt="inno Q" class="logo navbar__logo" src="../../assets/innoq-logo--whitered.svg" /></a>
            </div>
            <input tabindex="-1" type="checkbox" id="navbar-toggle--menu" class="sr-only navbar__toggle-state navbar__toggle-state--menu-toggler" /><input tabindex="-1" type="checkbox" id="navbar-toggle--search" class="sr-only navbar__toggle-state navbar__toggle-state--search-toggler" />
            <div class="navbar__meta">
                <a href="#" class="navbtn navbtn--meta">Newsletter</a><a href="#" class="navbtn navbtn--meta">Kontakt</a><a href="#" class="navbtn navbtn--meta navbtn--locale navbtn--active" title="Deutsch">de</a>
                |<a href="#" class="navbtn navbtn--meta navbtn--locale" title="English">en</a>
            </div>
            <div class="navbar__togglers">
                <label for="navbar-toggle--menu" aria-label="Navigation ein- oder ausblenden"><span class="navbtn navbtn--menu">Menü</span></label><a href="#" class="navbtn navbtn--search" aria-label="Suche ein- oder ausblenden"><i class="icon icon-search"></i></a>
            </div>
            <nav class="navbar__primary-nav primary-nav">
                <ul class="primary-nav__list">
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary navbtn--active">Leistungen</a>
                    </li>
                    <li class="primary-nav__item">
                        <div class="dropdown">
                            <a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--projekte">Projekte</a><input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--projekte" class="sr-only dropdown__checkbox" /><label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--projekte"><i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i><span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span><span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span></label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Projekte" data-origin="left">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="primary-nav__item">
                        <div class="dropdown">
                            <a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--kultur">Kultur</a><input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--kultur" class="sr-only dropdown__checkbox" /><label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--kultur"><i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i><span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span><span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span></label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Kultur" data-origin="right">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Digitale Plattformen und Infrastrukturen</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Wissenstransfer, Coaching und Trainings</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary">Magazin</a>
                    </li>
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary">Termine</a>
                    </li>
                </ul>
                <button class="navbtn navbtn--drill-up">
                    <img class="navbtn__left-icon" src="../../assets/icons/arrow-medium-left-red.svg" />
                    Hauptmenü
                </button>
            </nav>
        </div>
    </nav-bar>
    <header class="standard-header image-header-bg-art-01">
        <h3 class="standard-header__type">Artist Collaboration</h3>
        <h1 class="standard-header__title">Artist-in-Residence Program by INNOQ</h1>
        <div class="standard-header__intro header-label">
            <h3 class="artist-collabo__subtitle">
                Wir glauben an die bewusste Reflektion zwischen Technik und
                Gesellschaft.
            </h3>
            <div class="standard-header__intro__text">
                Das Artist-in-Residence Programm lorem ipsum interessante Themen aus
                Software-Entwicklung und -Architektur. Das Artist-in-Residence Programm
                lorem ipsum interessante Themen aus Software-Entwicklung.
            </div>
        </div>
    </header>
    <section class="page-layout-xl--default">
        <div class="edition-section">
            <hr class="edition-separator" />
            <div class="edition">Edition</div>
            <span class="edition-date">18
                <hr class="edition-date-separator" />
                19
            </span>
        </div>
        <h2 class="artist-collabo-artwork">Vertigo in the Face of the Infinite</h2>
        <p class="artist-collabo-artist">Matthew Plummer-Fernandez</p>
        <figure>
            <img class="content__image__big" src="../../assets/tower-spiderman.jpg" alt="Tower" />
            <figcaption>Erste INNOQ-Medienkunst-Edition</figcaption>
        </figure>
        <div class="edition-section">
            <hr class="edition-separator" />
            <div class="edition">Edition</div>
            <span class="edition-date">20
                <hr class="edition-date-separator edition-date-separator--variant" />
                jetzt
            </span>
        </div>
        <h3 class="artist-collabo-artwork artist-collabo-artwork--variant">
            Entropiemonster
        </h3>
        <p class="artist-collabo-artist">Studio Waltz Binaire</p>
        <figure>
            <img class="content__image__big" src="../../assets/visual-art-01.jpg" alt="Entropiemonster" />
            <figcaption>Zweite INNOQ-Medienkunst-Edition</figcaption>
        </figure>
    </section>
</main>
<main role="main">
    <nav-bar class="navbar">
        <div class="navbar__inner">
            <a href="#main" class="navbtn navbtn--skip">Zum Inhalt springen</a>
            <div class="navbar__brand">
                <a href="#" class="navbar__brand-link">
                    <img alt="inno Q" class="logo navbar__logo" src={context.app.uri('assets/innoq-logo--whitered.svg')} />
                </a>
            </div>

            <input tabindex="-1" type="checkbox" id="navbar-toggle--menu" class="sr-only navbar__toggle-state navbar__toggle-state--menu-toggler" />
            <input tabindex="-1" type="checkbox" id="navbar-toggle--search" class="sr-only navbar__toggle-state navbar__toggle-state--search-toggler" />

            <div class="navbar__meta">
                <a href="#" class="navbtn navbtn--meta">Newsletter</a>
                <a href="#" class="navbtn navbtn--meta">Kontakt</a>
                <a href="#" class="navbtn navbtn--meta navbtn--locale navbtn--active" title="Deutsch">de</a> |
                <a href="#" class="navbtn navbtn--meta navbtn--locale" title="English">en</a>
            </div>

            <div class="navbar__togglers">
                <label for="navbar-toggle--menu" aria-label="Navigation ein- oder ausblenden">
                    <span class="navbtn navbtn--menu">Menü</span>
                </label>
                <a href="#" class="navbtn navbtn--search" aria-label="Suche ein- oder ausblenden">
                    <i class="icon icon-search"></i>
                </a>
            </div>

            <nav class="navbar__primary-nav primary-nav">
                <ul class="primary-nav__list">
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary navbtn--active">Leistungen</a>
                    </li>
                    <li class="primary-nav__item">
                        <div class="dropdown">
                            <a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--projekte">Projekte</a>
                            <input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--projekte" class="sr-only dropdown__checkbox" />
                            <label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--projekte">
                                <i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
                                <span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span>
                                <span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
                            </label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Projekte" data-origin="left">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="primary-nav__item">
                        <div class="dropdown">
                            <a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--kultur">Kultur</a>
                            <input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--kultur" class="sr-only dropdown__checkbox" />
                            <label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--kultur">
                                <i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
                                <span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span>
                                <span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
                            </label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Kultur" data-origin="right">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Digitale Plattformen und Infrastrukturen</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Wissenstransfer, Coaching und Trainings</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary">Magazin</a>
                    </li>
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary">Termine</a>
                    </li>
                </ul>
                <button class="navbtn navbtn--drill-up">
                    <img class="navbtn__left-icon" src={context.app.uri('assets/icons/arrow-medium-left-red.svg')} /> Hauptmenü
                </button>
            </nav>
        </div>
    </nav-bar>
    <header class="standard-header image-header-bg-art-01">
        <h3 class="standard-header__type">Artist Collaboration</h3>
        <h1 class="standard-header__title">Artist-in-Residence Program by INNOQ</h1>
        <div class="standard-header__intro header-label">
            <h3 class="artist-collabo__subtitle">Wir glauben an die bewusste Reflektion zwischen Technik und Gesellschaft.</h3>
            <div class="standard-header__intro__text">
                Das Artist-in-Residence Programm lorem ipsum interessante Themen aus Software-Entwicklung und -Architektur. Das Artist-in-Residence Programm lorem ipsum interessante Themen aus Software-Entwicklung.
            </div>
        </div>
    </header>

    <section class="page-layout-xl--default">
        <div class="edition-section">
            <hr class="edition-separator"/>
            <div class="edition">Edition</div>
            <span class="edition-date">18
                <hr class="edition-date-separator"/>
                19
            </span>
        </div>
        <h2 class="artist-collabo-artwork">Vertigo in the Face of the Infinite</h2>
        <p class="artist-collabo-artist">Matthew Plummer-Fernandez</p>
        <figure>
            <img class="content__image__big" src="../../assets/tower-spiderman.jpg" alt="Tower" />
            <figcaption>
                Erste INNOQ-Medienkunst-Edition
            </figcaption>
        </figure>
        <div class="edition-section">
            <hr class="edition-separator"/>
            <div class="edition">Edition</div>
            <span class="edition-date">20
                <hr class="edition-date-separator edition-date-separator--variant"/>
                jetzt
            </span>
        </div>
        <h3 class="artist-collabo-artwork artist-collabo-artwork--variant">Entropiemonster</h3>
        <p class="artist-collabo-artist">Studio Waltz Binaire</p>
        <figure>
            <img class="content__image__big" src="../../assets/visual-art-01.jpg" alt="Entropiemonster" />
            <figcaption>
                Zweite INNOQ-Medienkunst-Edition
            </figcaption>
        </figure>
    </section>
</main>
/* No context defined for this component. */
  • Content:
    .artist-collabo__subtitle {
      @extend %heading-font-bold;
      color: $artist-collabo-subtitle-color;
    }
    
    .header-label {
      width: 75%;
    }
    
    $triplet-divider-height-sm: 2 * $spacer-xxl;
    
    .artist-collabo-intro {
      display: flex;
      flex-wrap: wrap;
    }
    
    .artist-collabo-intro__text {
      display: flex;
      flex-grow: 2;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: $container-spacer-x $container-spacer-y;
      min-height: $triplet-divider-height-sm;
      text-align: center;
      color: $artwork-title-color;
    }
    
    .artist-collabo-artwork {
      @extend %heading-font-heavy;
      margin-bottom: $spacer-sm;
      text-align: center;
      color: $artwork-title-color;
      font-size: $artwork-font-size-small;
    
      &--variant {
        color: $artwork-title-color--variant;
      }
    }
    
    .artist-collabo-artist {
      @extend %body-font-italic;
      text-align: center;
      line-height: $author-bio-position-line-height-small;
      font-size: $author-bio-position-font-size-small;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .header-label {
        margin-top: $spacer-xxl;
      }
    
      .artist-collabo-artwork {
        font-size: $artwork-font-size-default;
      }
    
      .artist-collabo-artist {
        font-size: $author-bio-position-font-size;
      }
    }
    
  • URL: /components/raw/artist-collabo-page/_artist-collabo-page.scss
  • Filesystem Path: components/04-pages/artist-collabo-page/_artist-collabo-page.scss
  • Size: 1.2 KB
  • Handle: @artist-collabo-page
  • Preview:
  • Filesystem Path: components/04-pages/artist-collabo-page/artist-collabo-page.html

There are no notes for this item.