header.html

<section class="hero is-small is-light">
  <div class="hero-body">
    <div class="container">

      <div class="level">
        <div class="level-left">
          <h1 class="title is-1"> {{ site.title }}</h1>
        </div>
      </div>

      <p class="subtitle is-1"> {{ site.description }} </p>
      <div class="field is-grouped is-grouped-multiline">
        {% if site.project.power %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-medium is-dark">
              <span class="icon is-large">
                <i class="fas fa-battery-half"></i>
              </span>
              power</span>
            <span class="tag is-medium is-white">{{ site.project.power }}</span>
          </div>
        </div>
        {% endif %}

        {% if site.project.wireless %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-medium is-dark">
              <span class="icon is-large">
                <i class="fas fa-wifi"></i>
              </span>
              wireless
            </span>
            <span class="tag is-medium is-white">{{ site.project.wireless }}</span>
          </div>
        </div>
        {% endif %}

        {% if site.project.sensor %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-medium is-dark">
              <span class="icon is-large">
                <i class="fas fa-eye"></i>
              </span>
              sensor
            </span>
            <span class="tag is-medium is-white">{{ site.project.sensor }}</span>
          </div>
        </div>
        {% endif %}

        {% if site.project.mcu %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-medium is-dark">
              <span class="icon is-large">
                <i class="fas fa-microchip"></i>
              </span>
              mcu
            </span>
            <span class="tag is-medium is-white">{{ site.project.mcu }}</span>
          </div>
        </div>
        {% endif %}

        {% if site.project.ota %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-medium is-dark">ota?</span>
            <span class="tag is-medium is-white">{{ site.project.ota }}</span>
          </div>
        </div>
        {% endif %}

        {% if site.project.battery-life %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-medium is-dark">battery life</span>
            <span class="tag is-medium is-white">{{ site.project.battery-life }}</span>
          </div>
        </div>
        {% endif %}

      </div>

      <div class="field is-grouped is-grouped-multiline">
        {% if site.project.bom-total %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-medium is-white">bom items</span>
            <span class="tag is-medium">{{ site.project.bom-total }}</span>
          </div>
        </div>
        {% endif %}

        {% if site.project.bom-cost-usd %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-medium is-white">bom cost</span>
            <span class="tag is-medium">USD ${{ site.project.bom-cost-usd }}</span>
          </div>
        </div>
        {% endif %}

        {% if site.project.vendors %}
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-medium is-white">vendors</span>
            <span class="tag is-medium">{{ site.project.vendors }}</span>
          </div>
        </div>
        {% endif %}

        {% if site.project.status %}
        <div class="control">
          {% if site.project.status == "completed" %}
          <div class="tags has-addons">
            <span class="tag is-medium is-white">{{ site.project.status }}</span>
            <span class="tag is-medium is-light is-success">{{ site.project.completion }}</span>
          </div>
          {% else %}
          <div class="tags has-addons">
            <span class="tag is-medium is-white">{{ site.project.status }}</span>
            <span class="tag is-medium is-light is-warning">since {{ site.project.started }}</span>
          </div>
          {% endif %}
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</section>