public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

dhbw farb-schema: himbeer (wie hdm 223015c) — highlight #d63384, h1 #a02060, h2 #1f2937 (#f48fb1 auf invert für barrierearmut), pre/code #0f0f23/#d63384, dimmed #4a4a6a, invert-bg #001520→#000; herzlich willkommen statt willkommen; git kurz erklärt

Browse Source
This commit is contained in:
libretech
2026-05-07 14:41:07 +02:00
parent 6b33a79d9c
commit 8dabc4e570
8 changed files with 140 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/dhbw/01_web_eng.md
+25 -19
View File
@@ -11,8 +11,8 @@ title: Web Engineering
<style>
:root {
--color-foreground: #1a1a2e;
--color-highlight: #005f8a;
--color-dimmed: #4a6a7a;
--color-highlight: #d63384;
--color-dimmed: #4a4a6a;
}
section.invert {
--color-foreground: #fff;
@@ -21,24 +21,30 @@ section {
font-size: 1.4rem;
}
h1 {
color: #005f8a;
color: #a02060;
}
section.invert h1 {
color: #fff;
}
h2 {
color: #1f2937;
}
section.invert h2 {
color: #f48fb1;
}
pre {
background: #0f1e2e;
color: #00b4d8;
background: #0f0f23;
color: #d63384;
border-radius: 8px;
border-left: 3px solid #005f8a;
border-left: 3px solid #d63384;
}
pre code {
background: transparent;
color: inherit;
}
code {
background: #1a3a4a;
color: #00b4d8;
background: #1a1a2e;
color: #d63384;
padding: 0.15em 0.4em;
border-radius: 4px;
}
@@ -49,7 +55,7 @@ a {
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
![bg cover opacity:0.2](./assets/background.png)
@@ -63,7 +69,7 @@ a {
<!-- _class: lead -->
# Willkommen!
# Herzlich Willkommen!
## 1. Sitzung: 08.05.2026
@@ -202,7 +208,7 @@ Content-Type: application/json
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Onboarding
## Tools, Runtimes, Workflows
@@ -212,11 +218,11 @@ Content-Type: application/json
# Werkzeuge & Betriebssystem
**Was du brauchst:**
- Terminal (zsh/bash/fish/pwsh)
- Editor (siehe folgende Folie)
- JavaScript-Runtime (Node.js / Bun / Deno)
- Browser mit DevTools (Chromium / Firefox / Safari)
- Git
- **Terminal** (zsh / bash / fish / pwsh) — Kommandozeile
- **Editor** (siehe folgende Folie)
- **JavaScript-Runtime** (Node.js / Bun / Deno)
- **Browser mit DevTools** (Chromium / Firefox / Safari)
- **Git** — verteiltes Versionskontrollsystem (Stand der Industrie)
**OS-Empfehlung:**
@@ -447,7 +453,7 @@ npm install express
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# HTML – Hypertext Markup Language
@@ -736,7 +742,7 @@ Was früher mit JavaScript gelöst wurde, kann HTML heute selbst. JS dafür einz
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# CSS – Cascading Style Sheets
@@ -1123,7 +1129,7 @@ p::first-letter {
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# JavaScript
slides/dhbw/02_css_extended.md
+17 -11
View File
@@ -10,8 +10,8 @@ footer: "Michael Czechowski – SoSe 2026"
<style>
:root {
--color-foreground: #1a1a2e;
--color-highlight: #005f8a;
--color-dimmed: #4a6a7a;
--color-highlight: #d63384;
--color-dimmed: #4a4a6a;
}
section.invert {
--color-foreground: #fff;
@@ -20,24 +20,30 @@ section {
font-size: 1.4rem;
}
h1 {
color: #005f8a;
color: #a02060;
}
section.invert h1 {
color: #fff;
}
h2 {
color: #1f2937;
}
section.invert h2 {
color: #f48fb1;
}
pre {
background: #0f1e2e;
color: #00b4d8;
background: #0f0f23;
color: #d63384;
border-radius: 8px;
border-left: 3px solid #005f8a;
border-left: 3px solid #d63384;
}
pre code {
background: transparent;
color: inherit;
}
code {
background: #1a3a4a;
color: #00b4d8;
background: #1a1a2e;
color: #d63384;
padding: 0.15em 0.4em;
border-radius: 4px;
}
@@ -48,7 +54,7 @@ a {
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Web Engineering
@@ -75,7 +81,7 @@ Aufbauend auf den Grundlagen aus Sitzung 1.
---
<!-- _class: invert -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# CSS: Extended
@@ -193,7 +199,7 @@ gap: 20px 40px;
```css
:root {
--primary-color: #005f8a;
--primary-color: #d63384;
--spacing: 20px;
--radius: 8px;
}
slides/dhbw/03_nodejs_basics.md
+16 -10
View File
@@ -10,8 +10,8 @@ footer: "Michael Czechowski – SoSe 2026"
<style>
:root {
--color-foreground: #1a1a2e;
--color-highlight: #005f8a;
--color-dimmed: #4a6a7a;
--color-highlight: #d63384;
--color-dimmed: #4a4a6a;
}
section.invert {
--color-foreground: #fff;
@@ -20,24 +20,30 @@ section {
font-size: 1.4rem;
}
h1 {
color: #005f8a;
color: #a02060;
}
section.invert h1 {
color: #fff;
}
h2 {
color: #1f2937;
}
section.invert h2 {
color: #f48fb1;
}
pre {
background: #0f1e2e;
color: #00b4d8;
background: #0f0f23;
color: #d63384;
border-radius: 8px;
border-left: 3px solid #005f8a;
border-left: 3px solid #d63384;
}
pre code {
background: transparent;
color: inherit;
}
code {
background: #1a3a4a;
color: #00b4d8;
background: #1a1a2e;
color: #d63384;
padding: 0.15em 0.4em;
border-radius: 4px;
}
@@ -48,7 +54,7 @@ a {
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Web Engineering
@@ -72,7 +78,7 @@ a {
---
<!-- _class: invert -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Node.js – Scripting, Running and Building
slides/dhbw/04_nodejs_advanced.md
+16 -10
View File
@@ -10,8 +10,8 @@ footer: "Michael Czechowski – SoSe 2026"
<style>
:root {
--color-foreground: #1a1a2e;
--color-highlight: #005f8a;
--color-dimmed: #4a6a7a;
--color-highlight: #d63384;
--color-dimmed: #4a4a6a;
}
section.invert {
--color-foreground: #fff;
@@ -20,24 +20,30 @@ section {
font-size: 1.4rem;
}
h1 {
color: #005f8a;
color: #a02060;
}
section.invert h1 {
color: #fff;
}
h2 {
color: #1f2937;
}
section.invert h2 {
color: #f48fb1;
}
pre {
background: #0f1e2e;
color: #00b4d8;
background: #0f0f23;
color: #d63384;
border-radius: 8px;
border-left: 3px solid #005f8a;
border-left: 3px solid #d63384;
}
pre code {
background: transparent;
color: inherit;
}
code {
background: #1a3a4a;
color: #00b4d8;
background: #1a1a2e;
color: #d63384;
padding: 0.15em 0.4em;
border-radius: 4px;
}
@@ -48,7 +54,7 @@ a {
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Web Engineering
@@ -71,7 +77,7 @@ a {
---
<!-- _class: invert -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Node.js – Advanced
slides/dhbw/05_testing.md
+16 -10
View File
@@ -11,8 +11,8 @@ title: Testing
<style>
:root {
--color-foreground: #1a1a2e;
--color-highlight: #005f8a;
--color-dimmed: #4a6a7a;
--color-highlight: #d63384;
--color-dimmed: #4a4a6a;
}
section.invert {
--color-foreground: #fff;
@@ -21,24 +21,30 @@ section {
font-size: 1.4rem;
}
h1 {
color: #005f8a;
color: #a02060;
}
section.invert h1 {
color: #fff;
}
h2 {
color: #1f2937;
}
section.invert h2 {
color: #f48fb1;
}
pre {
background: #0f1e2e;
color: #00b4d8;
background: #0f0f23;
color: #d63384;
border-radius: 8px;
border-left: 3px solid #005f8a;
border-left: 3px solid #d63384;
}
pre code {
background: transparent;
color: inherit;
}
code {
background: #1a3a4a;
color: #00b4d8;
background: #1a1a2e;
color: #d63384;
padding: 0.15em 0.4em;
border-radius: 4px;
}
@@ -49,7 +55,7 @@ a {
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Web Engineering
@@ -60,7 +66,7 @@ a {
---
<!-- _class: invert -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Testing
slides/dhbw/06_typescript.md
+17 -11
View File
@@ -11,8 +11,8 @@ title: TypeScript
<style>
:root {
--color-foreground: #1a1a2e;
--color-highlight: #005f8a;
--color-dimmed: #4a6a7a;
--color-highlight: #d63384;
--color-dimmed: #4a4a6a;
}
section.invert {
--color-foreground: #fff;
@@ -21,24 +21,30 @@ section {
font-size: 1.4rem;
}
h1 {
color: #005f8a;
color: #a02060;
}
section.invert h1 {
color: #fff;
}
h2 {
color: #1f2937;
}
section.invert h2 {
color: #f48fb1;
}
pre {
background: #0f1e2e;
color: #00b4d8;
background: #0f0f23;
color: #d63384;
border-radius: 8px;
border-left: 3px solid #005f8a;
border-left: 3px solid #d63384;
}
pre code {
background: transparent;
color: inherit;
}
code {
background: #1a3a4a;
color: #00b4d8;
background: #1a1a2e;
color: #d63384;
padding: 0.15em 0.4em;
border-radius: 4px;
}
@@ -49,7 +55,7 @@ a {
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Web Engineering
@@ -60,7 +66,7 @@ a {
---
<!-- _class: invert -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# TypeScript
@@ -305,7 +311,7 @@ function verify(result) {
---
<!-- _class: invert -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Decorators
slides/dhbw/07_docker.md
+16 -10
View File
@@ -11,8 +11,8 @@ title: Docker und Service Orchestration
<style>
:root {
--color-foreground: #1a1a2e;
--color-highlight: #005f8a;
--color-dimmed: #4a6a7a;
--color-highlight: #d63384;
--color-dimmed: #4a4a6a;
}
section.invert {
--color-foreground: #fff;
@@ -21,24 +21,30 @@ section {
font-size: 1.4rem;
}
h1 {
color: #005f8a;
color: #a02060;
}
section.invert h1 {
color: #fff;
}
h2 {
color: #1f2937;
}
section.invert h2 {
color: #f48fb1;
}
pre {
background: #0f1e2e;
color: #00b4d8;
background: #0f0f23;
color: #d63384;
border-radius: 8px;
border-left: 3px solid #005f8a;
border-left: 3px solid #d63384;
}
pre code {
background: transparent;
color: inherit;
}
code {
background: #1a3a4a;
color: #00b4d8;
background: #1a1a2e;
color: #d63384;
padding: 0.15em 0.4em;
border-radius: 4px;
}
@@ -49,7 +55,7 @@ a {
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Web Engineering
@@ -60,7 +66,7 @@ a {
---
<!-- _class: invert -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Docker
slides/dhbw/08_best_practices.md
+17 -11
View File
@@ -11,8 +11,8 @@ title: Best Practices
<style>
:root {
--color-foreground: #1a1a2e;
--color-highlight: #005f8a;
--color-dimmed: #4a6a7a;
--color-highlight: #d63384;
--color-dimmed: #4a4a6a;
}
section.invert {
--color-foreground: #fff;
@@ -21,24 +21,30 @@ section {
font-size: 1.4rem;
}
h1 {
color: #005f8a;
color: #a02060;
}
section.invert h1 {
color: #fff;
}
h2 {
color: #1f2937;
}
section.invert h2 {
color: #f48fb1;
}
pre {
background: #0f1e2e;
color: #00b4d8;
background: #0f0f23;
color: #d63384;
border-radius: 8px;
border-left: 3px solid #005f8a;
border-left: 3px solid #d63384;
}
pre code {
background: transparent;
color: inherit;
}
code {
background: #1a3a4a;
color: #00b4d8;
background: #1a1a2e;
color: #d63384;
padding: 0.15em 0.4em;
border-radius: 4px;
}
@@ -49,7 +55,7 @@ a {
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Web Engineering
@@ -60,7 +66,7 @@ a {
---
<!-- _class: invert -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Best Practices
@@ -350,7 +356,7 @@ Don't refactor what isn't working yet.
---
<!-- _class: invert -->
<!-- _backgroundColor: #001520 -->
<!-- _backgroundColor: #000 -->
# Viel Erfolg mit den Projekten!