Improve UI of articles list

templates/components/Article.html.twig

@@ -1,21 +1,19 @@
 <div class="px-4 sm:px-0 sm:pt-4 border-b border-gray-200 dark:border-gray-600" data-qa="article">
     <div class="flex flex-row gap-5">
-        <div class="text-gray-400 font-light pt-1 hidden sm:block" data-qa="article-{{ index }}-date">{{ date | date('d/m/Y') }}</div>
+        <div class="text-gray-500 dark:text-gray-300 pt-1 hidden sm:block" data-qa="article-{{ index }}-date">{{ date | date('d/m/Y') }}</div>
         <article class="pb-4 sm:pb-8">
-            <a href="{{ url }}" data-qa="article-url">
-                <h2 class="font-bold text-lg sm:text-xl dark:text-gray-300" data-qa="article-{{ index }}-title">{{ title }}</h2>
-            </a>
-            <p class="py-2 font-light dark:text-gray-400" data-qa="article-{{ index }}-content">
-                {{ content | striptags | u.truncate(200, '...', false) | raw }}
-            </p>
-            <div class="flex items-center">
-                <a href="{{ url }}" class="hover:underline text-primary-900 dark:text-primary-500 grow">
-                    Lire sur <span class="font-semibold" data-qa="article-{{ index }}-feed">{{ feed }}</span>
+            <span class="sm:hidden text-sm text-gray-500 dark:text-gray-300">
+                {{ date | date('d/m/Y') }}
+            </span>
+            <div class="flex flex-col sm:flex-row gap-2 sm:gap-10 justify-between items-baseline mb-4 sm:mb-0">
+                <h2 class="font-bold text-lg sm:text-xl text-primary-900 dark:text-gray-300" data-qa="article-{{ index }}-title">{{ title }}</h2>
+                <a href="{{ url }}" data-qa="article-url" class="grow-0 shrink-0 basis-auto text-primary-500 hover:underline" data-qa="article-{{ index }}-feed">
+                    Lire l'article sur {{ feed }}
                 </a>
-                <span class="sm:hidden text-xs text-gray-400">
-                    {{ date | date('d/m/Y') }}
-                </span>
             </div>
+            <p class="py-2 font-light dark:text-gray-300" data-qa="article-{{ index }}-content">
+                {{ content | striptags | u.truncate(200, '...', false) | raw }}
+            </p>
         </article>
     </div>
 </div>