assignments.html

---
layout: default
---

{% assign assignments = site.assignments | sort: 'title' %}
{% assign tabtags = "Basics|Inspirationen|Punkt|Linie|Farbe|Fläche|Form|Kontext|Hackday|Freiarbeit" | split: "|" %}

<section class="section">
  <div class="container">

    <h1 class="title is-1">Assignments</h1>
    <h2 class="subtitle">Hier die Übersicht über alle Aufgaben.</h2>

  </div>

</section>
<section class="section">
  <div class="container">
    <div class="columns">
      <div class="column">
        <nav class="panel">
          <p class="panel-heading">
            Kategorien
          </p>
          <a class="panel-block" data-tab="overview-item">
            <span class="panel-icon">
              <i class="fa fa-book"></i>
            </span> Alle
          </a>
          {% for navEle in tabtags %}
          <a class="panel-block" data-tab="{{navEle}}">
            <span class="panel-icon">
              <i class="fa fa-book"></i>
            </span> {{navEle}}
          </a>
          {% endfor %}
        </nav>
      </div>

      <div class="assignments is-tab-content column is-two-thirds is-overview-item">
        <div class="content assignment-overview">
          {% for assignment in assignments %}
          <div class="assignment-overview__item">
            <a href="{{assignment.url | relative_url}}">
            <h2 class="title is-2" id="{{ assignment.id }}">{{ assignment.titel }}</h2>
            <p style="color: #999999;">{{assignment.tags | join:' '}}</p>
            </a>
          </div>
          {% endfor %}
        </div>
      </div>

      {% for navEle in tabtags %}
      <div class="assignments is-tab-content column is-two-thirds is-{{navEle}}">
        <div class="content assignment-overview">

          {% for assignment in assignments %} {% if assignment.tags contains navEle %}
          <div class="assignment-overview__item">
              <a href="{{assignment.url | relative_url}}">
              <h2 class="title is-2" id="{{ assignment.id }}">{{ assignment.titel }}</h2>
              <p style="color: #999999;">{{assignment.tags | join:' '}}</p>
              </a>
            </div>
          {% endif %} {% endfor %}

        </div>
      </div>
      {% endfor %}
    </div>

  </div>
</section>