<style>
  body {
    <% if @article.cached_tag_list.include?("theycoded") %>
      background-color: #cabde6;
    <% else %>
      background: url(<%= asset_path "SheCodedBackground.png" %>);
      background-color: #cabde6;
      background-repeat: repeat;
    <% end %>
  }
  .preview-div-wrapper {
    background: white;
    width: 80vw;
    height: 35vw;
    margin: 2.5vw auto 2.5vw;
    padding: 4vw;
  }
  .avatar {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5vw;
    width: 12vw;
  }
  img {
    border-radius: 12vw;
    border: .75vw solid #70589b;
    height: 12vw;
    width: 12vw;
  }
  .title {
    font-size: <%= 7 - @article.title.size / 40 %>vw;
    margin: auto;
    width: 80%;
    color: #70589b;
    text-align: center;
    font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", "Roboto Condensed", sans-serif;
  }
</style>

<div class="preview-div-wrapper">
  <div class="avatar">
    <img src="<%= ProfileImage.new(@article.user).get(320) %>" alt="<%= @article.user.name %> profile image">
  </div>
  <div class="title">
    <strong><%= @article.title %></strong>
  </div>
</div>
