New Links

assets/scripts/main.js

@@ -104,41 +104,48 @@ const externalLinks = document.querySelectorAll('main a[href^="http"]');
 └──────────────────────────────────┘
 */
 
-const linkedHeadlines = document.querySelectorAll(['h1[id], h2[id]']);
-const linkedSections = document.querySelectorAll(['.stage__item[id]']);
-const stageNavigation = document.querySelector('#TableOfContents');
+if ('IntersectionObserver' in window) {
+  const linkedHeadlines = document.querySelectorAll(['h1[id], h2[id]']);
+  const linkedSections = document.querySelectorAll(['.stage__item[id]']);
+  const stageNavigation = document.querySelector('#TableOfContents');
 
-function headlinesObserverCallback(entries) {
-  const stageNavigationLinks = stageNavigation.querySelectorAll('a');
+  console.log(linkedHeadlines);
 
-  entries.forEach((entry) => {
-    if (entry.isIntersecting) {
+  function headlinesObserverCallback(entries) {
+    const stageNavigationLinks = stageNavigation.querySelectorAll('a');
+
+    entries.forEach((entry) => {
       const navItem = stageNavigation.querySelector(
         `a[href="#${entry.target.id}"]`
       );
 
-      if (navItem) {
-        stageNavigationLinks.forEach((link) =>
-          link.classList.remove('is-active')
-        );
-        navItem.classList.toggle('is-active');
+      if (entry.isIntersecting) {
+        if (navItem) {
+          stageNavigationLinks.forEach((link) =>
+            link.classList.remove('is-active')
+          );
+          navItem.classList.toggle('is-active');
+        }
       }
-    }
-  });
-}
+    });
+  }
 
-if (
-  stageNavigation &&
-  (linkedHeadlines.length > 0 || linkedSections.length > 0)
-) {
-  const headlinesObserver = new IntersectionObserver(
-    headlinesObserverCallback,
-    {
-      rootMargin: '0px',
-      threshold: 0.5,
-    }
-  );
+  if (
+    stageNavigation &&
+    (linkedHeadlines.length > 0 || linkedSections.length > 0)
+  ) {
+    // let rootVertical = parseInt(window.innerHeight / 3);
+
+    const headlinesObserver = new IntersectionObserver(
+      headlinesObserverCallback,
+      {
+        // rootMargin: `0px 0px -${rootVertical}px 0px`,
+        rootMargin: '0px',
+        threshold: 1,
+      }
+    );
 
-  [...linkedHeadlines].forEach((item) => headlinesObserver.observe(item));
-  [...linkedSections].forEach((item) => headlinesObserver.observe(item));
+    [...linkedHeadlines].forEach((item) => headlinesObserver.observe(item));
+    [...linkedSections].forEach((item) => headlinesObserver.observe(item));
+  }
 }

assets/styles/base/layout.scss

@@ -53,6 +53,10 @@ body {
 └──────────────────────────────────┘
 */
 
+::selection {
+  background-color: var(--clr-primary--hover);
+}
+
 h1,
 h2,
 h3,

assets/styles/modules/content.scss

@@ -199,3 +199,43 @@ sup {
     }
   }
 }
+
+/*
+┌──────────────────────────────────┐
+  BLOCKQUOTES
+└──────────────────────────────────┘
+*/
+
+blockquote {
+  position: relative;
+  margin: 1em 0 2em;
+  padding: 1em var(--spacing);
+  background-color: var(--clr-inverse);
+  border-bottom: 1px solid var(--clr-line);
+  box-shadow: var(--image-shadow);
+  color: var(--clr-text--light);
+  font-size: var(--font-size--small);
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: -1rem;
+    right: -1rem;
+    z-index: 2;
+    width: 2.5rem;
+    height: 2.5rem;
+    background-color: var(--clr-inverse);
+    border-radius: 50%;
+    box-shadow: var(--image-shadow);
+    border-bottom: 1px solid var(--clr-line);
+
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%23ff8200' d='M19 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4l3 3 3-3h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 16h-4.83l-.59.59L12 20.17l-1.59-1.59-.58-.58H5V4h14v14zm-8-3h2v2h-2zm1-8c1.1 0 2 .9 2 2 0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+}

assets/styles/modules/toc.scss

@@ -11,6 +11,7 @@ TOC
   padding: var(--spacing) var(--content-spacing);
   margin: var(--content-spacing) calc(var(--content-spacing) * -1);
   box-shadow: var(--image-shadow);
+  border-bottom: 1px solid var(--clr-line);
 
   header {
     margin: 0 0 1em;

content/links/index.md

@@ -19,26 +19,25 @@ Mit diesen handverlesenen Informationen kannst du das Seminar meistern oder dich
 
 ## Inhalte
 
-Dinge, die du gut für deine Website gebrauchen kannst.
+Blindtexte, Farben, Fonts und Icons bekommst du hier. So kannst du deine Idee schnell zur Realität werden lassen.
 
 ### Text
 
 - [Lorem Ipsum Generator](https://loremipsum.io/de/generator)\
   Erzeugt Blindtexte, Platzhalterbilder und bietet Links zu anderen Generatoren.
 - [Cupcake Ipsum](http://www.cupcakeipsum.com/)\
-  Blindtext-Generator mit einem hauch von Zucker.
+  Blindtext-Generator mit einem „Hauch von Zucker“.
 - [DeLorean Ipsum Text Generator](https://satoristudio.net/delorean-ipsum/)\
-  Du kennst die Filmreihe Zurück in die Zukunft? Hier sind Dialoge von Doc und Marty.
+  Du kennst die Filmreihe Zurück in die Zukunft? Dann nutze Dialoge von Doc und Marty.
 
 ### Farben
 
+- [UI Colors](https://uicolors.app/create){{< new >}}\
+  Schnelles Tool, um eine Farbfolge zusammenzustellen. Inklusive Tailwind-, Sass- und CSS-Variabeln.
 - [Tailwind Color Palette](https://tailwindcolor.com/)\
-  Schöne Farbpalette. Ein Klick auf eine Farbe kopiert euch den Farbwert in die Zwischenablage.
+  Übersichtliche Farbpalette. Ein Klick kopiert den Farbwert in die Zwischenablage.
 - [Color Designer](https://colordesigner.io/)\
   Farbpaletten, Farbwähler und Komplementärfarben.
-- [Materials Colors ](https://github.com/romannurik/MaterialColorsApp#material-colors-for-mac)\
-  Farbwähler als natives macOS-Tool.
-  {.links}
 
 ### Fonts
 
@@ -52,38 +51,37 @@ Dinge, die du gut für deine Website gebrauchen kannst.
 - [Material Icons](https://fonts.google.com/icons)\
   Weit verbreitetes Icon-Set von Google, verwendet in Android und den Google-Apps.
 - [Material Design Icons](https://materialdesignicons.com/)\
-  Community-Edition der Google-Icons mit wesentlich mehr Auswahl und Varianten. Auch als Webfont nutzbar.
+  Community-Edition der Google-Icons mit größerer Auswahl und Varianten. Auch als Webfont nutzbar.
 - [Simple Icons](https://simpleicons.org/)\
-  Brand-Icons bekannter Markern wie Facebook und Instagram. Download als SVG und RGB-Farbton.
+  Brand-Icons und Farben bekannter Markern wie Facebook und Instagram.
 - [Feather Icons](https://feathericons.com/)\
-  Simpel und sauber gestaltet, Export als SVG.
+  Simpel und sauber gestaltet, export als SVG.
 
 ### Fotos
 
 - [Unsplash](https://unsplash.com/)\
-  Hochauflösende Bilder zur freien Verwendung auf deiner Website.
+  Der Standard: Hochauflösende Bilder zur freien Verwendung auf deiner Website.
 
 ## Optimieren
 
-Wenn dir Qualität wichtig ist, dann solltest du dir folgende Links ansehen.
+Im Semester lernst du, dein Erstelltes für Endanwender zu optimieren. Hier sind die Tools&nbsp;dazu:
 
 - [Squoosh](https://squoosh.app/)\
-  Besser als Photoshop und Co optimiert Squoosh alle arten von Bildern und gibt sie auch in neuen Bildformaten aus.
+  Optimiert deine Bilder und exportiert auch Varianten in unterschiedlichen Formaten wie AVIF und WebP. Besser als der Export von Photoshop und Co.
 - [SVGOMG](https://jakearchibald.github.io/svgomg/)\
-  Jedes SVG muss hier durch: Optimiere deine Bilder mit dieser Web-App.
+  Optimiert dein SVG und entfernt unnötigen Datenballast.
 - [SVGWIZ](https://svgwiz.com/)\
-  Konvertiert SVG-Icons in CSS-Data-URI, um diese als Hintergrundgrafik verwenden zu können.
+  Konvertiert SVG in CSS-Data-URIs, um diese als Hintergrundgrafik verwenden zu können.
 - [Colour Contrast Checker](https://colourcontrast.cc/)\
-  Prüft Vorder- und Hintergrundfarben, ob sie genügend Kontrast aufweisen, um gut gelesen werden zu können.
+  Prüft Vorder- und Hintergrundfarben auf hohen Kontrast, damit diese gut gelesen werden können.
 
-## Nützliche Helfer
+## Entwicklung
 
-- [PX to REM Converter](https://nekocalc.com/px-to-rem-converter)\
-  Du möchtest `rem` statt `px` verwenden? Dann ist dieser Converter genau richtig für dein Design.
+Auch wenn es sich bei HTML- und CSS-Dateien nur um Textdateien handelt, solltest du eine der foglenden Entwicklungsumgebung (IDE) nutzen. Darüber hinaus findest du hier Links zu Frameworks und Apps, die dir die lokale Arbeit auf deinem Rechner erleichtern.
 
-## Editoren (IDE)
+### Editoren (IDE)
 
-Mit diesen Werkzeugen kannst du deine Website entwickeln.
+Mit diesen Werkzeugen kannst du deine Website oder Komponenten entwickeln.
 
 - [Visual Studio Code (VSC)](https://code.visualstudio.com/)\
   Desktop-App für macOS und Windows, mit der wir hauptsächlich arbeiten. Gespeichert werden deine Dateien lokal auf deinem&nbsp;Computer.
@@ -113,6 +111,30 @@ Ich empfehle folgende Plugins für Visual Studio Code:
 - [px to rem](https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem)\
   Konvertiert zwischen Pixel- und rem-Werten.
 
+### Frameworks
+
+Du möchtest mehr als statische HTML-Dateien? Dann bringe jetz ein bisschen Schwung&nbsp;rein:
+
+- [Hugo](https://gohugo.io/)
+  Ein in Go geschriebener Seitengenerator für statische Seiten. Diese Seite verwendet Hugo.
+- [Kirby](https://gohugo.io/)
+  Das wohl beste CMS auf PHP-Basis, Kibry, ist für kleine als auch große Websites bestenes geeignet.
+- {{< reflist-item
+  title="Laravel Valet"
+  href="https://laravel.com/docs/8.x/valet"
+  descr="Entwicklungsumgebung für macOS-Minimalisten. Valet macht aus einem Verzeichnis einen virtuellen Host unter der *.test-Domäne."
+  platform="mac" >}}
+
+## UI/UX Tools
+
+- [PX to REM Converter](https://nekocalc.com/px-to-rem-converter)\
+  Du möchtest `rem` statt `px` verwenden? Dann ist dieser Converter genau richtig für dein Design.
+- {{< reflist-item
+  title="Materials Colors"
+  href="https://github.com/romannurik/MaterialColorsApp#material-colors-for-mac"
+  descr="Farbwähler als natives macOS-Tool."
+  platform="mac" >}}
+
 ## Demos
 
 Du brauchst Code-Beispiele? Gern, hier sind die, die ich gebaut habe. Die sind auch noch im Jahr {{< year >}} aktuell. 😎
@@ -181,20 +203,6 @@ Links zu externen Websits mit detaillierter Erklärung, sowie Lerninhalte.
 - [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/)\
   Schreibe HTML und CSS in Sekundenschnelle. Auch in Visual Studio Code.
 
-## Frameworks
-
-Statische HTML-Dateien reichen dir nicht und WordPress ist dir zu aufgebläht? Dann teste die folgende Alternativen.
-
-- [Hugo](https://gohugo.io/)
-  Ein in Go geschriebener Seitengenerator für statische Seiten. Diese Seite verwendet Hugo.
-- [Kirby](https://gohugo.io/)
-  Das wohl beste CMS auf PHP-Basis, Kibry, ist für kleine als auch große Websites bestenes geeignet.
-- {{< reflist-item
-  title="Laravel Valet"
-  href="https://laravel.com/docs/8.x/valet"
-  descr="Entwicklungsumgebung für macOS-Minimalisten. Valet macht aus einem Verzeichnis einen virtuellen Host unter der *.test-Domäne."
-  platform="mac" >}}
-
 </section>
 
 [^1]: Zur Registierung und Login benötigst du einen kostenlosen Account von [GitHub](https://github.com/).