From 69e9feaa0ea42497d1dcf4387fb619977b79f2d4 Mon Sep 17 00:00:00 2001 From: thomas Date: Fri, 22 Sep 2023 16:55:24 +0200 Subject: [PATCH] docs(docs): improve UI button --- .../docs/challenges/angular/1-projection.md | 17 +++++--- .../angular/3-directive-enhancement.md | 39 +++++++++++++++++++ docs/src/styles/custom-css.css | 17 +++++--- 3 files changed, 63 insertions(+), 10 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/1-projection.md b/docs/src/content/docs/challenges/angular/1-projection.md index 7c6426d..2acf755 100644 --- a/docs/src/content/docs/challenges/angular/1-projection.md +++ b/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 CardComponent that can be customized without any modifications. Once you've created this component, you can begin implementing the CityCardComponent and ensure you are not touching the CardComponent. -## Constraints: +## Constraints - You must refactor the CardComponent and ListItemComponent. - The NgFor directive must be declared and remain inside the CardComponent. You might be tempted to move it to the CardComponent but avoid doing so. @@ -39,15 +39,22 @@ Your PR title must start with Answer:1. :::
- Community solutions + + ❖ Community Answers - Author solution + + ▶︎ Author Answer - Blog Post + alt="Projection blog article"> + + Blog Post
diff --git a/docs/src/content/docs/challenges/angular/3-directive-enhancement.md b/docs/src/content/docs/challenges/angular/3-directive-enhancement.md index 6386400..030534d 100644 --- a/docs/src/content/docs/challenges/angular/3-directive-enhancement.md +++ b/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 ::: + +
Challenge #3
+ +## Information + +## Statement + +## Constraints + +--- + +:::note +Start the project by running: `npx nx serve ngfor-enhancement`. +::: + +:::tip[Reminder] +Your PR title must start with Answer:3. +::: + +
+ + ❖ Community Answers + + + ▶︎ Author Answer + + + + Blog Post + +
diff --git a/docs/src/styles/custom-css.css b/docs/src/styles/custom-css.css index 1a510f0..1904871 100644 --- a/docs/src/styles/custom-css.css +++ b/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 {