From 86d5889861ff7b107312d0b8f67118b035ea5d75 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 12 Sep 2023 17:26:42 +0200
Subject: [PATCH] Merge branch 'draft'
---
assets/drawio/css-flexbox-axes.drawio | 1
assets/images/css-display-hidden.drawio.svg | 4 ++
index.html | 63 +++++++++++++++++++++++++++++++
assets/drawio/css-display-none.drawio | 1
assets/images/css-flexbox-axes.drawio.svg | 4 ++
assets/images/css-display-none.svg | 3 +
6 files changed, 76 insertions(+), 0 deletions(-)
diff --git a/assets/drawio/css-display-none.drawio b/assets/drawio/css-display-none.drawio
new file mode 100644
index 0000000..be311d3
--- /dev/null
+++ b/assets/drawio/css-display-none.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-09-12T15:21:32.255Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="ogx7Eua_fMsEBvm_t-gY" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVBT4MwFMc/DccZaGGMo8M5Y2I8zGg8NrTSxtJi6Qbz01tGOyDMxB2WJZ54/N+/773+2oAH06JZK1TSJ4kJ94CPGw/eeQCAJATm0Sp7q8AYdkquGO60oBc27JtY0bfqlmFSjYxaSq5ZORYzKQTJ9EhDSsl6bPuQfNy1RDmZCJsM8an6xrCmnboAca8/EJZT1zmYJ12mQM5sd1JRhGU9kODKg6mSUndR0aSEt/Qcl27d/S/Z42CKCP2XBcnrGkj+9Vi+1PHinT2nIP2chV2VHeJbu2E7rN47AkpuBSZtEd+Dy5oyTTYlytpsbQ7daFQX3LwFJpwOZefcEaVJM5DskGsiC6LV3ljsFZn1DOueeDS3GOmAdmR9yB5yfizWczCBRXEGFngCy5ybrsuqRMLEeRtjVpUcmbFv23qCM0GczXQdOq8H1WUtvZ5xlNxEE8pBfIJy6F+I8uLfUU4mmN21vRrk+HzIQl4IMUYVPXgvxzuaXurwBG54Pm7z2n+sD7nBPw+ufgA=</diagram></mxfile>
\ No newline at end of file
diff --git a/assets/drawio/css-flexbox-axes.drawio b/assets/drawio/css-flexbox-axes.drawio
new file mode 100644
index 0000000..fdd2d85
--- /dev/null
+++ b/assets/drawio/css-flexbox-axes.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-09-12T15:20:24.534Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="J4QLDyXM0LIM6Jip084j" version="16.1.2" type="device"><diagram id="qX8B151_wiXKYsOxSvGI" name="Page-1">5Vpdc6IwFP01PtaB8KE8Vu3and3OdMaH3X1MIUpmkTghVOyv3yAJkkCrbbWk3b6UXOCGnHtyz73IwJmuizmFm/iORCgZACsqBs5sAAAIXMD/lZZdZbGB5VaWFcWRsB0MC/yEhNES1hxHKFMuZIQkDG9UY0jSFIVMsUFKyVa9bEkSddYNXKGWYRHCpG39hSMWV9YxGB3stwivYjmz7QfVmTWUF4uVZDGMyLZhcm4GzpQSwqqjdTFFSYmexKW679szZ+sHoyhlp9wwX+xQjtH3aJTfzb2RO0fF4kp4eYRJLhYsHpbtJAKU5GmESifWwJlsY8zQYgPD8uyWB53bYrZO+Mjmh+2HkjMgylDRMImHnCOyRozu+CXirCfwEoxxxXB7QN+1hC1uIi/vgyLiq9rzARR+IHB5BUbAPIx8FSOvjZENOjDyLwWRYx5EdmAYRq55GDnAMIyC4xihNLou8zofhQnMMhyqsKgYogKz3+Xx0BOjP8poVjQunO0ag3tEMV8UotKW8gUKV2NHGhreyuHB3X60a450h8/GLyM5DdHxhMQgXSF2nHEoUiSuzYZGuL2OaEsbRQlk+FEVxi4KiBnuCeYrq8nmjrTEPtZYVK1b3NUUMs2Rp7HWdTRHFTAtR3tG1st+O0ltv8XSW5hvGAzjDLX5ytH/CR94XaTQFCZ4lZYc5tEvKTEpdy3mdce1OLHGUVT6mFCU4Sf4sPdX8mZTrmu/Um8y8GadTHpxc+npoS6exCSDZn3SlTaurKENvLESBFlJvJMkNuj0Kh2Q5TJDlwmqgZWQGxwthcCoY8PWJefZ87MMj0koeZZhImYbWA3pINWI9IeSgfVQC6Wgd5S84yiZUBH1Wg/JrHS0ILLNqogC+0wVUeD3XBGNWiz9FBVRvbvOURJZvh28jxYfUOWMzUu6vnHKdEIX2vfbjP5RkpOZhJL+PsMAlE5oK/57/T5ZvsdGyberyTd4q3y7WgoEHyzfkpMNkv6gKH8yXb6fTRCvlm9r6IwD8D5W1K8sAvWWy6k5MLDR9B2Vy71348DAPlMHyQCdOqHP7B2l3rtxcEL5/NXV/KhKy6xkiEp7XjD0fav+sxVOvfk3iBe9tn6LvrSAtzuWzyHgcj8ZIeCyldffnl9OwJ12D7VMUHEVYcrXjglH/bpcEM8mehA5XkyNX8Yo+YumJCHlHk5JWoZqiZNEM50e564Ur6avM2R5e9SR1f2OfKAXxef7eKHdo3VFISRJvk6/biA817tYIPjw8KFTtXsO34s5N/8A</diagram></mxfile>
\ No newline at end of file
diff --git a/assets/images/css-display-hidden.drawio.svg b/assets/images/css-display-hidden.drawio.svg
new file mode 100644
index 0000000..1c77716
--- /dev/null
+++ b/assets/images/css-display-hidden.drawio.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than diagrams.net -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="581px" height="80px" viewBox="-0.5 -0.5 581 80" content="<mxfile host="Electron" modified="2023-09-12T15:21:39.442Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="Q6J9H9iPqjgcFWq2u57E" version="16.1.2" type="device"><diagram id="BGdbwjortsLvGND2NXud" name="Page-1">3ZVBT4MwFMc/DccZaGGMo8M5Y2I8zGg8NrTSxtJi6Qbz01tGOyDMxB2WJZ54/N+/773+2oAH06JZK1TSJ4kJ94CPGw/eeQCAJATm0Sp7q8AYdkquGO60oBc27JtY0bfqlmFSjYxaSq5ZORYzKQTJ9EhDSsl6bPuQfNy1RDmZCJsM8an6xrCmnboAca8/EJZT1zmYJ12mQM5sd1JRhGU9kODKg6mSUndR0aSEt/Qcl27d/S/Z42CKCP2XBcnrGkj+9Vi+1PHinT2nIP2chV2VHeJbu2E7rN47AkpuBSZtEd+Dy5oyTTYlytpsbQ7daFQX3LwFJpwOZefcEaVJM5DskGsiC6LV3ljsFZn1DOueeDS3GOmAdmR9yB5yfizWczCBRXEGFngCy5ybrsuqRMLEeRtjVpUcmbFv23qCM0GczXQdOq8H1WUtvZ5xlNxEE8pBfIJy6F+I8uLfUU4mmN21vRrk+HzIQl4IMUYVPXgvxzuaXurwBG54Pm7z2n+sD7nBPw+ufgA=</diagram></mxfile>"><defs/><g><rect x="10" y="10" width="560" height="59" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="20" y="19.5" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 40px; margin-left: 21px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="105" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="200" y="19" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 39px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="285" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="200" y="24" width="40" height="30" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-dasharray="3 3" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 39px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: none</span></div></div></div></foreignObject><text x="220" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">displa...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/assets/images/css-display-none.svg b/assets/images/css-display-none.svg
new file mode 100644
index 0000000..81a0e9f
--- /dev/null
+++ b/assets/images/css-display-none.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="581px" height="80px" viewBox="-0.5 -0.5 581 80"><defs/><g><rect x="10" y="10" width="560" height="59" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="20" y="19.5" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 40px; margin-left: 21px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="105" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="200" y="19" width="170" height="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 39px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: inline</span></div></div></div></foreignObject><text x="285" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">display: inline</text></switch></g><rect x="200" y="24" width="40" height="30" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-dasharray="3 3" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 39px; margin-left: 201px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><span>display: hidden</span></div></div></div></foreignObject><text x="220" y="43" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">displa...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/assets/images/css-flexbox-axes.drawio.svg b/assets/images/css-flexbox-axes.drawio.svg
new file mode 100644
index 0000000..b74ae31
--- /dev/null
+++ b/assets/images/css-flexbox-axes.drawio.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than diagrams.net -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="731px" height="281px" viewBox="-0.5 -0.5 731 281" content="<mxfile host="Electron" modified="2023-09-12T15:20:37.883Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="cFJXzUPsi-Snpne0FOM4" version="16.1.2" type="device"><diagram id="qX8B151_wiXKYsOxSvGI" name="Page-1">5Vpdc6IwFP01PtaB8KE8Vu3and3OdMaH3X1MIUpmkTghVOyv3yAJkkCrbbWk3b6UXOCGnHtyz73IwJmuizmFm/iORCgZACsqBs5sAAAIXMD/lZZdZbGB5VaWFcWRsB0MC/yEhNES1hxHKFMuZIQkDG9UY0jSFIVMsUFKyVa9bEkSddYNXKGWYRHCpG39hSMWV9YxGB3stwivYjmz7QfVmTWUF4uVZDGMyLZhcm4GzpQSwqqjdTFFSYmexKW679szZ+sHoyhlp9wwX+xQjtH3aJTfzb2RO0fF4kp4eYRJLhYsHpbtJAKU5GmESifWwJlsY8zQYgPD8uyWB53bYrZO+Mjmh+2HkjMgylDRMImHnCOyRozu+CXirCfwEoxxxXB7QN+1hC1uIi/vgyLiq9rzARR+IHB5BUbAPIx8FSOvjZENOjDyLwWRYx5EdmAYRq55GDnAMIyC4xihNLou8zofhQnMMhyqsKgYogKz3+Xx0BOjP8poVjQunO0ag3tEMV8UotKW8gUKV2NHGhreyuHB3X60a450h8/GLyM5DdHxhMQgXSF2nHEoUiSuzYZGuL2OaEsbRQlk+FEVxi4KiBnuCeYrq8nmjrTEPtZYVK1b3NUUMs2Rp7HWdTRHFTAtR3tG1st+O0ltv8XSW5hvGAzjDLX5ytH/CR94XaTQFCZ4lZYc5tEvKTEpdy3mdce1OLHGUVT6mFCU4Sf4sPdX8mZTrmu/Um8y8GadTHpxc+npoS6exCSDZn3SlTaurKENvLESBFlJvJMkNuj0Kh2Q5TJDlwmqgZWQGxwthcCoY8PWJefZ87MMj0koeZZhImYbWA3pINWI9IeSgfVQC6Wgd5S84yiZUBH1Wg/JrHS0ILLNqogC+0wVUeD3XBGNWiz9FBVRvbvOURJZvh28jxYfUOWMzUu6vnHKdEIX2vfbjP5RkpOZhJL+PsMAlE5oK/57/T5ZvsdGyberyTd4q3y7WgoEHyzfkpMNkv6gKH8yXb6fTRCvlm9r6IwD8D5W1K8sAvWWy6k5MLDR9B2Vy71348DAPlMHyQCdOqHP7B2l3rtxcEL5/NXV/KhKy6xkiEp7XjD0fav+sxVOvfk3iBe9tn6LvrSAtzuWzyHgcj8ZIeCyldffnl9OwJ12D7VMUHEVYcrXjglH/bpcEM8mehA5XkyNX8Yo+YumJCHlHk5JWoZqiZNEM50e564Ur6avM2R5e9SR1f2OfKAXxef7eKHdo3VFISRJvk6/biA817tYIPjw8KFTtXsO34s5N/8A</diagram></mxfile>"><defs/><g><rect x="10" y="50" width="400" height="150" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="20" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="150" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="280" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 80 90 L 343.59 90" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 348.84 90 L 341.84 93.5 L 343.59 90 L 341.84 86.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 91px; margin-left: 211px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Hauptachse</div></div></div></foreignObject><text x="211" y="94" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Hauptachse</text></switch></g><rect x="450" y="50" width="270" height="220" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="460" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="460" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="460" y="200" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 520 90 L 520 223.63" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 520 228.88 L 516.5 221.88 L 520 223.63 L 523.5 221.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 157px; margin-left: 521px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Hauptachse</div></div></div></foreignObject><text x="521" y="160" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Hauptachse</text></switch></g><rect x="20" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="150" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="280" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 80 90 L 80 153.63" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 80 158.88 L 76.5 151.88 L 80 153.63 L 83.5 151.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 121px; margin-left: 81px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Kreuzachse</div></div></div></foreignObject><text x="81" y="124" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Kreuzachse</text></switch></g><rect x="590" y="60" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="590" y="130" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><rect x="590" y="200" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><path d="M 519.66 90 L 643.63 90" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 648.88 90 L 641.88 93.5 L 643.63 90 L 641.88 86.5 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 91px; margin-left: 591px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Kreuzachse</div></div></div></foreignObject><text x="591" y="94" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Kreuzachse</text></switch></g><rect x="130" y="10" width="160" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 25px; margin-left: 131px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">flex-direction: row</div></div></div></foreignObject><text x="210" y="29" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">flex-direction: row</text></switch></g><rect x="505" y="10" width="160" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 158px; height: 1px; padding-top: 25px; margin-left: 506px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">flex-direction: column</div></div></div></foreignObject><text x="585" y="29" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">flex-direction: column</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 5173b86..98cd018 100644
--- a/index.html
+++ b/index.html
@@ -2903,6 +2903,14 @@
</ul>
</section>
<section>
+ <p>none</p>
+ <img data-src="/assets/images/css-display-none.svg">
+ <ul>
+ <li>unsichtbar</li>
+ <li>Platz wird nicht länger beansprucht, so als wenn das Element nicht im DOM wäre</li>
+ </ul>
+ </section>
+ <section>
<h3>Das <code>position</code>-Attribut</h3>
</section>
<section>
@@ -2991,6 +2999,7 @@
</html>
</code>
</pre>
+ <p>Ein Muss für alle responsiven Seiten</p>
</section>
<section>
<pre>
@@ -3001,6 +3010,60 @@
</code>
</pre>
</section>
+ <section>
+ <h3>Einheiten</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers="">
+ div {
+ width: 1px; /* Pixel */
+ width: 1pt; /* Points */
+ width: 1em; /* Breite des "M" in der Schriftgröße des Elements */
+ width: 1rem; /* Breite des "M" in der Schriftgröße des HTML-Elements */
+ width: 1vw; /* Prozent der View Width */
+ width: 1%; /* Prozent des Elternelements */
+
+ width: 5fr; /* Fraction (nur im CSS Grid verfügbar) */
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Größeneinheiten in einer HTML-Datei ausprobieren</p>
+ </section>
+ <section>
+ <h3>CSS Flexbox</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers="">
+ .container {
+ display: flex; /* soll ein flexibler Container sein */
+ display: inline-flex;
+
+ flex-direction: column; /* Kinder spaltenweise anordnen */
+ flex-direction: row; /* Kinder zeilenweise anordnen */
+
+ align-items: center;
+ justify-content: center;
+
+ gap: 20px; /* Abstände zwischen den Achsen */
+ }
+
+ .child {
+ flex-grow: 1; /* Anteiliger Platz, wenn mehr als nötig da ist */
+ flex-shrink: 1; /* Anteiliger Platz, wenn weniger als nötig da ist */
+ flex-basis: 20px; /* Grundlage zur Berechnung der finalen Größe */
+ order: 1; /* Erlaubt die Darstellung in anderer Reihenfolge als durch das HTML vorgegeben */
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <img data-src="/assets/images/css-flexbox-axes.drawio.svg">
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Mit CSS Flexbox rumspielen</p>
+ </section>
</section>
</div>
</div>
--
Gitblit v1.9.3