Mimicking iOS's missing cover art in CSS and HTML

book.html

<a href="#" class="cover">
  <p class="title">
    <span class="primary"> 
      {{title}}
    </span>
    {{subTitle}}
  </p>
  <div class="art"></div>
</a>

cover-headling.scss

.cover{
  @include transform-origin(center 16px);
  @include transform(rotate(-60deg));
}

cover-subheading

@include transform(rotate(-60deg) scale(0.5));

default.scss

.cover {
   display: block;
   height: 100%;
   overflow: hidden;
   position: relative;
   

  .art {
     width: 100%;
     height: 100%;
     position: absolute;
   }

   .title {
     position: absolute;
     color: #777;
     text-transform: uppercase;
     text-align: center;
     font-size: 12px;
     font-weight: normal;
     line-height: 12px;

     width: $book_featured_height; // not a typo
     height: $book_featured_height;
 
     left: 50%;
     top: 50%;
     margin-left: -$book_featured_height/2;
     margin-top: -16px;

     .primary {
       display: block;
       font-size: 16px;
       font-weight: bold;
       line-height: 16px;
     }
 }