<!--
design borrowed from
https://www.swissted.com/
-->
<div class="container">
    <article id="poster" itemscope="" itemtype="http://schema.org/MusicEvent" data-display="grid">
      <!--H1 band name is visible when not using grid layout. To achieve letter spacing on grid, use vanilla js to retrieve letters separated by " " from content="". Each letter is wrapped into individual html element (which is positioned on the grid). Maybe it could be done with svg shapes (Approach <use>: define somewhere in document, later assign grid cell = not working). Precisely placing text items on grid is problematic because of the line-height - would be great if could align-text:bottom /top    -->
      <h1 itemprop="performer" itemscope="" itemtype="http://schema.org/Person"><a id="venueBand" content="t h c u r e" href="https://en.wikipedia.org/wiki/The_Cure" itemprop="name">the cure</a></h1>
      <h2 itemprop="performer" itemscope="" itemtype="http://schema.org/Person">with special guests<br/>
        <a href="https://en.wikipedia.org/wiki/Joy_Division" itemprop="name">joy divison<a> & <a href="" itemprop="name">back to zero</a></h2>
      <div class="venuePlace">
        <time itemprop="startDate" content="1979-06-16" datetime="1979-06-16">saturday, june 16 1979</time>
        <p itemprop="location" itemscope="" itemtype="http://schema.org/MusicVenue">live at <a href="#" itemprop="name">cantenbury odeon</a></p>
      </div>
      <p itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">tickets:<br/>
        <meta itemprop="priceCurrency" content="GB">&pound;</meta><span itemprop="price">1.25</span>
        <span>advance / </span>
        <meta itemprop="priceCurrency" content="GB">&pound;</meta><span itemprop="price">2.50</span>
        <span>door</span>
      </p>
      <footer id="footer" itemprop="organizer" itemscope="" itemtype="http://schema.org/organizer">presented by <a itemprop="name">university of kent<br/> catenbury students' union</a></footer>
    </article>
  </div>

@function pxToEm ($size) {
  @return $size / 16 * 1em;
}

$gray: #839098;
$white: #dfe2d7;
$black: #000113;
//General page style
* {
  box-sizing: border-box 
}
html {
  font-size: 62.5%;
  color: $white;
  background: $white;
}
body {
  font-family: Arial, sans-serif;
  font-size: 1.6em;
  font-size: 1.6rem;
  line-height: 1.3;
}
p {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  background-color: $black;
  max-width: pxToEm(716);//IE8
  max-width: 71.6rem;
  padding: 1em;
  margin: 0 auto;
  height: (1008/716 * 100%);
}
.venuePlace,
footer {
  text-align: right;
}
aside{
  display: none;
} 
h1 {
  font-size: 20em; //IE8
  font-size: 20vmin;
  line-height: 1;
  margin-top: 0;
  font-weight: bold;
}   
//Small screen and non-grid layout
@media screen and (max-width: pxToEm(716)) {
  article > * {
    margin-bottom: 2vh
  }
}
a {
  text-decoration: none;
  color: inherit;
  transition: background 0.2s linear, color 0.2s linear;
  &:hover {
    background: #fff;
    color: $black;
  }
}
article {
  padding: 2rem;
}
h2 {
  margin-top: 0;
  font-size: 1.6rem;
  text-align: right;
  color: $gray;
}
//Grid layout
@media screen and (min-width: pxToEm(716)) {
  @supports (display: grid) {
    .container {
      height: 100.8rem;
    }
    /*hide visually, but leave for screen reader */
    h1 {
      position:absolute;
      left:-10000px;
      top:auto;
      width:1px;
      height:1px;
      overflow:hidden;
    } 
    h2 {
      margin: 0;
      grid-column-start: 3;
      grid-row-start: 2;
      align-self: end;
      grid-column-end: span 4;
    }
    article[data-display="grid"] {
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      grid-row-gap: 4vh;
    }
    [itemprop="offers"] {
      grid-column-start: 1;
      grid-column-end: span 2; 
      grid-row-start: 3;
      margin-top: pxToEm(45);
      align-self: baseline;
    }
    [itemprop="location"] {
      align-self: end;
    }
    .venuePlace {
      grid-column-start: 3;
      grid-column-end: span 2;
      grid-row-start: 1;
      align-self: end;
      grid-column-end: span 4; 
    }
    footer {
      grid-column-start: 3; 
      grid-row-start: 2;
      align-self: start;
      grid-column-end: span 4;
      margin-top: pxToEm(40);
    }
    #poster {
      height: 100%; //of parent, to preserve original aspect ratio
      padding-top: 0;
      aside {
        display: block;
        font-size: pxToEm(280);
        line-height: 0.7;
        font-weight: bold;
      }
      & aside:nth-of-type(1) {
        grid-column-start: 1;
        grid-row-start: 4;
        color: $gray;
        margin-left: 8px;
      }
      & aside:nth-of-type(2) {
        grid-column-start: 2;
        grid-row-start: 4;
        color: $gray;
        margin-left: 20%;
        transform: translateX(50%);
      }
      
      & aside:nth-of-type(3) {
        grid-column-start: 1;
        grid-row-start: 1;
      }
      & aside:nth-of-type(4) {
        grid-column-start: 2;
        grid-row-start: 2;
      }
      & aside:nth-of-type(5) {
        grid-column-start: 3;
        grid-row-start: 3;
        transform: translateX(50%);
      }
      & aside:nth-of-type(6) {
        grid-column-start: 4;
        grid-row-start: 4;
        text-align: right;
      }
    }  
  } 
}

// Progressive enhancement: if js & modern browser > IE10, then add js, otherwise do nothing
if ('visibilityState' in document) { 
  
  document.addEventListener("DOMContentLoaded", function () {

    var article = document.getElementById('venueBand'),
      poster = document.getElementById("poster"),
      text = article.getAttribute("content"),
      textArray = text.split(" "),
      length = textArray.length;

    for (var i = 0; i < length; i++) {
      var char = textArray[i]
      var element = document.createElement("aside");
      element.append(char);
      poster.append(element);
    }
  })
}