---
layout: default
---

{% assign links = site.links | sort: 'title' %}
{% assign tabtags = "Guides|Tools|Layout|Inspirationen" | split: "|" %}

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

        <h1 class="title is-1">Links</h1>
        <h2 class="subtitle">Ein paar praktische Verweise rund um das Thema „Web Development“</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="links is-tab-content column is-two-thirds is-overview-item">
            <div class="content link-overview">
            {% for link in links %}
            <div class="link-overview__item">
                <h2 class="title is-2" id="{{ link.id }}">{{ link.titel }}</h2>
                <p>{{link.text}}<br><a href="{{link.src}}">{{link.src}}</a></p>
                <p style="color: #999999;">{{link.tags | join:', '}}</p>
            </div>
            {% endfor %}
            </div>
        </div>

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

            {% for link in links %} {% if link.tags contains navEle %}
            <div class="link-overview__item">
                <h2 class="title is-2" id="{{ link.id }}">{{ link.titel }}</h2>
                <p>{{link.text}}<br><a href="{{link.src}}">{{link.src}}</a></p>
                <p style="color: #999999;">{{link.tags | array_to_sentence_string: ''}}</p>
            </div>
            {% endif %} {% endfor %}

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

    </div>
</section>