---
layout: default
---
<section id="intro">
    <div class="flex-row-between">
        <h1>telepunk</h1>
        <button title="Change theme" id="theme-toggle" onclick="modeSwitcher()"><div/></button>
    </div>
    <div class="bio">a website.</div>
</section>

<div class="search-article">
    <label for="search-input" aria-hidden="true">
        <!-- Magnifier -->
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="rgba(128,128,128,0.8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="feather feather-search">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
    </label>

    <input type="search" id="search-input" placeholder="Find some articles here" aria-label="Search">
    <ul id="search-results"></ul>
</div>

<section class="posts" id="Blog">
    <h2>BLOG</h2>
    <ul>
        {% for post in site.posts %}
        <li>
            <a href="{{ post.url }}">{{ post.title }}</a>
            <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%b %d, %Y" }}</time>
        </li>
        {% endfor %}
    </ul>
</section>