feat: New Tutorial

src/content/snippets/typografie/snippet-umbrueche.astro

@@ -0,0 +1,91 @@
+---
+import Snippet from '@components/Snippet.astro'
+---
+
+<Snippet title='Interaktive Demo'>
+  <Fragment slot='settings'>
+    <div class='sn-settings'>
+      <div class='sn-value'>
+        <label for='el-size-input'>Box-Breite:</label>
+        <input
+          type='range'
+          name='size'
+          id='el-size-input'
+          min='50'
+          max='100'
+          step='10'
+          value='100'
+          list='el-size-markers'
+        />
+        <span>
+          <output id='el-size-output'>100</output>%
+        </span>
+
+        <datalist id='el-size-markers'>
+          <option value='50'></option>
+          <option value='60'></option>
+          <option value='70'></option>
+          <option value='80'></option>
+          <option value='90'></option>
+          <option value='100'></option>
+        </datalist>
+      </div>
+    </div>
+  </Fragment>
+
+  <Fragment>
+    <div class='demo-umbrueche'>
+      <div class='sn-element title'>
+        Der
+        Donau&#xAD;dampf&#xAD;schiff&#xAD;fahrts&#xAD;gesell&#xAD;schafts&#xAD;kapitän
+        sticht mit seiner Mann&#xAD;schaft wieder in&#xA0;See
+      </div>
+    </div>
+  </Fragment>
+</Snippet>
+
+<style>
+  @scope (.demo-umbrueche) {
+    :scope {
+      .title {
+        --width: 100%;
+
+        font-family: var(--ff-headings);
+        font-size: clamp(2.5rem, 4vw, 4.3rem);
+        line-height: 1.2;
+        font-weight: var(--fw-bold);
+        max-width: var(--width);
+        transition: max-width ease-out 120ms;
+      }
+    }
+    span {
+      border: 2px solid red;
+    }
+  }
+
+  @scope (.sn-settings) {
+    :scope {
+      #el-size-output {
+        display: inline-block;
+        inline-size: 3ch;
+        text-align: end;
+        margin-inline-end: 0.2em;
+      }
+    }
+  }
+</style>
+
+<script is:inline>
+  ;(function () {
+    const snInput = document.querySelector('#el-size-input')
+    const snOnput = document.querySelector('#el-size-output')
+    const demoContainer = document.querySelector('.title')
+
+    snOnput.textContent = snInput.value
+
+    snInput.addEventListener('input', (event) => {
+      snOnput.textContent = event.target.value
+      demoContainer.style.setProperty('--width', `${event.target.value}%`)
+    })
+  })()
+</script>

src/pages/assets.mdx

@@ -188,5 +188,7 @@ Du hast eine Idee, weißt aber noch nicht wie du sie umsetzen kannst? Hier habe
 : Header, der nach dem scrollen verschwindet.
 
 [^1]: Die Einbindung von Google Fonts ist datenschutzrechtlich bedenklich, da beim aufruf einer Website immer die IP-Adresse gepspeichert wird. Die Nutzung von Google Fonts ist daher nur mit Einwilligung des Nutzers zulässig. Binde Fonts daher lieber lokal ein.
+
 [^2]: WebP ist ein ein von Google entwickeltes Bildformat. Im Vergleich zu JPG benötigen WebP bei vergleichbarer Qualität weniger Speicherplatz und sind damit schneller ladbar.
+
 [^3]: AVIF steht für „AV1 Image File Format“ und bietet im Vergleich zu JPG und AVIF die beste Kompressionseffizienz. Es ist ein offenes und lizenzfreies Bildformat, das auf dem Videocodec AV1 basiert, wird aktuell aber noch nicht von allen Browsern unterstüzt.

src/pages/grundlagen.mdx

@@ -95,6 +95,9 @@ JavaScript ist eine Skriptsprache, die verwendet wird, um die Funktionalität ei
 </Figure>
 
 [^1]: HTML steht für HyperText Markup Language und ist eine Auszeichnungssprache, die verwendet wird, um Webseiten zu erstellen. HTML-Dokumente bestehen aus einer Folge von Tags, die die Struktur und den Inhalt einer Webseite beschreiben.
+
 [^2]: Ein Screenreader ist eine Software, die den Inhalt einer Webseite in Sprache umwandelt und so blinden oder sehbehinderten Menschen den Zugang zu digitalen Inhalten ermöglicht.
+
 [^3]: CSS ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen einer Website zu definieren. Sie definiert die Farben, Schriftarten, Layouts und andere visuelle Aspekte einer Website.
+
 [^4]: Sass steht für „Syntactically Awesome Style Sheets“ und ist eine CSS-Erweiterungssprache. Es handelt sich um eine mächtige und flexible Stylesheet-Sprache, die es Entwicklern ermöglicht, effizienter und produktiver CSS-Code zu schreiben.

src/styles/base/_variables.scss

@@ -26,7 +26,9 @@
   --clr-bg-card: hsl(0, 0%, 100%);
   --clr-bg-table-odd: hsl(0, 0%, 98%);
   --clr-bg-table-odd: rgb(0 0 0 / 0.03);
-  --clr-bg-table-placeholder: hsl(124 47% 63% / 0.3);
+
+  --clr-bg-table-ws: hsl(141.7, 76.6%, 73.1%);
+  --clr-bg-table-symb: hsl(200.60000000000002, 94.4%, 86.1%);
 
   --clr-line: color-mix(
     in oklab,
@@ -57,6 +59,7 @@
   --clr-type-tool: #991b1b;
 
   --clr-warning: #b91c1c;
+  --clr-success: #1f9d55;
   --clr-primary: #004fcd;
   --clr-primary-hover: hsl(217 100% 40% / 0.3);
   --clr-primary-light: hsl(217 100% 40% / 0.7);