simplex-chat/website/src/blog.html

---
layout: layouts/main.html
title: "SimpleX blog: the latest news"
description: "SimpleX Chat - a private and encrypted messenger without any user IDs (not even random ones)! Make a
private connection via link / QR code to send messages and make calls."
path: /blog
templateEngineOverride: njk
active_blog: true
---
{% block css_links %}
<style>
    #blog-list ul li {
        list-style: disc;
        margin-right: 0;
        margin-left: 0;
    }

    #blog-list ul {
        list-style-position: inside;
        overflow: auto;
    }

    #blog-list ul li {
        -webkit-margin-start: 1.1rem;
        color: #000;
    }

    .dark #blog-list ul li {
        color: #fff;
    }

    #blog-list ul li::marker {
        color: black;
    }

    .dark #blog-list ul li::marker {
        color: white;
    }
</style>
{% endblock %}

<section class="py-10 px-5 mt-[66px]" id="blog-list">
    <div class="container">
        <h1 class="text-[38px] text-center font-bold mb-2">Latest news</h1>
        <p class="text-right mb-9"><a class="text-primary-light dark:text-[#70F0F9] text-sm font-medium tracking-[0.03em]" href="/news">Open SimpleX Network News channel</a></p>

        {% for blog in collections.blogs %}
        {% if not(blog.data.draft) %}
        <article
            class="w-full flex flex-col items-start md:flex-row rounded-[4px] overflow-hidden shadow-[0px_20px_30px_rgba(0,0,0,0.12)] dark:shadow-none bg-white dark:bg-[#0B2A59] mb-8">
            <div
                class="min-h-[200px] h-[inherit] self-stretch md:w-[168px] bg-[#DBEEFF] dark:bg-[#071C46] flex items-center justify-center flex-[1] relative">
                <div class="min-h-[inherit] h-full w-full flex items-end px-4 pt-4 justify-center relative">
                    {% if blog.data.image %}
                    {% if blog.data.imageBottom %}
                    <img class="w-full max-w-[240px] h-auto{% if blog.data.imageLight %} dark:hidden{% endif %}" src="{{ blog.data.image }}" alt="" srcset="" />
                    {% if blog.data.imageLight %}<img class="w-full max-w-[240px] h-auto hidden dark:inline-block" src="{{ blog.data.imageLight }}" alt="" srcset="" />{% endif %}
                    {% elif blog.data.imageWide %}
                    <img class="mb-4 self-center w-full h-auto{% if blog.data.imageLight %} dark:hidden{% endif %}" src="{{ blog.data.image }}" alt="" srcset="" />
                    {% if blog.data.imageLight %}<img class="mb-4 self-center w-full h-auto hidden dark:inline-block" src="{{ blog.data.imageLight }}" alt="" srcset="" />{% endif %}
                    {% else %}
                    <img class="mb-4 self-center w-full max-w-[240px] h-auto{% if blog.data.imageLight %} dark:hidden{% endif %}" src="{{ blog.data.image }}" alt=""
                        srcset="" />
                    {% if blog.data.imageLight %}<img class="mb-4 self-center w-full max-w-[240px] h-auto hidden dark:inline-block" src="{{ blog.data.imageLight }}" alt="" srcset="" />{% endif %}
                    {% endif %}
                    {% else %}
                    <img class="h-[44px] self-center dark:hidden" src="/img/new/logo-symbol-light.svg" alt=""
                        srcset="" />
                    <img class="h-[44px] self-center hidden dark:inline-block" src="/img/new/logo-symbol-dark.svg"
                        alt="" srcset="" />
                    {% endif %}
                </div>
            </div>
            <div class="p-6 md:py-8 flex-[2.5] flex flex-col">
                <div>
                    <h2 class="text-grey-black dark:text-white !text-lg md:!text-xl font-bold">
                        <a href="{{ blog.url }}">{{ blog.data.title | safe }}</a>
                    </h2>
                    <p class="text-sm text-[#A8B0B4] font-medium mt-2 mb-4 tracking-[0.03em]">
                        {{ blog.data.date.toUTCString().split(' ').slice(1, 4).join(' ') }}
                    </p>
                    {% if blog.data.previewBody %}
                    <div class="mb-4 dark:text-white">
                        {% include blog.data.previewBody %}
                    </div>
                    {% elif blog.data.preview %}
                    <p class="dark:text-white mb-4">{{ blog.data.preview | safe }}</p>
                    {% endif %}
                </div>
                <a class="block text-primary-light dark:text-[#70F0F9] text-base font-medium tracking-[0.03em] mt-auto"
                    href="{{ blog.url }}">Read More</a>
            </div>
        </article>
        {% endif %}
        {% endfor %}
    </div>
</section>