layout: default


<section class=“hero is-light is-fullheight” style=“{% if site.main_image %}background-image: url({{ site.main_image}}){% endif %}”>

<div class="hero-body">
  <div class="container">
    <div class="colums">
      <div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop">
        <h1 class="title is-spaced">
          {{ site.title }}
        </h1>
        <h2 class="subtitle">
          {{ site.description }}
        </h2>
        <div class="hero-actions">
        {% assign first_pages = site.pages | sort:"chapter" %}
        {% for p in first_pages %}
        {% if p.layout == 'page' %}
        {% assign firstp = p %}
        {% break %}
        {% endif %}
        {% endfor %}
          <a href="{{ firstp.permalink }}"
             class="button is-link is-uppercase"
             title="Kapitel {{ firstp.chapter }} {{firstp.title}}">
            Zu Kapitel {{ firstp.chapter }}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
                 width="20px" height="20px" class="icon-start">
              <title>Arrow pointing right</title>
              <path d="M20 50 H 80" fill="transparent" stroke="white"
                    stroke-width="7" stroke-linecap="square"/>
              <path d="M60 30 L 84 50 L 60 70"
                    fill="transparent" stroke="white"
                    stroke-width="7" stroke-linecap="round"/>
            </svg>
          </a>

          {% if site.mainpage.pdf %}
          <a href="{{ site.mainpage.pdf }}" class="is-uppercase">
            Download PDF
          </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

</section>