From bd5253f71e639f275102d924640bf64a547e45b0 Mon Sep 17 00:00:00 2001
From: Denis Ergin <denis25657@hotmail.de>
Date: Tue, 21 Jan 2025 19:29:22 +0100
Subject: [PATCH] fix(slides): various style fixes + additional examples for
 nth-child

---
 src/components/slides/css-basics/border.astro |  7 +++-
 src/components/slides/css-basics/font.astro   |  2 +-
 .../slides/css-selectors-advanced/index.astro | 18 +++++++++++
 .../css-selectors-advanced/pseudo.astro       | 32 ++++++++++++++-----
 4 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/components/slides/css-basics/border.astro b/src/components/slides/css-basics/border.astro
index 98ef9fd..ada8c7c 100644
--- a/src/components/slides/css-basics/border.astro
+++ b/src/components/slides/css-basics/border.astro
@@ -61,6 +61,11 @@
       <p class="base-border-wo-style border-dotted">
         style: <code>dotted</code>
       </p>
+    </div>
+  </section>
+
+  <section>
+    <div class="apply-styles two">
       <p class="base-border-wo-style border-inset">
         style: <code>inset</code>
       </p>
@@ -189,7 +194,7 @@
       <li>border-start-start-radius -&gt; oben links</li>
       <li>border-start-end-radius -&gt; oben rechts</li>
       <li>border-end-start-radius -&gt; unten links</li>
-      <li>border-end-start-radius -&gt; unten rechts</li>
+      <li>border-end-end-radius -&gt; unten rechts</li>
     </ul>
   </section>
 
diff --git a/src/components/slides/css-basics/font.astro b/src/components/slides/css-basics/font.astro
index 3787777..5e1a9f8 100644
--- a/src/components/slides/css-basics/font.astro
+++ b/src/components/slides/css-basics/font.astro
@@ -81,7 +81,7 @@
   <section>
     <pre class="css"><code data-trim data-line-numbers is:raw>
       .line-height {
-        line-height: 2rem;
+        line-height: 20px;
       }
     </code></pre>
     <div class="apply-styles one">
diff --git a/src/components/slides/css-selectors-advanced/index.astro b/src/components/slides/css-selectors-advanced/index.astro
index e4d3c00..b5d9f38 100644
--- a/src/components/slides/css-selectors-advanced/index.astro
+++ b/src/components/slides/css-selectors-advanced/index.astro
@@ -139,6 +139,24 @@ import MediaQueries from './media-queries.astro';
       }
     }
 
+    .container.nth {
+      &.nth-2n .child:nth-child(2n) {
+        background-color: rgb(126, 154, 240);
+      }
+
+      &.nth-2n\+1 .child:nth-child(2n+1) {
+        background-color: rgb(126, 154, 240);
+      }
+
+      &.nth-n\+4 .child:nth-child(n+4) {
+        background-color: rgb(126, 154, 240);
+      }
+
+      &.nth--n\+3 .child:nth-child(-n+3) {
+        background-color: rgba(126, 154, 240);
+      }
+    }
+
     &.not {
       p:not(.important) {
         background-color: #282;
diff --git a/src/components/slides/css-selectors-advanced/pseudo.astro b/src/components/slides/css-selectors-advanced/pseudo.astro
index 984cba4..ba51564 100644
--- a/src/components/slides/css-selectors-advanced/pseudo.astro
+++ b/src/components/slides/css-selectors-advanced/pseudo.astro
@@ -162,16 +162,33 @@ import NthBox from "./nth-box.astro"
     <p><code>An+B</code>, dabei ist <code>n</code> "gedanklich" eine natürliche Zahl</p>
   </section>
 
-  <section>
+  <section class="apply-styles pseudo">
     <p>Beispiele:</p>
-    <hr>
     <p><code>:nth-child(2n)</code> <br>- Selektiert jedes 2. Element (even)</p>
-    <hr>
+    <div class="container nth nth-2n">
+      <NthBox amount={5} />
+    </div>
+  </section>
+
+  <section class="apply-styles pseudo">
     <p><code>:nth-child(2n + 1)</code> <br>- Selektiert jedes 2. Element, beginnend ab dem 1. Element (odd)</p>
-    <hr>
-    <p><code>(n+7)</code> <br>- Selektiert das 7. und alle darauffolgenden Elemente</p>
-    <hr>
+    <div class="container nth nth-2n+1">
+      <NthBox amount={5} />
+    </div>
+  </section>
+
+  <section class="apply-styles pseudo">
+    <p><code>(n+7)</code> <br>- Selektiert das 4. und alle darauffolgenden Elemente</p>
+    <div class="container nth nth-n+4">
+      <NthBox amount={5} />
+    </div>
+  </section>
+
+  <section class="apply-styles pseudo">
     <p><code>(-n+3)</code> <br>- Selektiert die ersten drei Elemente</p>
+    <div class="container nth nth--n+3">
+      <NthBox amount={5} />
+    </div>
   </section>
 
   <section>
@@ -447,13 +464,12 @@ import NthBox from "./nth-box.astro"
   <section>
     <pre class="css"><code data-trim data-line-numbers is:raw>
       p:where(.test) {
-        background-color: black;
+        background-color: white;
       }
 
       p {
         background-color: #002;
         color: white;
-
       }
     </code></pre>
   </section>