---
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 text-active-blue mb-9">Latest news</h1>

        {% 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-[#11182F] mb-8">
                <div class="min-h-[200px] h-[inherit] self-stretch md:w-[168px] bg-[#D9E7ED] dark:bg-[#17203D] 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" src="{{ blog.data.image }}" alt="" srcset=""/>   
                            {% elif blog.data.imageWide %}
                                <img class="mb-4 self-center w-full h-auto" src="{{ blog.data.image }}" alt="" srcset=""/>
                            {% else %}
                                <img class="mb-4 self-center w-full max-w-[240px] h-auto" src="{{ blog.data.image }}" alt="" srcset=""/>
                            {% 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>
                        <h1 class="text-grey-black dark:text-white !text-lg md:!text-xl font-bold ">
                            <a href="{{ blog.url }}">{{ blog.data.title | safe }}</a>
                        </h1>
                        <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>