blog: v5.3 announcement (#3093)

* blog: v5.3 announcement draft

* update

* update post

* add images and previews

* website: add imageWide property

* website: add .float-to-left class

* update

* update images

* update readme

* fix typo

---------

Co-authored-by: M Sarmad Qadeer <MSarmadQadeer@gmail.com>

website/src/_includes/blog_previews/20230925.html

@@ -0,0 +1,14 @@
+<p><strong>v5.3 is released:</strong></p>
+
+<ul class="mb-[12px]">
+    <li>new desktop app! 💻</li>
+    <li>encrypt locally storead files & media</li>
+    <li>directory service and other group improvements</li>
+    <li>simplified incognito mode</li>
+    <li>better app responsiveness and stability, and 40% reduced memory usage.</li>
+    <li>new privacy settings: show last messages & save draft.</li>
+</ul>
+
+<p>Also, our users added 6 new interface languages - Arabic*, Bulgarian, Finnish, Hebrew*, Thai and Ukrainian.</p>
+
+<p>* Android app only.</p>

website/src/blog.html

@@ -44,7 +44,9 @@ active_blog: true
                     <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=""/>
+                                <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 %}

website/src/css/blog.css

@@ -188,29 +188,26 @@ h3::before {
   outline: none;
 }
 
-p,
-a,
 h1,
 h2,
 h3,
 h4,
 h5,
-h6,
-li,
-ul,
-ol,
-span,
-div,
-blockquote,
-pre,
-code {
+h6{
   clear: both;
 }
 
 #article p img {
-  float: left;
+  display: inline-block;
 }
 
 #article img {
-  margin-bottom: 1.5rem;
+  margin: 0.5rem 0 1rem 0;
+}
+
+@media (min-width: 1024px) {
+  #article .float-to-left{
+    float: left;
+    margin-right: 3rem;
+  }
 }