fix(ui): enhance header and post styles with new animations and layout adjustments

templates/index.html

@@ -12,18 +12,21 @@
       <div class="posts">
         <div class="post on-list" th:each="post : ${posts.items}">
           <h1 class="post-title">
-            <a th:text="${post.spec.title}" th:href="${post.status.permalink}">Post Title</a>
+            <a th:text="'<' + ${post.spec.title} + '>'" th:href="${post.status.permalink}">Post Title</a>
           </h1>
           <div class="post-meta">
             <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
               Post CreateTime
             </span>
-            <span
-              class="post-author"
-              th:with="contributor = ${post.contributors[0]}"
-              th:text="${':: '+contributor.displayName}"
-              >:: Author</span
-            >
+            <span class="post-separator">
+              <span></span>
+              <span></span>
+              <span></span>
+              <span></span>
+            </span>
+            <span class="post-author" th:with="contributor = ${post.contributors[0]}" th:text="${contributor.displayName}">
+              Author
+            </span>
           </div>
           <span class="post-tags-inline" th:each="tag : ${post.tags}">
             <a

templates/post.html

@@ -5,10 +5,16 @@
 >
   <th:block th:fragment="content">
     <div class="post">
-      <h1 class="post-title" th:text="${post.spec.title}">Post Title</h1>
+      <h1 class="post-title" th:text="'<' + ${post.spec.title} + '>'">Post Title</h1>
       <div class="post-meta">
         <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> publishTime </span>
-        <span class="post-author" th:text="${':: '+post.owner.displayName}">:: Author</span>
+        <span class="post-separator">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </span>
+        <span class="post-author" th:text="${post.owner.displayName}">Author</span>
       </div>
       <span class="post-tags-inline" th:each="tag : ${post.tags}">
         <a