docs(docs): improve UI button

docs/src/content/docs/challenges/angular/1-projection.md

@@ -21,7 +21,7 @@ You will start with an fully functional application that includes a dashboard co
 
 While the application works, the developer experience is far from being optimal. Every time you need to implement a new card, you have to modify the `card.component.ts`. In real-life projects, this component can be shared among many applications. The goal of the challenge is to create a <b>CardComponent</b> that can be customized without any modifications. Once you've created this component, you can begin implementing the <b>CityCardComponent</b> and ensure you are not touching the <b>CardComponent</b>.
 
-## Constraints:
+## Constraints
 
 - You <b>must</b> refactor the <b>CardComponent</b> and <b>ListItemComponent</b>.
 - The <b>NgFor</b> directive must be declared and remain inside the <b>CardComponent</b>. You might be tempted to move it to the <b>CardComponent</b> but avoid doing so.
@@ -39,15 +39,22 @@ Your PR title must start with <b>Answer:1</b>.
 :::
 
 <div class="article-footer">
-  <a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3Aanswer" alt="Projection community solutions"> Community solutions
+  <a
+    href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3Aanswer"
+    alt="Projection community solutions">
+    ❖ Community Answers
   </a>
-  <a href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3A"answer+author"' alt="Projection solution author"> Author solution
+  <a
+    href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3A"answer+author"'
+    alt="Projection solution author">
+    ▶︎ Author Answer
   </a>
   <a
     href="https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5"
     target="_blank"
     rel="noopener noreferrer"
-     alt="Projection blog article">
+    alt="Projection blog article">
-  Blog Post
+    <svg aria-hidden="true" class="astro-yzt5nm4y astro-lq7oo3uf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"></path></svg>
+     Blog Post
   </a>
 </div>

docs/src/content/docs/challenges/angular/3-directive-enhancement.md

@@ -6,3 +6,42 @@ description: Challenge 3 is about enhancing a built-in directive
 :::note
 WIP: go [here](https://github.com/tomalaforge/angular-challenges/blob/main/apps/ngfor-enhancement/README.md) if you want to do this challenge
 :::
+
+<div class="chip">Challenge #3</div>
+
+## Information
+
+## Statement
+
+## Constraints
+
+---
+
+:::note
+Start the project by running: `npx nx serve ngfor-enhancement`.
+:::
+
+:::tip[Reminder]
+Your PR title must start with <b>Answer:3</b>.
+:::
+
+<div class="article-footer">
+  <a
+    href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3Aanswer"
+    alt="Directive enhancement community solutions">
+    ❖ Community Answers
+  </a>
+  <a
+    href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A1+label%3A"answer+author"'
+    alt="Directive enhancement solution author">
+    ▶︎ Author Answer
+  </a>
+  <a
+    href="https://medium.com/@thomas.laforge/ngfor-enhancement-cc3a9805e4c5"
+    target="_blank"
+    rel="noopener noreferrer"
+    alt="Directive enhancement blog article">
+    <svg aria-hidden="true" class="astro-yzt5nm4y astro-lq7oo3uf" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"></path></svg>
+     Blog Post
+  </a>
+</div>

docs/src/styles/custom-css.css

@@ -16,7 +16,7 @@
   border-radius: 6px;
   padding: 2px 8px;
   background-color: rgb(35, 134, 54);
-  color: white;
+  color: var(--sl-color-white);
 }
 
 .github-neutral-btn {
@@ -45,23 +45,30 @@
 .article-footer {
   margin-top: 3rem !important;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   flex-wrap: wrap;
+  gap: 1.5rem;
 }
 .article-footer > a {
-  border: 1px solid var(--sl-color-gray-5);
+  border: 1px solid var(--sl-color-accent-high);
   border-radius: 0.5rem;
   padding: 1rem;
   text-decoration: none;
   color: var(--sl-color-gray-2);
   box-shadow: var(--sl-shadow-md);
   color: var(--sl-color-white);
-  font-size: var(--sl-text-2xl);
+  font-size: var(--sl-text-lg);
   line-height: var(--sl-line-height-headings);
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0;
+  background-color: var(--sl-color-accent-high);
 }
 
 a.primary {
-  color: #fff !important;
+  color: var(--sl-color-white) !important;
 }
 
 b {