Added subtitle for category cards article

resources/sass/home/home.scss

@@ -317,12 +317,23 @@ a {
             top: 0;
             right: 0;
         }
-        .published-at {
+        .sub-title {
             color: lighten($gray, 20);
             font-size: 80%;
+            display: flex;
+            justify-content: space-between;
+            @media screen and (max-width: 576px) {
+                flex-direction: column;
+            }
+            .fa {
+                color: $info;
+            }
+            .published-at {
+                margin-left: 0.625rem;
+            }
         }
         .title {
-            font-size: 1.4rem;
+            font-size: 1.1rem;
             font-weight: 500;
             line-height: 2;
         }
@@ -337,10 +348,6 @@ a {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            @media screen and (max-width: 576px) {
-                flex-direction: column;
-                align-items: flex-start;
-            }
             .author-published-holder {
                 display: flex;
                 align-items: center;
@@ -349,17 +356,17 @@ a {
                     height: 3rem;
                     border-radius: 50%;
                 }
-                .author-published-text {
+                .author-name {
                     margin-right: 0.75rem;
                 }
             }
-            .duration-of-study {
+            /*.duration-of-study {
                 color: lighten($gray, 20);
                 font-size: 80%;
                 @media screen and (max-width: 576px) {
                     margin-top: 0.75rem;
                 }
-            }
+            }*/
         }
     }
 }

resources/views/home/category-blog.blade.php

@@ -18,8 +18,27 @@
                         @for($i=0; $i<6; $i++)
                         <div class="article-content">
                             <a href="" class="article-link"></a>
-                            <div class="published-at">
-                                ۱۴۰۰/۰۵/۰۳
+                            <div class="sub-title">
+                                <div class="d-flex">
+                                    <div class="published-at">
+                                        <i class="fa fa-calendar"></i>
+                                        <span>
+                                            ۱۴۰۰/۰۵/۰۳
+                                        </span>
+                                    </div>
+                                    <div class="comments">
+                                        <i class="fa fa-comment-o"></i>
+                                        <span>
+                                            ۴
+                                        </span>
+                                    </div>
+                                </div>
+                                <div class="duration-of-study">
+                                    <i class="fa fa-clock-o"></i>
+                                    <span>
+                                        مدت زمان مطالعه ۲۴ دقیقه
+                                    </span>
+                                </div>
                             </div>
                             <div class="title">
                                     عنوان مقاله اول متون بلکه روزنامه و مجله در ستون
@@ -32,21 +51,20 @@
                                     <div class="author-avatar-holder">
                                         <img class="author-avatar" src="https://beyondco.de/img/marcel.jpg" alt="avater">
                                     </div>
-                                    <div class="author-published-text">
-                                        <div class="author-name">
-                                            مشخصات نویسنده
-                                        </div>
+                                    <div class="author-name">
+                                        مشخصات نویسنده
                                     </div>
                                 </div>
-                                <div class="duration-of-study">
-                                    مدت زمان مطالعه ۲۴ دقیقه
-                                </div>
                             </div>
                         </div>
                         @endfor
                     </div>
                 </div>
-                <div class="col-lg-4"></div>
+                <div class="col-lg-4">
+                    <h1 class="article-category-title-holder">
+                        مقالات اخیر
+                    </h1>
+                </div>
             </div>
         </section>
     @endslot