styleguide 0.30.11

26 - Comics

Requires javascript

Preview section of comics.

Tegneserier

Rocky av Martin Kellerman

Rocky 19. august
© Martin Kellerman
<section class="comic-entry">
  <div class="title-group">
    <a href="#"><h1 class="hide-for-medium-down">Tegneserier</h1></a><h2>Rocky <span>av Martin Kellerman</span></h2>
  </div>
  <figure>
    <img src="http://www.dagbladet.no/audun/crop/?imageurl=http://gfx.dagbladet.no/styleguide/temp/rocky.jpg" alt="Rocky 19. august">
    <figcaption class="hide-for-medium-down">© <a href="mailto:martin_kellerman@hotmail.com">Martin Kellerman</a></figcaption>
    <ul class="button-group">
      <li><button class="button tiny fb-share"><span class="icon-Facebook"></span></button></li>
      <li><button class="button tiny"><span class="icon-Twitter"></span></button></li>
      <li class="double-width"><button class="button tiny">Dagens striper</button></li>
    </ul>
  </figure>
</section>

26.1 - Comics teaser

Deprecated Requires javascript

Cartoon showcase on author page is changed for new more markup. 27 March 2017. Signed Sebastian B. Hansen. Preview section of comics.

<section class="comic-teaser" itemscope itemtype="http://schema.org/ComicSeries">
  <header>
    <h1 class="uppercase">
      <a href="#">Tegneserier</a>
    </h1>
    <h2 class="subheader">
      <span itemprop="name" class="comic-title">Rocky</span> av
      <span itemprop="author copyrightHolder" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">Martin Kellerman</span>
      </span>
    </h2>
  </header>
  <figure itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
    <a href="#">
      <img itemprop="contentUrl" src="/assets/comics/rocky.jpg" alt="Rocky 19. august">
    </a>
    <figcaption>© <a href="mailto:martin_kellerman@hotmail.com">Martin Kellerman</a></figcaption>
  </figure>
  <footer>
    <ul class="button-group stack-for-small">
      <li><a href="#" class="button tiny facebook show-for-medium-up"><span class="icon-Facebook"></span></a></li>
      <li><a href="#" class="button tiny twitter show-for-medium-up"><span class="icon-Twitter"></span></a></li>
      <li><a href="#" class="button tiny">Dagens striper</a></li>
      <li>
        <a href="#" data-dropdown="js-all-comics" class="button tiny dropdown">Flere striper</a>
        <ul id="js-all-comics" data-dropdown-content class="f-dropdown">
          <li><a href="#">Pondus</a><li>
          <li><a href="#">Rocy</a><li>
          <li><a href="#">Kellermannen</a><li>
          <li><a href="#">Fagprat</a><li>
          <li><a href="#">Lunch</a><li>
        </ul>
      </li>
    </ul>
  </footer>
</section>

26.2 - Listing Comics With Different Authors

.todays

Stripen er ny i dag

.zoom

Zoom inn på stripen for lesing på mobil etc.

<article class="comic {$modifiers}">
  <header>
    <h1>Pondus</h1><time datetime="2017-03-23T14:00">(torsdag 23. mars 2017)</time><span>(ny stripe i dag)</span>
  </header>
  <figure>
    <a class="strip-container" href="#">
       <img src="http://s3-eu-west-1.amazonaws.com/db-comics/34_1214_web">
    </a>
  </figure>
  <footer>
    <ul class="button-group">
      <li><a class="tiny button twitter icon"><span class="icon-Twitter"></span>Twitter</a></li>
      <li><a class="tiny button facebook icon"><span class="icon-Facebook"></span>Facebook</a></li>
      <li><a class="tiny button google icon"><span class="icon-Google"></span>Google+</a></li>
    </ul>
    <a href="http://www-seb-tech.labdevs.com/serier/pondus/" class="button tiny">Les mer Pondus</a>
  </footer>
</article>

26.3 - Listing Comics from Single Author

Section with comics from a single author. Add the class .list to display the title field differently for the comics.

.todays

Stripen er ny i dag

.callout

Highlight the current strip.

<article class="comic list {$modifiers}">
  <header>
    <h1>I dag</h1><time datetime="2017-03-23T14:00">(torsdag 23. mars 2017)</time><span></span>
  </header>
  <figure>
    <a class="strip-container" href="#">
       <img src="http://s3-eu-west-1.amazonaws.com/db-comics/34_1214_web">
    </a>
  </figure>
  <footer>
    <ul class="button-group">
      <li><a class="tiny button twitter icon"><span class="icon-Twitter"></span>Twitter</a></li>
      <li><a class="tiny button facebook icon"><span class="icon-Facebook"></span>Facebook</a></li>
      <li><a class="tiny button google icon"><span class="icon-Google"></span>Google+</a></li>
    </ul>
  </footer>
</article>

26.4 - Zoom Comic

Requires javascript

Button that toggles zoom for comic strips. Multiple buttons work in unisen. All comics are zoomed.

Zoom cartoon 
<div class="switch round green comic-zoom-toggle">
  <span>Zoom cartoon</span>
  <input id="toggle-zoom" type="checkbox">
  <label for="toggle-zoom"></label>
</div>

26.5 - Tall Comic Example

Preview section of comics.

.todays

Stripen er ny i dag

.callout

Highlight the current strip.

<article class="comic list  {$modifiers}">
  <header>
    <h1>Rutetid</h1><time datetime="2017-03-23T14:00">(torsdag 23. mars 2017)</time><span>(ny stripe i dag)</span>
  </header>
  <figure>
    <a class="strip-container" href="#">
       <img src="http://s3-eu-west-1.amazonaws.com/db-comics/24_274_web">
    </a>
  </figure>
  <footer>
    <ul class="button-group">
      <li><a class="tiny button twitter icon"><span class="icon-Twitter"></span>Twitter</a></li>
      <li><a class="tiny button facebook icon"><span class="icon-Facebook"></span>Facebook</a></li>
      <li><a class="tiny button google icon"><span class="icon-Google"></span>Google+</a></li>
    </ul>
  </footer>
</article>