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>