Files
simplex-chat/website/src/blog.html
M Sarmad Qadeer bbd4e6c8ba website: glossary feature (#2529)
* web: quick fixes in glossary.md

* website: update header tags

* website: add glossary feature

* website: add & style the tooltips & glossary terms

* website: add overlay for glossary definition

* website: add list styling & update links

---------

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
2023-06-11 07:52:55 +01:00

79 lines
3.6 KiB
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 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=""/>
{% 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>