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