web: added html snippets

4 files changed, 56 insertions, 0 deletions

diff --git a/src/web/README.md b/src/web/README.md
new file mode 100644
index 0000000..f208afb
--- /dev/null
+++ b/src/web/README.md
@@ -0,0 +1,3 @@
+# Web
+
+- [html](./html.md)
diff --git a/src/web/html.md b/src/web/html.md
new file mode 100644
index 0000000..7561cf4
--- /dev/null
+++ b/src/web/html.md
@@ -0,0 +1,15 @@
+# html
+
+## Collapsible element
+[Rendered html](src/details.html)
+```html
+{{#include src/details.html:10: }}
+```
+> With the `open` attribute `<details open>` the details are unfolded by default.
+
+# Minimal 2 column layout
+[Rendered html](src/grid-2col.html)
+```html
+{{#include src/grid-2col.html }}
+```
+
diff --git a/src/web/src/details.html b/src/web/src/details.html
new file mode 100644
index 0000000..8bbec30
--- /dev/null
+++ b/src/web/src/details.html
@@ -0,0 +1,13 @@
+<style>
+/* example: style based on attribute */
+details > summary {
+  color: red;
+}
+details[open] > summary {
+  color: green;
+}
+</style>
+<details>
+  <summary>Some text goes here</summary>
+  ... some more text goes here.
+</details>
diff --git a/src/web/src/grid-2col.html b/src/web/src/grid-2col.html
new file mode 100644
index 0000000..e353d54
--- /dev/null
+++ b/src/web/src/grid-2col.html
@@ -0,0 +1,25 @@
+<style>
+.grid-2col {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 1em
+}
+.col1 {
+  grid-column-start: 1;
+  background-color: red;
+  padding-left: 1em;
+}
+.col2 {
+  grid-column-start: 2;
+  background-color: green;
+  padding-left: 1em;
+}
+</style>
+<div class="grid-2col">
+  <div class="col1">
+    <p>Some text in the first column.</p>
+  </div>
+  <div class="col2">
+    <p>Some text in the second column.</p>
+  </div>
+</div>