HouseOfAngular · DDonochVA · May 12, 2025 · May 12, 2025 · coderabbitai · May 12, 2025
diff --git a/apps/blog/src/assets/icons/arrow-down.svg b/apps/blog/src/assets/icons/arrow-down.svg
diff --git a/libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html b/libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html
@@ -1,9 +1,9 @@
 <ng-container *transloco="let t; read: 'aboutUsPage'">
-  <h2 class="text-al-primary-foreground py-4 text-[40px] font-bold">
+  <h2 class="py-4 text-[40px] font-bold">
     {{ t('title') }}
   </h2>
 
-  <al-card class="bg-transparent">
+  <al-card>
     <section
       alCardContent
       aria-labelledby="angular-love"
@@ -35,7 +35,7 @@ <h2 class="text-al-primary-foreground py-4 text-[40px] font-bold">
     <al-newsletter alCardContent />
   </al-card>
 
-  <h2 class="text-al-primary-foreground mb-8 mt-10 text-[40px] font-bold">
+  <h2 class="mb-8 mt-10 text-[40px] font-bold">
     {{ t('authorsTitle') }}
   </h2>
 </ng-container>

diff --git a/...ture-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts b/...ture-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts
@@ -38,6 +38,7 @@ import { CategoryListItem, injectCategories } from './categories.const';
     NgClass,
     TranslocoDirective,
     ArticleRegularCardSkeletonComponent,
+    CardComponent,
     RepeatDirective,
     RouterLink,
     ButtonComponent,

diff --git a/...-article-card/src/lib/components/article-compact-card/article-compact-card.component.html b/...-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
@@ -1,17 +1,16 @@
 <a [routerLink]="['/', article().slug] | alLocalize">
   <article
-    class="relative h-full overflow-hidden rounded-lg bg-black bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
+    class="h-full rounded-lg bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
+    [style.background-image]="
+      'url(' +
+      (article().featuredImageUrl || 'assets/article-placeholder.webp') +
+      ')'
+    "
     [attr.aria-labelledby]="article().slug"
   >
-    <img
-      alt="Post featured image"
-      class="absolute h-auto w-full bg-contain opacity-20"
-      [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'"
-      [priority]="imagePriority()"
-      width="1215"
-      height="750"
-    />
-    <div class="relative flex h-full flex-col justify-between text-[#fff]">
+    <div
+      class="bg-al-background relative flex h-full flex-col justify-between opacity-85"
+    >
       <div
         class="hover:bg-al-bottom-radial-gradient absolute h-full w-full"
       ></div>

diff --git a/...ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts b/...ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts
@@ -1,4 +1,3 @@
-import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { FastSvgComponent } from '@push-based/ngx-fast-svg';
@@ -10,17 +9,9 @@ import { AvatarComponent } from '@angular-love/blog/shared/ui-avatar';
 @Component({
   selector: 'al-article-compact-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    AvatarComponent,
-    RouterLink,
-    AlLocalizePipe,
-    FastSvgComponent,
-    NgOptimizedImage,
-  ],
+  imports: [AvatarComponent, RouterLink, AlLocalizePipe, FastSvgComponent],
   templateUrl: './article-compact-card.component.html',
 })
 export class ArticleCompactCardComponent {
   readonly article = input.required<ArticleCard>();
-  readonly imagePriority = input<number | null>(null);
 }
diff --git a/...article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts b/...article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts
@@ -7,7 +7,7 @@ import { CardComponent } from '@angular-love/blog/shared/ui-card';
   selector: 'al-article-hero-card-skeleton',
   imports: [NgxSkeletonLoaderModule, CardComponent],
   template: `
-    <al-card class="bg-transparent">
+    <al-card>
       <div alCardContent class="p-2">
         <div class="flex flex-row items-center">
           <!-- avatar -->

diff --git a/...le-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html b/...le-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html
@@ -1,6 +1,6 @@
 <a [routerLink]="['/', article().slug] | alLocalize">
   <article
-    class="light:border group relative flex h-full w-full flex-row rounded-lg shadow-none"
+    class="group relative flex h-full w-full flex-row rounded-lg shadow-none max-h-52"
     [attr.aria-labelledby]="article().slug"
   >
     <img

diff --git a/...-article-card/src/lib/components/article-regular-card/article-regular-card.component.html b/...-article-card/src/lib/components/article-regular-card/article-regular-card.component.html
@@ -1,6 +1,6 @@
 <a [routerLink]="['/', article().slug] | alLocalize">
   <article
-    class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100 dark:border-transparent"
+    class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border border-transparent shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100"
     [attr.aria-labelledby]="article().slug"
   >
     <div
@@ -18,12 +18,8 @@
     <div class="rounded-b-lg">
       <div class="flex items-center justify-between px-4 pt-4">
         <div class="flex items-center gap-2">
-          <al-avatar
-            [imageSrc]="article().author.avatarUrl"
-            [priority]="imagePriority()"
-            size="32"
-          />
-          <span class="text-al-primary-foreground text-sm/[14px] font-medium">
+          <al-avatar [imageSrc]="article().author.avatarUrl" size="32" />
+          <span class="text-sm/[14px] font-medium">
             {{ article().author.name }}
           </span>
         </div>
@@ -38,14 +34,10 @@
         </div>
       </div>
       <div class="flex flex-col gap-3 px-4 pb-4 pt-3">
-        <h3
-          class="*:text-al-primary-foreground text-2xl font-bold *:not-italic"
-          [id]="article().slug"
-          style="word-break: break-word"
-        >
+        <h3 class="text-2xl font-bold" [id]="article().slug">
           {{ article().title }}
         </h3>
-        <p class="*:text-al-pink line-clamp-2 *:font-medium *:not-italic">
+        <p class="line-clamp-2">
           {{ article().excerpt }}
         </p>
       </div>

diff --git a/libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html b/libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html
@@ -12,9 +12,6 @@
     />
   }
   @case ('compact') {
-    <al-article-compact-card
-      [article]="article()"
-      [imagePriority]="imagePriority()"
-    />
+    <al-article-compact-card [article]="article()" />
   }
 }
diff --git a/.../ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html b/.../ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html
@@ -1,7 +1,7 @@
 <div class="my-5 flex flex-row items-center justify-between gap-6">
   <h2
     data-testId="article-list-title"
-    class="text-al-primary-foreground line-clamp-2 max-w-[160px] text-xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
+    class="line-clamp-2 max-w-[160px] text-xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
   >
     {{ title() }}
   </h2>

diff --git a/libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts b/libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts
@@ -8,7 +8,6 @@ import {
 
 @Component({
   selector: 'al-author-card-template',
-  standalone: true,
   imports: [CardComponent, CardContentDirective, GradientCardDirective],
   host: {
     class: 'block @container',
@@ -20,11 +19,9 @@ import {
           class="@3xl:flex-row @3xl:border-none flex w-full flex-col items-center rounded-lg border"
         >
           <div
-            alGradientCard
-            class="@3xl:border dark:@3xl:!bg-al-radial-gradient dark:@3xl:bg-al-background light:@3xl:bg-[#f2f2f2] @3xl:min-w-[260px] min-w-fit rounded-lg pb-4 pt-6"
+            class="@3xl:border @3xl:!bg-al-radial-gradient @3xl:bg-al-background @3xl:min-w-[260px] min-w-fit rounded-lg pb-4 pt-6"
           >
             <div
-              alCardContent
               class="@3xl:max-w-[360px] flex w-full flex-col items-center gap-4"
             >
               <ng-content select="[author-info-card]"></ng-content>

diff --git a/libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html b/libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html
@@ -42,7 +42,7 @@
     <div class="flex flex-col items-center gap-4">
       <al-avatar [imageSrc]="author().avatarUrl" size="96" />
       <span
-        class="text-al-foreground line-clamp-2 font-bold leading-none"
+        class="line-clamp-2 font-bold leading-none"
         [id]="'author-title-' + author().slug"
       >
         {{ author().name }}

diff --git a/...r/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html b/...r/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html
@@ -31,7 +31,7 @@ <h3 id="author-ad-title" class="text-2xl font-bold lg:text-4xl">
               href="https://form.typeform.com/to/Zzf1Girt?typeform-source=angular.love"
               target="_blank"
             >
-              <p class="text-sm font-bold text-white">
+              <p class="text-sm font-bold">
                 {{ t('becomeAuthorCard.buttonText') }}
               </p>
             </a>
@@ -61,7 +61,7 @@ <h3 id="author-ad-title" class="text-2xl font-bold lg:text-4xl">
               class="bg-al-pink flex h-[46px] w-full items-center justify-center rounded-lg md:w-4/5 lg:w-full"
               [routerLink]="'/writing-rules' | alLocalize"
             >
-              <p class="text-center text-sm font-bold text-white">
+              <p class="text-center text-sm font-bold">
                 {{ t('articleWritingRules.buttonText') }}
               </p>
             </a>

diff --git a/...or-page/src/lib/components/become-author-list-item/become-author-list-item.component.html b/...or-page/src/lib/components/become-author-list-item/become-author-list-item.component.html
@@ -1,18 +1,18 @@
 <div
   class="my-1 flex h-full w-full items-center border md:my-2"
   [ngClass]="{
-    'bg-al-radial-gradient rounded-lg': layout() === 'curved',
+    'bg-al-radial-gradient rounded-lg': layout() === 'curved'
   }"
 >
   @if (index()) {
     <div
       class="bg-al-pink ml-4 mt-5 flex aspect-square h-6 items-center justify-center self-start rounded-full"
     >
-      <p class="text-base font-bold text-white">{{ index() }}</p>
+      <p class="text-base font-bold">{{ index() }}</p>
     </div>
   } @else {
     <div class="ml-4 mr-2 mt-6 h-4 self-start md:mt-0 md:self-center">
-      <fast-svg name="tick" class="text-al-pink" size="16" />
+      <fast-svg name="tick" size="16" class="text-al-pink " />
     </div>
   }
   <p class="ml-4 mr-6 block pb-4 pt-5 md:ml-4 md:py-5 lg:mr-[30px]">

diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts b/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts
@@ -1,5 +1,5 @@
 import { NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
   selector: 'al-footer-logo',
@@ -16,8 +16,13 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
         />
         <span class="text-al-primary px-4 text-lg font-bold">angular.love</span>
       </div>
+      <small class="text-al-muted hidden pt-1 text-xs lg:block">
+        Copyright &#169; {{ currentYear() }}
+      </small>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FooterLogoComponent {}
+export class FooterLogoComponent {
+  readonly currentYear = input.required<number>();
+}
diff --git a/.../blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts b/.../blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts
@@ -9,7 +9,7 @@ import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-m
     <div class="flex flex-col items-start">
       <h3
         id="social-media-title"
-        class="mb-4 hidden text-sm font-bold text-[#fff] lg:block"
+        class="mb-4 hidden text-sm font-bold lg:block"
       >
         Social media
       </h3>

diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html
@@ -1,16 +1,17 @@
-<footer class="w-full bg-[#191a22]">
+<footer class="bg-al-card w-full">
   <div
     class="al-container mx-auto grid max-w-screen-xl gap-y-4 px-6 py-4 xl:px-0"
   >
-    <al-footer-logo class="self-center" />
-    <al-navigation [whiteFont]="true" />
+    <al-footer-logo class="self-center" [currentYear]="currentYear" />
+    <al-navigation />
     <div
       class="social-media-container flex items-center justify-self-end md:max-lg:justify-self-center"
     >
       <al-footer-social-media-icons />
     </div>
+
+    <small class="copyright text-al-muted text-center text-xs lg:hidden">
+      Copyright &#169; {{ currentYear }}
+    </small>
   </div>
-  <small class="block pb-4 text-center text-xs text-[#6a798b]">
-    Copyright &#169; {{ currentYear }}
-  </small>
 </footer>
diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss
@@ -10,13 +10,27 @@ al-navigation {
   grid-area: social;
 }
 
+.copyright {
+  grid-area: copyright;
+}
+
 .al-container {
   grid-template-areas:
     'logo social'
-    'nav nav';
+    'nav nav'
+    'copyright copyright';
+}
+
+@screen md {
+  .al-container {
+    grid-template-areas:
+      'logo nav'
+      'social social'
+      'copyright copyright';
+  }
 }
 
-@screen lg {
+@screen xl {
   .al-container {
     grid-template-areas: 'logo nav social';
   }

diff --git a/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html b/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html
@@ -6,7 +6,7 @@
   }"
 >
   <ul
-    class="flex flex-wrap justify-center"
+    class="flex flex-wrap"
     [ngClass]="{
       'flex-col justify-between': layout() === 'vertical',
     }"
@@ -21,8 +21,7 @@
         >
           <a
             [attr.data-testid]="item.dataTestId"
-            class="p-2 font-medium md:p-6"
-            [ngClass]="whiteFont() ? 'text-white' : 'text-al-foreground'"
+            class="text-al-foreground p-2 font-medium md:p-6"
             [routerLinkActive]="'text-al-pink'"
             [routerLink]="item.link | alLocalize"
             (click)="navigated.emit()"
@@ -34,8 +33,7 @@
         <li>
           <a
             [attr.data-testid]="item.dataTestId"
-            class="p-2 font-medium md:p-6"
-            [ngClass]="whiteFont() ? 'text-white' : 'text-al-foreground'"
+            class="text-al-foreground p-2 font-medium md:p-6"
             [href]="item.link"
             target="_blank"
           >

diff --git a/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts b/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts
@@ -32,7 +32,6 @@ export type NavItem = {
 })
 export class NavigationComponent {
   readonly layout = input<'vertical' | 'horizontal'>('horizontal');
-  readonly whiteFont = input<boolean>(false);
 
   readonly navItems: NavItem[] = [
     {

diff --git a/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html b/libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html
@@ -5,7 +5,7 @@
         <div class="flex flex-col">
           <h2
             id="newsletter-title"
-            class="text-al-primary-foreground text-4xl font-bold lg:text-2xl xl:text-4xl"
+            class="text-4xl font-bold lg:text-2xl xl:text-4xl"
           >
             {{ t('title') }}
           </h2>

diff --git a/libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html b/libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html
@@ -3,7 +3,7 @@
 >
   @for (partner of partnersList(); track partner.asset_URL) {
     <a
-      class="light:border light:rounded-lg aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100"
+      class="aspect-[2/1] w-full max-w-[160px] rounded-lg bg-white md:max-w-[200px] lg:transition-transform lg:hover:scale-105 lg:hover:cursor-pointer lg:motion-reduce:transition-none lg:motion-reduce:hover:scale-100"
       [href]="partner.link_URL"
       [title]="partner.title"
       target="_blank"

diff --git a/libs/blog/shared/ui-card/src/lib/card.component.ts b/libs/blog/shared/ui-card/src/lib/card.component.ts
@@ -69,7 +69,7 @@ export class CardLinkableDirective {
 export class GradientCardDirective {
   @HostBinding('class')
   get hostClasses() {
-    return 'bg-al-radial-gradient dark:bg-al-background';
+    return 'border !bg-al-radial-gradient bg-al-background';
   }
 }
 
@@ -97,5 +97,5 @@ export class CardComponent {
   ref: ElementRef<HTMLElement> = inject(ElementRef);
 
   @HostBinding('class')
-  hostClasses = 'block rounded-lg border bg-al-card shadow-sm overflow-hidden';
+  hostClasses = 'block rounded-lg border shadow-sm overflow-hidden';
 }
diff --git a/libs/blog/shared/ui-card/src/lib/card.stories.ts b/libs/blog/shared/ui-card/src/lib/card.stories.ts
@@ -58,7 +58,7 @@ const content =
 export const regular: Story = {
   render: () => ({
     template: wrapper(`
-      <al-card class="bg-transparent">
+      <al-card>
         <div alCardHeader>Header</div>
         <div alCardContent>${content}</div>
         <div alCardFooter>Footer</div>