layout: default


{% if page.cover %} <div class=“jumbotron cover jumbotron-fluid mb-5” style=“background-image:url('{{ page.cover }}');”>

<div class="container" >
  <div class="row">
    <div class="offset-1 col-11">
      <h1 class="display-3 text-uppercase">{{ page.long_title | escape }}</h1>
      <p class="lead" style="font-weight:400; padding:1% 0;">{{ page.description  }}</p>
    </div>
  </div>
</div>

</div> {% endif %}

<main class=“container mt-10” aria-label=“Content”>

<article class="row">

  {% if page.cover == null %}
  <div class="col-12">
    <h1 class="display-3 text-uppercase">{{ page.long_title | escape }}</h1>
    <p class="lead" style="font-weight:400; padding:1% 0;">{{ page.description  }}</p>
  </div>
  {% endif %}

  <table class="table">
    <tr>
      <th class="text-center"><small><strong>Lighten 30%</strong></small></th>
      <th class="text-center"><small><strong>Lighten 20%</strong></small></th>
      <th class="text-center"><small><strong>Lighten 10%</strong></small></th>
      <th class="text-center">Primary</th>
      <th class="text-center"><small><strong>Darken 10%</strong></small></th>
      <th class="text-center"><small><strong>Darken 20%</strong></small></th>
      <th class="text-center"><small><strong>Darken 30%</strong></small></th>
    </tr>

    {% for theme in site.data.theme  %}
      {% if theme[0] != 'one' and theme[0] != 'two' and theme[0] != 'three' and theme[0] != 'four' and theme[0] != 'grey' %}
        {% continue %}
      {% endif %}
    <tr>
      <td class="text-center text-l30-{{ theme[0] }}">
        <i class="fas fa-square fa-4x  "></i><br><code class="output "></code>
      </td>
      <td class="text-center text-l20-{{ theme[0] }}">
        <i class="fas fa-square fa-4x  "></i><br><code class="output "></code>
      </td>
      <td class="text-center text-l10-{{ theme[0] }}">
        <i class="fas fa-square fa-4x  "></i><br><code class="output "></code>
      </td>
      <td class="text-center text-{{ theme[0] }}">
        <i class="fas fa-square fa-4x  "></i><br><code class="output "></code>
      </td>
      <td class="text-center text-d10-{{ theme[0] }}">
        <i class="fas fa-square fa-4x  "></i><br><code class="output "></code>
      </td>
      <td class="text-center text-d20-{{ theme[0] }}">
        <i class="fas fa-square fa-4x  "></i><br><code class="output "></code>
      </td>
      <td class="text-center text-d30-{{ theme[0] }}">
        <i class="fas fa-square fa-4x  "></i><br><code class="output "></code>
      </td>
    </tr>
    {% endfor %}
  </table>

  {% if content %}
  <div class="col">

    {{ content | inject_anchors }}
  </div>
  {% endif %}

</article>

</main>