This is a meta-component made by Пользователь 'EstrellaYoshte' не существует to be used as an assistive layer for theme-making.
To use, put the following:
[[include component:sigma-plus]]
Sigma+, by itself, preserves most of the original aesthetics while using more modern CSS conventions and properties, including:
- Extensible CSS variables
- Grid and flex-based layout
- Fully tab-able navigation
- RTL direction compliance
Developer's Note
The principal idea of the component is to alleviate the burden of resolving the site theme's outdated base layout, which tends to either limit the amount of customization implemented, massively increase CSS complexity/overhead to implement the desired layout, further worsens the situation with more unoptimized CSS, or some unholy combination of the three.
Sigma+ limits itself to re-implementing semantic and visual flow for the most part to maintain the highest possible passthrough as a compatibility layer, with a few exceptions:
- Header decoration: Originally a background-image on
#container-wrap
, which both semantically divorce it from the actual#header
and#top-bar
, and makes it unresponsive to change in size and layout (from end-user settings, browser defaults, screen size, etc.) Remade intobackground-image
for both divs. - Top Bar dropdowns: modified to be better responsive to screen sizes, as well as overriding generally annoying styles from Wikidot's default. Made tab-navigable.
- Rate & Info module: significantly restyled for better semantic separation and easier to modify with variables. Undid Info module's idiosyncratic CSS.
- Tabs: Replaced the spritesheet used to style the tabs with CSS variables. Slightly less annoying to deal with.
Example
:root {
--header-title: "We don't have a 55";
--sp_header-height: 21.75rem;
}