description = "Article layout"

[blogPost]
slug = "{{ :slug }}"
categoryPage = "article"
==

<!DOCTYPE html>
<html lang="en">
{% partial "head" %}
{% partial "header" %}

<style>
  body {
    background-color: var(--background-color);
  }

  h1 {
    margin-bottom: 8px;
    margin-top: 32px;
  }

  :not(pre) > code {
    background: var(--code-background-color);
    padding: 1px 4px;
    font-weight: 600;
    font-size: 0.95em;
    border-radius: 3px;
  }

  pre {
    background: var(--codeblock-background-color);
    color: var(--codeblock-color);
  }
  pre code {
    display: block;
    overflow-x: auto;
    padding: .5em;
  }

  .date-big {
    line-height: 2;
    margin-left: 32px;
  }

  article {
    background-color: var(--base-color);
    box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.15);
  }

  article img, article video {
    max-width: 100%;
    display: block;
    margin: auto;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  article img:first-child, article video:first-child {
    max-width: 85%;
  }

  article h1 {
    margin-top: 64px;
  }

  article h2, article h3, article h4 {
    margin-top: 42px;
  }

  .author {
    margin-top: 0px;
    margin-bottom: 64px;
  }

  @media screen and (min-width: 900px) {
    article .content {
      width: 70%;
      margin: auto;
    }
  }

  @media (max-width: 900px) {
    body {
      background-color: var(--base-color);
    }
    article {
      background-color: transparent;
      box-shadow: none;
    }
    article img:first-child, article video:first-child {
      max-width: 100%;
    }
  }
</style>

<link rel="stylesheet" href="{{ 'assets/css/highlight.obsidian.min.css' | theme }}">
<script defer src="{{ 'assets/js/highlight.min.js' | theme }}"></script>
<script defer src="{{ 'assets/js/highlight.gdscript.min.js' | theme }}"></script>
<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((block) => {
      hljs.highlightBlock(block);
    });
  });
</script>

<div class="container">
  <article class="flex padded">
    <div class="content">
      <img
        data-src="{{ post.featured_images[0].filename }}"
        src="{{ post.featured_images[0].path }}"
        alt="{{ post.featured_images[0].description }}"
        style="width: 100%;"
      />

      <div class="info">
        <h1>{{ post.title }}</h1>
        <h4 class="author">
          By: {{ post.user.full_name }}
          <span class="date"> {{ post.published_at|date('M d, Y') }}</span>
        </h4>
      </div>

      {{ post.content_html|raw }}
    </div>
  </article>
</div>

{% partial "footer" %}
</html>
