feat(blog): style adjustments, tailwind container queries

Author: jakNatonek

libs/blog/layouts/ui/.eslintrc.json

@@ -24,7 +24,8 @@
             "prefix": "al",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/no-host-metadata-property": "off" //@todo: remove when angular 18 fix
       }
     },
     {

libs/blog/layouts/ui/src/lib/layout/layout.component.html

@@ -1,9 +1,9 @@
 <al-header [language]="'ENG'" />
-<main class="bg-gray-50">
+<main>
   <div
-    class="mx-auto flex w-full max-w-screen-xl justify-between px-2 py-4 xl:px-0"
+    class="mx-auto flex h-full w-full max-w-screen-xl justify-between px-2 py-4 xl:px-0"
   >
     <router-outlet></router-outlet>
   </div>
 </main>
-<al-footer />
+<al-footer class="mt-auto block" />

libs/blog/layouts/ui/src/lib/layout/layout.component.ts

@@ -10,5 +10,8 @@ import { HeaderComponent } from '../header/header.component';
   templateUrl: './layout.component.html',
   styleUrls: ['./layout.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'min-h-screen grid grid-rows-[auto_1fr_auto]',
+  },
 })
 export class LayoutComponent {}

libs/blog/shared/ui/breadcrumb/src/index.ts

@@ -1 +1 @@
-export * from './lib/blog-shared-ui-breadcrumb/blog-shared-ui-breadcrumb.component';
+export * from './lib/breadcrumb/breadcrumb.component';

libs/blog/shared/ui/pagination/src/lib/pagination/pagination.component.html

@@ -16,7 +16,7 @@
       <li>
         <button
           al-button
-          class="flex min-w-10 justify-center !px-1 !py-3 leading-none"
+          class="min-w-10 flex justify-center !px-1 !py-3 leading-none"
           [variant]="page.isActive ? 'Primary' : 'Outline'"
           (click)="setPage(page.index)"
         >

libs/shared/assets/src/lib/styles/main.scss

@@ -7,6 +7,7 @@
 /* You can add global styles to this file, and also import other style files */
 body {
   font-family: 'Inter', sans-serif;
+  @apply bg-al-gray-600 text-white;
 }
 
 html {

package.json

@@ -32,6 +32,7 @@
     "@ng-icons/tabler-icons": "^25.6.0",
     "@ngrx/signals": "^17.0.1",
     "@nx/angular": "18.2.4",
+    "@tailwindcss/container-queries": "^0.1.1",
     "cheerio": "1.0.0-rc.12",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

tailwind.preset.js

@@ -27,4 +27,5 @@ module.exports = {
       },
     },
   },
+  plugins: [require('@tailwindcss/container-queries')],
 };