<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scheme Preview</title>
  <style>
    body {
      font-family: sans;
      background-color: #202020;
      color: #e0e0e0;
      margin: 0;
    }

    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
      background-color: #404040;
      border-bottom: 2px groove #404040;
    }

    .header__title {
      font-weight: 200;
      font-size: 32px;
      margin: 21px;
    }

    .color-swatch {
      padding-left: 0;
      display: inline-block;
      margin-left: 40px;
    }

    .color-swatch__color {
      border: 2px solid white;
      height: 40px;
      width: 40px;
      display: inline-block;
      transition: all 1s;
    }

    .color-swatch__color--circle {
      border-radius: 50%;
      margin-right: -25px;
    }

    .place_holder {
      height: 70px;
      width: 100%;
    }

    .scheme {
      margin-top: 0.5em;
      border-bottom: 0.5em;
      border-top: 1px #404040 solid;
      border-top-style: inset;
    }

    .scheme__name {
      font-weight: 100;
      font-size: 20px;
      padding-left: 10px;
    }
  </style>
</head>
<body>
  <div class="place_holder"></div>
  <div class="header">
    <h1 class="header__title">Base16 Builder</h1>
  </div>

  <% schemes.forEach(function(scheme) { %>
    <div class="scheme">
      <h2 class="scheme__name"><%=scheme.scheme%></h2>
      <ul class="color-swatch">
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base00%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base01%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base02%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base03%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base04%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base05%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base06%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base07%>'></li>
      </ul>
      <ul class="color-swatch">
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base08%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base09%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base0A%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base0B%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base0C%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base0D%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base0E%>'></li>
        <li class="color-swatch__color color-swatch__color--circle" style='background-color: #<%=scheme.base0F%>'></li>
      </ul>
    </div>
  <% }) %>

</body>
</html>
