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-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);
  }

  figure {
    margin: 0;
  }

  figure img {
    margin: 0;
  }

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

  article h1 {
    margin-top: 64px;
  }

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

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

  .tag.active {
    filter: saturate(0.75);
  }

  @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?1' | theme }}">

<div class="container">
  <article class="flex padded">
    <div class="content content-article">
      {# Lightbox elements and classes are added to all images via JavaScript. #}
      <figure>
        <img
          src="{{ post.featured_images[0].path }}"
          title="{{ post.featured_images[0].title }}"
          width="{{ post.featured_images[0].width }}"
          height="{{ post.featured_images[0].height }}"
          alt="{{ post.featured_images[0].title }} {{ post.featured_images[0].description }}"
          class="rounded-lg"
          style="width: 100%; height: auto"
        />
        <figcaption style="opacity: 0.8; line-height: 1.5">
          <strong>{{ post.featured_images[0].title }}</strong>
          <span style="margin-left: 0.75rem; font-size: 90%">{{ post.featured_images[0].description }}</span>
        </figcaption>
      </figure>

      <div class="info">
        <h1>
          {% if not post.published or post.published_at > date() %}
          <a href="/backend/rainlab/blog/posts/update/{{ post.id }}#secondarytab-rainlabbloglangposttab-manage" data-barba-prevent><abbr title="This article isn't marked as published on the CMS backend, or its publication date is set in the future. To make it display publicly, go to the post's Manage page, check Published and set a publication date in the past.">[UNPUBLISHED]</abbr></a>
          {% endif %}
          {{ post.title }}
        </h1>
        <h4 class="author">
          By: {{ post.user.full_name }}
          <span class="date"> {{ post.published_at|date('j F Y') }}</span>
        </h4>

        <div class="tags">
          {% for category in post.categories %}
            <a href="/news/{{ category.slug }}/{{ blogPosts.posts.currentPage }}" title="{{ category.description }}"><div class="tag active">{{ category.name }}</div></a>
          {% endfor %}
        </div>
      </div>

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

{% partial "footer" %}

</html>
