the miscellany!

Windows are elements that contain content, enclosed inside a 'window'.

Each Window contains "xpwindowbar-left/middle/right" img elements for the window bar, a "window-title" div, and a "window-buttons" div that contains img elements.

There are currently 3 different types of Windows being used in "the ariral blog!", with different styles for the above-mentioned elements, edited for their purpose.

This ID is applied to the Window where all page content is stored. It contains special elements designed for its purpose, though they may be omitted in some pages.

Aside from containing standard Window decorations, it also contains a "welcometo" h4 element, and a "headerofgreatinterest" h1 element.

The "headerofgreatinterest" is contained inside a u element, to ensure the underline is immune from the effects of the ID.

The "headerofgreatinterest" uses an animated background gradient on transparent text, where the background is clipped to the shape of the text, giving an illusion of rainbow text.

This ID is applied to Windows that freely move across the screen, anchored to the "main-content" Window

"veryindependentdiv" Windows should be inside a "main-content" Window, since putting it anywhere else destroys the layout, for reasons I prefer not to think about.

There is only one limitation to using this as a free-moving Window, it leaves behind a gap in the layout of the "main-content" Window where it should have been. Will try and fix this.

Also, percentages are calculated in reference to the entire "main-content" Window, so beware of using top and bottom percentages on a long scroll page!

This ID is applied to Windows that are anchored to the margins of the page. This is currently being used for the options Window, although other windows for webrings and other interactives are planned.

Currently these Windows can only exist in the upper-left margins, they are positioned relative to the entire page, and cannot be aligned on a single column.

Future versions will include a margin box that helps align and stack these Windows loosely.

Table data IDs should be applied directly on the td elements.

td elements that use double-column layouts should contain a div, which will be the enclosing flexbox for both the icon, and the text.

The div should contain either an img and p element, or an img element with text.

However, IDs that don't use p elements for their content text leave any inline elements exposed to the effects of the enclosing flexbox div.

There are exceptions to this convention (those that don't rely on double-column layouts), and they will be noted accordingly.

These IDs are used for the Status Update tables. The table that contains them has the ID "status-updates".

The "status-header" ID uses the child div element as a flexbox, to align the img icon with the header text. It also defines the width of that column.

The "status-data" ID uses no img icon element, but instead offers a p element for content text. This allows multi-line content with inline elements, for a more formatted answer.

These IDs are used for the About Me tables. The table that contains them has the ID "stuff-about-me".

The "question" ID follows the exact mechanics as "status-header", with only different width percentages.

The "answer" ID is also similar to "status-header", as it contains an img and text enclosed in a div flexbox. Designed for one-line answers.

This is the ID for the entire table in the Gallery of Interesting Things.

There are no IDs used for individual td elements here, since there are no columns used, unlike the Status Updates and About Me pages.

Instead, all td elements contain a media element, and text captioning that media. There are also no flexboxes used, relying on standard HTML arrangement.

video, img, and elements with the "yt-embed" ID are kept at a 16:9 aspect ratio. img elements with a "square" id are kept at a square aspect ratio. audio elements' aspect ratios are not defined.

Each media element has their width forced from 60% to 90%, depending on their type.