fix(slides): various style fixes + additional examples for nth-child

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>
 

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">

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;

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>
+    <div class="container nth nth-2n+1">
-    <p><code>(n+7)</code> <br>- Selektiert das 7. und alle darauffolgenden Elemente</p>
+      <NthBox amount={5} />
-    <hr>
+    </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>