From 29c1b6a06f8d5c546fbd5514731c4ac4c504f6c3 Mon Sep 17 00:00:00 2001
From: Johannes Stoelp <johannes.stoelp@gmail.com>
Date: Fri, 23 Sep 2022 20:28:41 +0200
Subject: web: added html snippets

---
 src/web/README.md          |  3 +++
 src/web/html.md            | 15 +++++++++++++++
 src/web/src/details.html   | 13 +++++++++++++
 src/web/src/grid-2col.html | 25 +++++++++++++++++++++++++
 4 files changed, 56 insertions(+)
 create mode 100644 src/web/README.md
 create mode 100644 src/web/html.md
 create mode 100644 src/web/src/details.html
 create mode 100644 src/web/src/grid-2col.html

(limited to 'src/web')

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>
-- 
cgit v1.2.3