index.njk

---
layout: layouts/base.njk
nav: true
title: Blog
eleventyExcludeFromCollections: true
section: blog
---

<div class="md:container mx-auto px-4 md:px-0 md:grid md:grid-cols-3 md:gap-8">

  <div class="md:max-w-screen-md pb-2 mb:pb-4 border-b border-grey md:border-b-0">
    <div class="top-0 sticky pt-2 md:pt-4">
      <h1 class="text-xs">The Kingdom Code Blog</h1>
      <p class="text-4xl md:text-2xl lg:text-3xl font-bold mb-2 md:mb-4">Reflections on Christianity and technology…</p>
      <p><a href="/" class="text-orange underline hover:text-mint">Kingdom Code</a> is a group for Christian's working in technology; we want to explore how our Christian faith shapes the way we build digital tools.</p>

      <ul class="flex gap-3 mt-2 md:mt-4">
      {% for key, social in basics.socials %}
        <li class="inline">
          <a class="text-blue hover:text-mint" href="{{ social }}" target="_blank" rel="noopener">
            {% svgSprite class="inline h-4 w-4", name=key %}
          </a>
        </li>
      {% endfor %}
      </ul>
    </div>
  </div>

  <div class="divide-y divide-grey text-blue md:col-span-2 md:mt-0">
  {% for post in collections.posts | reverse %}

    <a href="{% if post.data.canonical %}{{ post.data.canonical }}{% else %}{{ post.url }}{% endif %}" {% if post.data.canonical %}target="_blank"{% endif %} class="block group pt-4 mb-4">
      <date class="text-xs block">{{ post.data.date | readableDate }}</date>
      <h2 class="text-orange text-2xl font-bold group-hover:text-mint hover:underline">{{ post.data.title }}</h2>
      {% if post.data.intro %}
      <p class="mx-0 my-2 text-blue">{{ post.data.intro }}</p>
      {% endif %}

      <span class="underline group-hover:text-mint hover:underline">Keep reading{% if post.data.canonicalRef %} on {{ post.data.canonicalRef }}{% endif %}…</span>
    </a>
  {% endfor %}
  </div>

</div>