Big update

assets/scripts/main.js

@@ -64,7 +64,7 @@ if (modeSwitchInput) {
 
 /*
 ┌──────────────────────────────────┐
-NAVIGATION
+  NAVIGATION
 └──────────────────────────────────┘
 */
 
@@ -97,3 +97,48 @@ const externalLinks = document.querySelectorAll('main a[href^="http"]');
     link.target = '_blank';
   }
 });
+
+/*
+┌──────────────────────────────────┐
+  LINKED HEADLINES
+└──────────────────────────────────┘
+*/
+
+const linkedHeadlines = document.querySelectorAll(['h1[id], h2[id]']);
+const linkedSections = document.querySelectorAll(['.stage__item[id]']);
+const stageNavigation = document.querySelector('.stage__navigation');
+
+function headlinesObserverCallback(entries) {
+  const stageNavigationLinks = stageNavigation.querySelectorAll('a');
+
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      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 (
+  stageNavigation &&
+  (linkedHeadlines.length > 0 || linkedSections.length > 0)
+) {
+  const headlinesObserver = new IntersectionObserver(
+    headlinesObserverCallback,
+    {
+      rootMargin: '0px',
+      threshold: 0.5,
+    }
+  );
+
+  [...linkedHeadlines].forEach((item) => headlinesObserver.observe(item));
+  [...linkedSections].forEach((item) => headlinesObserver.observe(item));
+}

assets/styles/base/layout.scss

@@ -97,6 +97,7 @@ strong {
 }
 
 a {
+  display: inline-block;
   color: var(--clr-primary);
   text-decoration: none;
   transition: text-decoration var(--transition);
@@ -133,11 +134,11 @@ a {
   &__item {
     scroll-snap-align: start;
     min-height: calc(100vh - 3.75rem);
-    padding: var(--spacing--large) 0;
+    padding: var(--spacing--large) 0 var(--spacing--xlarge);
 
     h2 {
       font-size: 1.75rem;
-      margin: 0 0 0.8em;
+      margin: 0 0 0.8em !important;
       line-height: 1.3;
     }
   }
@@ -183,6 +184,10 @@ a {
           color: var(--clr-primary);
           text-decoration: none;
         }
+
+        &.is-active {
+          color: var(--clr-primary);
+        }
       }
     }
   }

assets/styles/base/variables.scss

@@ -2,11 +2,12 @@
   --spacing: 1.25rem;
   --spacing--small: 1rem;
   --spacing--large: 2rem;
+  --spacing--xlarge: 10rem;
 
   --header-height: 3.75rem;
   --navigation-width: 15rem;
   --content-max-width: 45rem;
-  --border-radius: 0.5rem;
+  --border-radius: 0.2rem;
 
   --transition: 130ms ease-in;
   --transition--button: 130ms cubic-bezier(0.55, 0.09, 0.68, 0.53);

assets/styles/main.scss

@@ -19,6 +19,5 @@
         'modules/mode-switch',
         'modules/button',
         'modules/content',
-        'modules/social-links',
         'modules/footer',
         'syntax/chroma';

assets/styles/modules/content.scss

@@ -5,6 +5,20 @@
   padding: 0 var(--spacing);
   transition: padding var(--transition);
 
+  a:not([class]) {
+    padding: 0 0.3em;
+    margin: 0 -0.4em;
+    border-radius: var(--border-radius);
+    transition: all var(--transition);
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      background-color: var(--clr-primary);
+      color: var(--clr-inverse);
+    }
+  }
+
   &--full {
     padding: var(--spacing--large) var(--spacing);
   }
@@ -77,11 +91,6 @@
         font-weight: 300;
         color: var(--clr-text);
         margin-bottom: 0.2em;
-
-        &:hover,
-        &:focus {
-          color: var(--clr-primary);
-        }
       }
     }
   }

assets/styles/modules/footer.scss

@@ -3,6 +3,8 @@
 // └──────────────────────────────────┘
 
 .footer {
+  position: relative;
+  z-index: 5;
   padding: var(--spacing);
   font-size: 0.8rem;
   border-top: 1px solid var(--footer-line);

content/das-seminar/anmeldung/index.md

@@ -8,44 +8,17 @@ id: 'anmeldung'
 class: 'bgs-4'
 ---
 
-# Du möchtest dabei sein?
+## Du möchtest dabei sein?
 
-Das ist einfacher als du denkst. Setze dich frühzeitig auf die Warteliste und definiere eine hohe Priorität.
+Prima. Dann zögere nicht und trage dich in die Warteliste ein.
 {.lead}
 
-<p>
-<a href="https://studip.hawk.de/dispatch.php/course/details?sem_id=4b3efce6a4c286cc0d4956d6451d5ad3&again=yes" class="button">
-  <span>Anmeldung auf StudIP</span>
-</a>
-</p>
-
-Solltest du den Termin verpassen, melde dich einfach bei David. Du erreichst ihn dienstlich über Discord, StudIP oder per&nbsp;E-Mail.
+Wenn du einen der begehrten Plätze ergattert hast, bekommst du rechtzeitig vor dem Start über StudIP eine Nachricht mit allen relevanten Informationen zur Teilnahme.
 
-<ul class="social-links">
-  <li>
-    <a
-      href="https://discord.com/channels/789498129765630003"
-      target="contact"
-      rel="noopener noreferrer"
-    >
-      {{< icon "static/images/icons/discord.svg" >}}
-    </a>
-  </li>
-  <li>
-    <a
-      href="https://studip.hawk.de/dispatch.php/course/overview?cid=26646d7ebf84b68abaa0035cae5da7c2"
-      target="contact"
-      rel="noopener noreferrer"
-    >
-      {{< icon "static/images/icons/studip.svg" >}}
-    </a>
+Solltest die Frist verpassen oder hast es nicht auf die Warteliste geschafft, melde dich einfach bei David. Vielleicht gibt es für dich noch die Möglichkeit der Teilnahme. Beachte bitte die Anmelderegeln und die Veranstaltungszuordnung.
 
-  </li>
-  <li>
-    <a
-      href="mailt&#111;&#58;&#37;64a&#118;%6&#57;&#100;&#46;%6D%61&#99;ie&#106;ew&#115;k&#105;&#64;%68a&#119;k&#46;&#100;e"
-    >
-      {{< icon "static/images/icons/email.svg" >}}
-    </a>
-  </li>
-</ul>
+<p>
+  <a href="{{ .Site.Params.links.studip }}" class="button" target="hawk" rel="noopener noreferrer">
+    <span>Zur Anmeldung</span>
+  </a>
+</p>

content/das-seminar/intro/index.md → content/das-seminar/was/index.md

@@ -1,24 +1,22 @@
 ---
-title: 'Intro'
+title: 'Was'
 description: ''
 date: 2022-01-20T13:40:15+01:00
 draft: false
 weight: 1
-id: 'intro'
+id: 'was'
 class: 'bgs-1'
 ---
 
-# GT 1191 -- Responsives UI/UX-Design
+# Das Seminar GT 1191
 
 „GT 1191“ (vormals „4411“) ist ein Seminar des Studiengangs Bachelor of Arts (BA) der Fakultät Gestaltung an der HAWK Hochschule für angewandte Wissenschaft und Kunst in Hildesheim.
 {.lead}
 
-Das Seminar wird seit 2015 von [David Maciejewski](https://macx.io) (UI/UX
-Consultant bei [IT-P](https://it-p.de/)) gegeben und ist mit rund 30 Teilnehmenden
-pro Semester stark besucht.
+Das Seminar wird seit 2015 von [David Maciejewski](https://macx.io) gegeben. Er ist Senior UI/UX Consultant bei [IT-P](https://it-p.de/) und betreut dort Großkundenprojekte. Mit über 25 Jahren Berufserfahrung als Selbständiger und Angesteller in Agenturen und Start-Ups weiß er, welche Fallstricke bei der Umsetzung von kreativen Ideen warten können.
 
 <div class="button-group">
-  <a href="#lehre" class="button">
+  <a href="#wie" class="button">
     <span>Weiter</span>
   </a>
 </div>

content/das-seminar/wie/index.md

@@ -0,0 +1,28 @@
+---
+title: 'Wie'
+description: ''
+date: 2022-01-20T13:40:53+01:00
+draft: false
+weight: 2
+id: 'wie'
+class: 'bgs-2'
+---
+
+## Wie in GT 1191 gelehrt wird
+
+Das Semester ist in zwei Blöcken aufgeteilt. In den ersten 60 % werden Grundlagen vermittelt, dann die Abschlussarbeiten erarbeitet.
+{.lead}
+
+Du lernst, wie du eine Website mit <abbr title="Hypertext Markup Language">HTML</abbr> strukturieren und mit <abbr title="Cascading Stylesheets">CSS</abbr> gestalten kannst. In einfachen Übungen versuchst du Schritt zu halten und vertiefst dein Wissen in Breakout-Rooms.
+
+Schon während des Semesters arbeitest du an deiner Abgabe, deiner eigenen Website. Dein Dozent steht dir währenddessen mit Rat und Tat zur Seite.
+
+<div class="button-group">
+  <a href="#was" class="button button--ghost">
+    <span>Zurück</span>
+  </a>
+
+  <a href="#wo" class="button">
+    <span>Weiter</span>
+  </a>
+</div>