From bad87d913e7ad832f61b7ae9a95b9841679145a0 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon.vieille@trinaps.com>
Date: Sat, 19 Aug 2023 18:23:20 +0200
Subject: [PATCH] fix author block render

---
 assets/css/app.scss                 | 51 ++++++++++++++++-------------
 templates/page/post/_post.html.twig |  8 ++---
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 2b79812..25cc3d0 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -522,6 +522,34 @@ pre[class*="language-"] {
   }
 }
 
+.post-author-wrapper {
+  .post-author-avatar {
+    vertical-align: top;
+    width: 100px;
+    padding: 10px;
+    display: inline-block;
+  }
+
+  .post-author {
+    display: inline-block;
+    width: calc(100% - 100px);
+    padding: 10px 10px 10px 30px;
+  }
+
+  @media screen and (max-width: 774px) {
+    .post-author-avatar {
+      display: block;
+      margin: auto;
+    }
+
+    .post-author {
+      display: block;
+      width: 100%;
+      padding-right: 20px;
+    }
+  }
+}
+
 .content hr, .content .hr {
   border: 0;
   border-bottom: 1px dashed $color-hr-border;
@@ -1287,29 +1315,6 @@ $links: (
     }
 }
 
-// @keyframes avatarlogo {
-//   0% {
-//     -webkit-mask: linear-gradient(135deg,#000c 40%,#000,#000c 60%) 100% 100%/250% 250%;
-//   }
-//   40% {
-//     -webkit-mask-position: 0 0;
-//   }
-//   90% {
-//     -webkit-mask: linear-gradient(135deg,#000c 40%,#000,#000c 60%) 100% 100%/250% 250%;
-//   }
-//   100% {
-//     -webkit-mask: linear-gradient(135deg,#000c 40%,#000,#000c 60%) 100% 100%/250% 250%;
-//   }
-// }
-//
-// .avatar-logo {
-//   img, svg {
-//     _animation-name: avatarlogo;
-//     animation-duration: 7s;
-//     animation-iteration-count: infinite;
-//   }
-// }
-
 @media (prefers-color-scheme: dark) {
   .bg-box {
     background: #343c53;
diff --git a/templates/page/post/_post.html.twig b/templates/page/post/_post.html.twig
index 840a064..0421885 100644
--- a/templates/page/post/_post.html.twig
+++ b/templates/page/post/_post.html.twig
@@ -55,14 +55,14 @@
     {% set description = setting('post_author_description') %}
 
     {%- if description and not post.isQuick -%}
-        <div class="body">
-            <div class="rounded-2xl shadow-md p-2 md:p-8 flex justify-start bg-box">
+        <div class="body post-author-wrapper">
+            <div class="rounded-2xl shadow-md p-2 md:p-8 bg-box">
                 {%- set avatar = setting('avatar_image') -%}
 
                 {%- if avatar -%}
-                    <p class="mr-8">
+                    <div class="post-author-avatar">
                         <img src="{{ asset(avatar)|imagine_filter('site_avatar') }}" alt="Simon Vieille" title="Simon Vieille" class="rounded-full">
-                    </p>
+                    </div>
                 {%- endif -%}
 
                 <div class="post-author">