diff options
| author | Johannes Stoelp <johannes.stoelp@gmail.com> | 2022-09-23 20:28:41 +0200 |
|---|---|---|
| committer | Johannes Stoelp <johannes.stoelp@gmail.com> | 2022-09-23 20:28:41 +0200 |
| commit | 29c1b6a06f8d5c546fbd5514731c4ac4c504f6c3 (patch) | |
| tree | b606a4867775ed0b245f871b7faecf6d74f5dfa4 | |
| parent | 34902049cf496f5b13bad10396248ec8d8780aeb (diff) | |
| download | notes-29c1b6a06f8d5c546fbd5514731c4ac4c504f6c3.tar.gz notes-29c1b6a06f8d5c546fbd5514731c4ac4c504f6c3.zip | |
web: added html snippets
| -rw-r--r-- | src/SUMMARY.md | 3 | ||||
| -rw-r--r-- | src/web/README.md | 3 | ||||
| -rw-r--r-- | src/web/html.md | 15 | ||||
| -rw-r--r-- | src/web/src/details.html | 13 | ||||
| -rw-r--r-- | src/web/src/grid-2col.html | 25 |
5 files changed, 59 insertions, 0 deletions
diff --git a/src/SUMMARY.md b/src/SUMMARY.md index fbe2102..8188df2 100644 --- a/src/SUMMARY.md +++ b/src/SUMMARY.md @@ -60,6 +60,9 @@ - [Network](./network/README.md) - [tcpdump](./network/tcpdump.md) +- [Web](./web/README.md) + - [html](./web/html.md) + - [Arch](./arch/README.md) - [x86_64](./arch/x86_64.md) - [arm64](./arch/arm64.md) 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> |