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>