index.html

---
layout: main
---

<div id="title" title="Photo by Negative Space on Pexels">
    <h1>{{ site.title | default: site.github.repository_name }}</h1>
    <p>{{ site.description | default: site.github.project_tagline }}</p>
</div>
<section>
    {% for post in site.posts %}
    <div class="post">
        <a href="{{ post.url }}">
            <div class="img-container" title="{{post.attribution}}" style="background-image: url('{{ site.url }}{{ post.image }}')"></div>
        </a>
        <div class="post-content">
            <h2 class="post-header"><a href="{{ post.url }}">{{ post.title }}</a></h2>
            <div class="tags">
                <span>Category: <a href="{{ site.category_page }}#{{ post.category | slugify }}">{{ post.category }}</a></span>

                {% if post.tags %}
                <span> Tags:
                    {% for tag in post.tags %}
                        <a href="{{ site.tag_page }}#{{ tag | slugify }}">{{ tag }}</a>{% if forloop.last == false %},{% endif %}
                    {% endfor %}
                </span>
                {% endif %}
            </div>
            <p class="info">{{ post.date | date: '%A %B %d, %Y' }} | {{ post.author }} </p>
            <article>
                <p>{{ post.excerpt | truncatewords: 40 }}</p>
                <div class="more">
                    <a href="{{ post.url }}" class="info">
                        <button>Read more</button>
                    </a>
                </div>
            </article>
        </div>
    </div>
    {% endfor %}
</section>
<div class="spacer"></div>