byceps/byceps

{% extends 'layout/base_auto.html' %}
{% set simple_layout = true %}
{% set page_title = _('Style Guide') %}


{% block head %}
  <style>
    .styleguide {
      max-width: 1080px;
    }

    .card-content.example-code {
      background-color: rgba(0, 0, 0, 0.75);
      color: #ffffff;
      font-size: 0.75rem; /* 12px / 16px */
      padding: 0;
    }

    .example summary {
      padding: 1.25rem 1.5rem;
    }

    code.example-codeblock {
      display: block;
      line-height: 1.5;
      padding: 0 2rem 1rem 2rem;
      white-space: pre;
      overflow-x: scroll;
    }

    code:not(.example-codeblock) {
      border-radius: 0.2rem;
      padding: 0.05rem 0.3rem;
    }

  </style>
{%- endblock %}


{% macro render_example() %}
  <div class="card example">
    <div class="card-content">
{{ caller() }}
    </div>
    <div class="card-content example-code">
      <details>
        <summary>Show code</summary>
        <code class="example-codeblock">
{#- Whitespace removal in code block is significant! #}
{%- filter forceescape -%}
{{ caller()|trim }}
{%- endfilter -%}
        </code>
      </details>
    </div>
  </div>
{% endmacro %}


{% block body %}

<div class="styleguide">

  <h1 class="title">{{ page_title }}</h1>

  <ol class="tabs">
    <li><a class="tabs-tab" href="#blocks">Blocks</a></li>
    <li><a class="tabs-tab" href="#blockquotes">Blockquotes</a></li>
    <li><a class="tabs-tab" href="#boxes">Boxes</a></li>
    <li><a class="tabs-tab" href="#cards">Cards</a></li>
    <li><a class="tabs-tab" href="#notifications">Notifications</a></li>
    <li><a class="tabs-tab" href="#tabs">Tabs</a></li>
    <li><a class="tabs-tab" href="#tables">Tables</a></li>
    <li><a class="tabs-tab" href="#pagination">Pagination</a></li>
    <li><a class="tabs-tab" href="#buttons">Buttons</a></li>
    <li><a class="tabs-tab" href="#dropdowns">Dropdown Menus</a></li>
    <li><a class="tabs-tab" href="#tags">Tags</a></li>
    <li><a class="tabs-tab" href="#progress">Progress</a></li>
    <li><a class="tabs-tab" href="#forms">Forms</a></li>
    <li><a class="tabs-tab" href="#icons">Icons</a></li>
  </ol>

  <h2 id="blocks">Blocks</h2>
{% include 'common/style_guide/sections/_blocks.html' %}

  <h2 id="blockquotes">Blockquotes</h2>
{% include 'common/style_guide/sections/_blockquotes.html' %}

  <h2 id="boxes">Boxes</h2>
{% include 'common/style_guide/sections/_boxes.html' %}

  <h2 id="cards">Cards</h2>
{% include 'common/style_guide/sections/_cards.html' %}

  <h2 id="notifications">Notifications</h2>
{% include 'common/style_guide/sections/_notifications.html' %}

  <h2 id="tabs">Tabs</h2>
{% include 'common/style_guide/sections/_tabs.html' %}

  <h2 id="tables">Tables</h2>
{% include 'common/style_guide/sections/_tables.html' %}

  <h2 id="pagination">Pagination</h2>
{% include 'common/style_guide/sections/_pagination.html' %}

  <h2 id="buttons">Buttons</h2>
{% include 'common/style_guide/sections/_buttons.html' %}

  <h2 id="dropdowns">Dropdown Menus</h2>
{% include 'common/style_guide/sections/_dropdowns.html' %}

  <h2 id="tags">Tags</h2>
{% include 'common/style_guide/sections/_tags.html' %}

  <h2 id="progress">Progress</h2>
{% include 'common/style_guide/sections/_progress.html' %}

  <h2 id="forms">Forms</h2>
{% include 'common/style_guide/sections/_forms.html' %}

  <h2 id="icons">Icons</h2>
{% include 'common/style_guide/sections/_icons.html' %}

</div>

{%- endblock %}