From 4e80ad2d34f307991562c364b157d1c7a502cd96 Mon Sep 17 00:00:00 2001
From: johannst <johannst@users.noreply.github.com>
Date: Fri, 23 Sep 2022 18:29:01 +0000
Subject: deploy: 29c1b6a06f8d5c546fbd5514731c4ac4c504f6c3

---
 web/src/details.html   | 13 +++++++++++++
 web/src/grid-2col.html | 25 +++++++++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 web/src/details.html
 create mode 100644 web/src/grid-2col.html

(limited to 'web/src')

diff --git a/web/src/details.html b/web/src/details.html
new file mode 100644
index 0000000..8bbec30
--- /dev/null
+++ b/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/web/src/grid-2col.html b/web/src/grid-2col.html
new file mode 100644
index 0000000..e353d54
--- /dev/null
+++ b/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