This is a basic responsive front page design that adapts to the available width of the browser by rearranging UP TO nine sections as follows:
Narrow Medium Wide
|A| |A| |D| | A | |D|
|B| |B| |E| |B| |C| | |
|C| |C| |G| | E | | |
|D| |F| |H| | F | |I|
|E| | | |I| |G| |H| | |
- Most sections can be left blank, but it is highly recommended that at least A and D have content.
- Sections B and C are intended mostly for boxes with links and will automatically switch from one column in medium view to two columns in wide view. Thus, B and C should either BOTH be blank or BOTH have content. Otherwise, things will look odd in the wide display. If there isn't enough for two columns, using section A or F for the content is recommended instead.
- Section E is a special "side-switcher" to help balance the main page between medium and wide views. In wide view, it goes left, which may be shorter due to B and C becoming two columns. In medium view, it goes right, which may be shorter due to B and C being only one column. A weakness of section E is that it needs content that adapts well to both wide and narrow columns.
- Sections G and H are also "side-switchers", but also function like B and C in that they line up in a single column to the right in medium view, and in two columns to the left in wide view. They should also either only be BOTH blank or BOTH have content; otherwise, consider using section E.
Much of the layout and appearance is determined through styles defined in these pages:
- MediaWiki:Hydradark.css (for the desktop view)
- MediaWiki:Mobile.css (for the mobile view)