{% assign customize_link = site.data.links.by_id['customize'] %}

<section id="customize" class="bd-easy section is-medium">
  <div class="container">
    <header class="bd-index-header">
      <h3 class="title is-3">
        <a href="{{ site.url }}{{ customize_link.path }}">
          So <strong>quick</strong> to customize
        </a>
      </h3>
      <h4 class="subtitle is-4">
        Simply set your own Sass variables before importing Bulma
      </h4>
      <div class="bd-index-custom-tweet">
        {% include elements/tw.html tweet_id="1070320154452656128"
        modifier='bd-is-grey' %}
      </div>
    </header>

    <div class="columns">
      <div class="column is-6">
        <div class="highlight-full bd-has-drawing">
          {% highlight scss %}{% include snippets/customized.html %}{%
          endhighlight %} {% include elements/drawing.html id='customize'
          width=152 height=76 %}
        </div>
      </div>

      <div class="column is-6">
        <div class="bd-index-custom bd-is-before">
          <p class="bd-index-custom-title">Before</p>
          <div class="bd-index-custom-example">
            <h1 class="title">
              Bulma
            </h1>
            <p class="subtitle">
              Modern CSS framework based on
              <a
                href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
                >Flexbox</a
              >
            </p>
            <div class="field">
              <div class="control">
                <input class="input" type="text" placeholder="Input" />
              </div>
            </div>
            <div class="field">
              <p class="control">
                <span class="select">
                  <select>
                    <option>Select dropdown</option>
                  </select>
                </span>
              </p>
            </div>
            <div class="buttons">
              <a class="button is-primary">Primary</a>
              <a class="button is-link">Link</a>
            </div>
          </div>
        </div>

        <div class="bd-index-custom bd-is-after">
          <p class="bd-index-custom-title">After</p>
          <div class="bd-index-custom-example">
            <h1 class="title">
              Bulma
            </h1>
            <p class="subtitle">
              Modern CSS framework based on
              <a
                href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
                >Flexbox</a
              >
            </p>
            <div class="field">
              <div class="control">
                <input class="input" type="text" placeholder="Input" />
              </div>
            </div>
            <div class="field">
              <p class="control">
                <span class="select">
                  <select>
                    <option>Select dropdown</option>
                  </select>
                </span>
              </p>
            </div>
            <div class="buttons">
              <a class="button is-primary">Primary</a>
              <a class="button is-link">Link</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    {% include components/hero-buttons.html href=customize_link.path
    content="<span>Learn how to <strong>customize</strong></span>" %}
  </div>
</section>