Windows that can be resized and moved without javascript.
A wrapping 📐 is a grid with 3-by-3 areas.
The top-left quadrant is a resizable ⚓.
The fourth quadrant is a resizable 🪟.
In both axis, the grid sets the first half
as 1fr vs. the
second half as auto.
The ⚓ emulates moving the 🪟: its size
represents the 🪟 position.
It is invisible except for its resize handle.
The 🪟 and ⚓ resize handles
are decorated in the
::after pseudo.
Both bottom-right absolute position.
As a result, the "moving handle",
which is the ⚓ resize handle,
appear top-left of 🪟. The close button is
styled to match known defaults.
The rest of the styling is to provide a familiar visual footprint to the 🪟, regarding the title-bar, etc.
For Safari compatbility,
-webkit-*
is specified for
user-select and
backdrop-filter.