Comicatrix
You must be a member to access this content.
View Membership Levels
It may be possible to simplify this, but I think it does what you asked for. I used inline style to make tweaking it easier, it should probably be converted to style sheet CSS.
div { border: 1px solid black; min-height: 10em; }
2 3
1
4 5
OK, try again with [] instead of > < so it doesn’t get escaped out: [!doctype html] [html] [head] [style type=”text/css”] div { border: 1px solid black; min-height: 10em; } [/style] [/head] [body style=”display: flex; flex-wrap: wrap; “] [div style=”display: flex; flex-wrap: wrap-reverse; flex: 4 80em; flex-direction: row;”] [div style=”justify-content: flex-end; flex: 1 20em; flex-direction: column; “] [div]2[/div] [div]3[/div] [/div] [div style=”justify-content: centre; flex:3 60em;” ]1[/div] [/div] [div style=”justify-content: flex-end; flex-direction: column; flex: 1 20em”] [div]4[/div] [div]5[/div] [/div] [/body] [/html]
I saw the post at https://mastodon.art/@JenJen/116363258852584096 and realized the above doesn’t do what you asked. The closest I could get is: [!doctype html] [html] [head] [style type=”text/css”] div { border: 1px solid black; min-height: 10em; box-sizing: border-box; align-items: stretch; } [/style] [/head] [body style=”display: flex; flex-wrap: wrap;”] [div style=”display: flex; flex-wrap: wrap-reverse; flex: 5 50em; flex-direction: row;”] [div style=”display: flex; flex-wrap: wrap; flex: 2 0 20em; flex-direction: row; “] [div style=”flex:0.5 0 20em;”]2[/div][div style=”flex:0.5 0 20em;”]3[/div] [/div] [div style=”flex: 2 3 30em;” ]1[/div] [/div] [div style=”display:flex; flex-wrap: wrap; flex: 2 20em; flex-direction: row;”] [div style=”flex: 0.5 0 20em;”]4[/div][div style=”flex: 0.5 0 20em;”]5[/div] [/div] [/body] [/html]
![Owncast VOD [2026-04-07]](https://www.jenniegyllblad.co.uk/wp/wp-content/uploads/2026/04/vod-1-1024x566.png)
Comments
3 responses to “Owncast VOD [2026-04-07]”
It may be possible to simplify this, but I think it does what you asked for. I used inline style to make tweaking it easier, it should probably be converted to style sheet CSS.
div { border: 1px solid black; min-height: 10em; }
2
3
1
4
5
OK, try again with [] instead of > < so it doesn’t get escaped out:
[!doctype html]
[html]
[head]
[style type=”text/css”]
div { border: 1px solid black; min-height: 10em; }
[/style]
[/head]
[body style=”display: flex; flex-wrap: wrap; “]
[div style=”display: flex; flex-wrap: wrap-reverse; flex: 4 80em; flex-direction: row;”]
[div style=”justify-content: flex-end; flex: 1 20em; flex-direction: column; “]
[div]2[/div]
[div]3[/div]
[/div]
[div style=”justify-content: centre; flex:3 60em;” ]1[/div]
[/div]
[div style=”justify-content: flex-end; flex-direction: column; flex: 1 20em”]
[div]4[/div]
[div]5[/div]
[/div]
[/body]
[/html]
I saw the post at https://mastodon.art/@JenJen/116363258852584096 and realized the above doesn’t do what you asked. The closest I could get is:
[!doctype html]
[html]
[head]
[style type=”text/css”]
div {
border: 1px solid black;
min-height: 10em;
box-sizing: border-box;
align-items: stretch;
}
[/style]
[/head]
[body style=”display: flex; flex-wrap: wrap;”]
[div style=”display: flex; flex-wrap: wrap-reverse; flex: 5 50em; flex-direction: row;”]
[div style=”display: flex; flex-wrap: wrap; flex: 2 0 20em; flex-direction: row; “]
[div style=”flex:0.5 0 20em;”]2[/div][div style=”flex:0.5 0 20em;”]3[/div]
[/div]
[div style=”flex: 2 3 30em;” ]1[/div]
[/div]
[div style=”display:flex; flex-wrap: wrap; flex: 2 20em; flex-direction: row;”]
[div style=”flex: 0.5 0 20em;”]4[/div][div style=”flex: 0.5 0 20em;”]5[/div]
[/div]
[/body]
[/html]