Merge branch 'develop'

src/app/modules/home/pages/home/home.component.html

@@ -4,10 +4,10 @@ <h1 class="font-bold text-2xl px-6 | lg:px-0 || dark:text-gray-200">
       Últimas noticias
     </h1>
 
-    <div class="md:container px-6 | lg:px-0 lg:grid lg:grid-cols-3">
+    <div class="flex flex-col | md:container | px-0 lg:grid lg:grid-cols-3">
       <ng-container *ngIf="news.news.length > 0; else noNews">
         <app-headline
-          class="cursor-pointer hover:shadow-xl"
+          class="cursor-pointer hover:shadow-xl transition-all duration-300 dark:hover:bg-gray-800 px-6 lg:px-0"
           [routerLink]="['/news', headline.news_id]"
           *ngFor="let headline of news.news"
           [headline]="headline"

src/app/modules/sections/pages/ciencia/ciencia.component.html

@@ -1,7 +1,9 @@
-<div class="md:container px-6 | lg:px-0 lg:grid lg:grid-cols-3 | font-serif">
+<div
+  class="flex flex-col | md:container | px-0 lg:grid lg:grid-cols-3 | font-serif"
+>
   <ng-container *ngIf="news.news.length > 0; else noNews">
     <app-headline
-      class="cursor-pointer hover:shadow-xl"
+      class="cursor-pointer hover:shadow-xl transition-all duration-300 dark:hover:bg-gray-800 px-6 lg:px-0"
       [routerLink]="['/news', headline.news_id]"
       *ngFor="let headline of news.news"
       [headline]="headline"

src/app/modules/sections/pages/deporte/deporte.component.html

@@ -1,7 +1,7 @@
-<div class="md:container px-6 | lg:px-0 lg:grid lg:grid-cols-3 | font-serif">
+<div class="flex flex-col | md:container | px-0 lg:grid lg:grid-cols-3 | font-serif">
   <ng-container *ngIf="news.news.length > 0; else noNews">
     <app-headline
-      class="cursor-pointer hover:shadow-xl"
+      class="cursor-pointer hover:shadow-xl transition-all duration-300 dark:hover:bg-gray-800 px-6 lg:px-0"
       [routerLink]="['/news', headline.news_id]"
       *ngFor="let headline of news.news"
       [headline]="headline"

src/app/modules/sections/pages/politics/politics.component.html

@@ -1,7 +1,7 @@
-<div class="md:container px-6 | lg:px-0 lg:grid lg:grid-cols-3 | font-serif">
+<div class="flex flex-col | md:container | px-0 lg:grid lg:grid-cols-3 | font-serif">
   <ng-container *ngIf="news.news.length > 0; else noNews">
     <app-headline
-      class="cursor-pointer hover:shadow-xl"
+      class="cursor-pointer hover:shadow-xl transition-all duration-300 dark:hover:bg-gray-800 px-6 lg:px-0"
       [routerLink]="['/news', headline.news_id]"
       *ngFor="let headline of news.news"
       [headline]="headline"

src/app/modules/sections/pages/salud/salud.component.html

@@ -1,7 +1,9 @@
-<div class="md:container px-6 | lg:px-0 lg:grid lg:grid-cols-3 | font-serif">
+<div
+  class="flex flex-col | md:container | px-0 lg:grid lg:grid-cols-3 | font-serif"
+>
   <ng-container *ngIf="news.news.length > 0; else noNews">
     <app-headline
-      class="cursor-pointer hover:shadow-xl"
+      class="cursor-pointer hover:shadow-xl transition-all duration-300 dark:hover:bg-gray-800 px-6 lg:px-0"
       [routerLink]="['/news', headline.news_id]"
       *ngFor="let headline of news.news"
       [headline]="headline"

src/app/shared/components/a11y-modal/a11y-form/a11y-form.component.html

@@ -56,7 +56,7 @@
 
   <!-- Immersive narration -->
   <button
-    class="py-3 px-5 my-2 bg-black disabled:bg-opacity-30 text-white font-sansSerif shadow-xl shadow-black flex space-x-3 || dark:hover:bg-gray-600 dark:bg-gray-500 dark:shadow-gray-500 dark:disabled:bg-opacity-100 dark:disabled:bg-black"
+    class="py-3 px-5 my-2 bg-black disabled:bg-opacity-30 disabled:cursor-not-allowed text-white font-sansSerif shadow-xl shadow-black flex space-x-3 || dark:hover:bg-gray-600 dark:bg-gray-500 dark:shadow-gray-500 dark:disabled:bg-opacity-100 dark:disabled:bg-black"
     data-locale="es-MX"
     [disabled]="setNarratorStatus()"
     [title]="
@@ -69,7 +69,9 @@
     <i class="material-icons"> menu_book </i>
     <span>Lector inmersivo</span>
   </button>
-  <span *ngIf="setNarratorStatus()" class="text-gray-500 || dark:text-gray-300 text-xs"
+  <span
+    *ngIf="setNarratorStatus()"
+    class="text-gray-500 || dark:text-gray-300 text-xs"
     >El lector inmersivo solo puede ser usado en una página de noticia.</span
   >
 </form>

src/app/shared/components/a11y-modal/a11y-modal.component.html

@@ -1,46 +1,19 @@
 <!-- Overlay -->
 <div
-  class="
-    bg-black bg-opacity-50
-    fixed
-    inset-0
-    hidden
-    justify-center
-    items-center
-    dark:z-10
-    h-screen
-  "
+  class="bg-black bg-opacity-50 fixed inset-0 hidden justify-center items-center dark:z-10 h-screen"
   id="overlay"
   #modalOverlay
 >
   <!-- Modal -->
   <div
-    class="
-      mx-4
-      bg-white
-      max-w-md
-      py-2
-      px-3
-      shadow-xl
-      relative
-      ||
-      dark:bg-gray-900
-    "
+    class="mx-4 bg-white max-w-md py-2 px-3 shadow-xl relative || dark:bg-gray-900"
   >
     <!-- Modal header -->
     <div class="mt-2 lg:mt-0">
       <h4 class="text-lg font-bold font-serif">Accesibilidad</h4>
       <button
-        class="
-          absolute
-          top-0
-          right-0
-          p-4
-          lg:p-2
-          flex flex-none
-          items-center
-          hover:bg-black hover:text-white
-        "
+        class="absolute top-0 right-0 p-4 lg:p-2 flex flex-none items-center hover:bg-black hover:text-white"
+        title="Cerrar panel de accesibilidad"
         id="close-modal-btn"
         (click)="closeModal()"
       >

src/app/shared/components/header/header.component.html

@@ -2,12 +2,11 @@
   class="
     mb-6
     transition-all
-    example-toolbar
-    dark:bg-gray-800 dark:text-gray-200
+    example-toolbar dark:text-gray-200
   "
   #cabecera
 >
-  <div class="flex items-center lg:container mx-auto md:pl-6">
+  <div class="flex items-center lg:container mx-auto md:pl-6 ">
     <a
       #mobileMenu
       class="
@@ -22,7 +21,7 @@
         |
         active:bg-gray-200
         |
-        transition
+        transition-all
         duration-200
         dark:active:bg-gray-700
       "
@@ -40,7 +39,7 @@
 
     <nav class="hidden font-serif | md:flex md:justify-around" #sections>
       <a
-        class="mx-4 cursor-pointer hover:font-bold"
+        class="mx-4 cursor-pointer hover:font-bold transition-all"
         [routerLink]="['/home']"
         routerLinkActive="border-b-2 border-black | dark:border-gray-200"
         (isActiveChange)="onRouterLinkActive($event)"

src/app/shared/components/headline/headline.component.html

@@ -1,28 +1,19 @@
 <div
-  class="
-    flex
-    justify-between
-    my-8
-    items-center
-    |
-    lg:flex-col-reverse lg:items-start lg:p-4
-  "
+  class="flex justify-between my-8 items-center | lg:flex-col-reverse lg:items-start lg:p-4"
 >
   <!-- News data -->
   <div class="flex flex-col w-3/4 mr-4 | lg:mr-0 lg:mt-4">
     <span
-      class="
-        uppercase
-        text-gray-700 text-xs
-        tracking-widest
-        ||
-        dark:text-gray-300
-      "
+      class="uppercase text-gray-700 text-xs tracking-widest || dark:text-gray-300"
     >
       {{ headline.category }}
     </span>
-    <h3 class="text-lg | dark:text-gray-200">
-      {{ headline.title }}
+    <h3 class="text-lg | dark:text-gray-200" [title]="headline.title">
+      {{
+        headline.title.length >= 60
+          ? headline.title.slice(0, 60).trim() + "..."
+          : headline.title
+      }}
     </h3>
     <p class="text-gray-500 text-xs">
       {{ headline.abstract | slice: 0:100 }}...
@@ -33,14 +24,7 @@ <h3 class="text-lg | dark:text-gray-200">
   <img
     [src]="headline.image_url | imgNews | async"
     [alt]="'Imagen de la noticia de' + headline.category"
-    class="
-      w-1/4
-      h-full
-      |
-      lg:w-full lg:h-auto lg:overflow-auto
-      ||
-      dark:brightness-75 dark:contrast-125
-    "
+    class="w-1/4 h-full | lg:w-full lg:h-auto lg:overflow-auto || dark:brightness-75 dark:contrast-125"
     loading="lazy"
   />
 </div>