MediaWiki skin
(→Cards) |
|||
Line 45: | Line 45: | ||
=== Cards === | === Cards === | ||
Cards are layout components that have an image, title, and some body text. Their entire area is a clickable link. The name comes from Bootstrap's version of this idea, from which we're borrowing. | |||
Cards can be of three different sizes: two-thirds, one-half, one-third, and one-quarter of the screen width. On small screens this is reduced to either full width (for anything larger than one-quarter) or two cards side-by-side (for one-quarter cards). | |||
The images in cards are always the same height, so that the card titles always line up horizontally. This means that images will be cropped if their aspect ratio is not correct. | |||
== Tables == | == Tables == |
Revision as of 04:06, 18 May 2021
This page documents and demonstrates the WMAU skin for MediaWiki. This skin is being developed in 2021 to help make Wikimedia Australia's website more focused on readers than editors, and to make it easier to find out who we are and what we do.
- Demonstration: https://wikimedia.org.au/w/index.php?title=MediaWiki_skin&useskin=wmau
- Homepage: https://www.mediawiki.org/wiki/Skin:WMAU
- Source code: https://github.com/Wikimedia-AU/MediaWiki-skin
- Issues list: https://github.com/Wikimedia-AU/MediaWiki-skin/issues
- Documentation:
The rest of this page demonstrates various features of the skin. If you don't have the skin enabled, you can preview this page using the skin, by appending ?useskin=wmau
to the URL.
Typography
The usual bold and italics are handled, as well as inline code
.
Links are in three colours: blue for internal links that exist, red for non-existing pages, and green for external links.
- Unordered
- lists
- look like this,
and
- ordered ones
- look
- like this.
Images
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id.
Sed non dignissim orci. Vivamus diam enim, commodo id consectetur ut, gravida quis erat. Vivamus molestie lobortis mattis. Quisque pretium, enim in tincidunt posuere, ligula odio vestibulum dolor, in tristique quam nulla eget nulla. Nam id dolor ac ligula aliquet varius.
Banners
Pages can have banner images, similar to those on Wikivoyage. For example, the banner at the top of this page is produced by adding the following wikitext:
{{PAGEBANNER:Hackathon Banner above Hacking Area.jpg}}
See mw:Extension:WikidataPageBanner#Usage for full details.
Cards
Cards are layout components that have an image, title, and some body text. Their entire area is a clickable link. The name comes from Bootstrap's version of this idea, from which we're borrowing.
Cards can be of three different sizes: two-thirds, one-half, one-third, and one-quarter of the screen width. On small screens this is reduced to either full width (for anything larger than one-quarter) or two cards side-by-side (for one-quarter cards).
The images in cards are always the same height, so that the card titles always line up horizontally. This means that images will be cropped if their aspect ratio is not correct.
Tables
Header A | Header B | Header C | Header D | Header E |
---|---|---|---|---|
Data A1 | Data B1 | Data C1 | Data D1 | Data E1 |
Data A2 | Data B2 | Data C2 | Data D2 | Data E2 |
Some tables can get very wide, so we let them extend into the margins on wide screens (and scroll on narrow ones):
Header 1 | Header 2 | Header 3 | Header 4 |
---|---|---|---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula nunc non venenatis egestas. Vestibulum finibus erat id orci egestas tincidunt non et urna. Cras eget rhoncus lectus. Maecenas pharetra est quam, egestas pretium leo aliquam id. |