wdoh-desktop(theme="light") wdoh-container wdoh-window(tabindex=0 title="Web Browser") wdoh-content(class="nopadding nooverflow") iframe(src="https://example.org" style="width:100%;height:100%;" frameborder=0) wdoh-offset wdoh-container wdoh-window(tabindex=0 title="Inherit") wdoh-content h1 Inherit default theme p It's defined in the wdoh-desktop element wdoh-offset wdoh-container(theme="dark") wdoh-window(tabindex=0 title="Dark") wdoh-content h1 Override the default light theme p We prefer night mode! p We overrided it in wdoh-container wdoh-offset wdoh-container wdoh-window( tabindex=0 title="wdoh" style="width: 400px; height: 300px;" ) wdoh-content h1 Welcome p | You can drag windows around and resize them with just pure HTML and CSS, no JS required! p | Browser compatibility is very limited afaik, only tested on lastest stable Chrome and Firefox, it works best in Chrome though. This will not work well on mobile. p | Firefox will not show custom drag handles, also offsets the window title down and also seems to mess with the styling of the window's inner elements. :/ p | It uses z-index ugliness and some crazy pseudo elements. I implemented the dark/light themes to try out CSS variables. h2 Help h3 Controls p | Select a window by clicking on it (or double clicking sometimes, because of the way this is built), if it contains an iframe you can only click on the header or footer." p | Once selected a window will be surrounded with a blue frame and a "move icon" will appear on the top left. Click and drag the icon to move the window. p | Inside the bottom right corner you can click and drag to resize the window h3 Elements h4 wdoh-container p Contain a window and it's offset element h4 wdoh-window p The actual window h4 wdoh-offset p A resizable element which will offset the window h2 About p | This is just a proof of concept, pretty hacky for the most part. Hope you enjoy it! :D If you have any questions about it message me -- <a target="_blank" href="https://reddit.com/u/ahtcx">/u/ahtcx</a> on reddit. wdoh-offset

!