Skin:Citizen

Citizen is a minimalistic responsive skin for MediaWiki built by the Star Citizen Wiki team. Although it is specifically built for the Star Citizen Wiki, the skin is configured to be flexible and able to run on any MediaWiki installation that is 1.35 or higher.

If you find an issue or there is some improvements that you would like to work on, please feel free to submit patches or report issues over at Github. Alternatively you can also use the discussion page for any help regarding the skin.

Notable features[edit]

Fully responsive skin: Responsive and able to adapt to different screen sizes.
Collapsible sections: Collapse and expand article sections Require JS.
Persistent ToC: Access ToC anywhere in the article. Tracking require JS.
Rich search suggestions: More helpful search suggestions with images and descriptions. Require JS.
Lazyload images: Improve load time of your wiki and avoid unnecessary image downloads. Require JS.
Light/dark mode support: Switch between light and dark mode.
Webapp manifest: Give a more app-like experience when user add your wiki to their home screen.
HTTP security response headers: Enhance the security of your wiki from HTTP response headers.

Screenshots[edit]

375x667 in light mode
375x667 in dark mode
768x1024 in light mode
768x1024 in dark mode
1024x768 in light mode
1024x768 in dark mode
1200x800 in light mode
1200x800 in dark mode
1920x1080 in light mode
1920x1080 in dark mode
Rich search suggestions
Overlay menu
Gallery styles

Installation[edit]

Download and place the file(s) in a directory called Citizen in your skins/ folder.
Add the following code at the bottom of your LocalSettings.php:

wfLoadSkin( 'Citizen' );

Configure as required.
Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

Configuration[edit]

The skin works out of the box without any configurations. The config flags allow more customization on the specific features in the skin.

Note that:

By default all security-related features are turned off to ensure maximum compatibility.
If you have a lot of users that does not use javascript, it is recommended to turn off image lazyload as it requires javascript to display images properly.

Appearance[edit]

Name	Description	Values	Default
`$wgCitizenThemeDefault`	The default theme of the skin	`auto` - switch between light and dark according to OS/browser settings; `light`; `dark`	`auto`
`$wgCitizenEnableCollapsibleSections`	Enables or disable collapsible sections on content pages	`true` - enable; `false` - disable	`true`
`$wgCitizenShowPageTools`	The condition of page tools visibility	`true` - always visible; `login` - visible to logged-in users; `permission` - visible to users with the right permissions	`true`
`$wgCitizenEnableDrawerSiteStats`	Enables the site statistics in drawer menu	`true` - enable; `false` - disable	`true`
`$wgCitizenEnableDrawerSubSearch`	Enables the drawer search box for menu entries	`true` - enable; `false` - disable	`false`
`$wgCitizenPortalAttach`	Label of the portal to attach links to upload and special pages to	string	`first`
`$wgCitizenThemeColor`	The color defined in the `theme-color` meta tag	Hex color code	`#131a21`

Search suggestions[edit]

Name	Description	Values	Default
`$wgCitizenEnableSearch`	Enable or disable rich search suggestions	`true` - enable; `false` - disable	`true`
`$wgCitizenSearchUseREST`	Enable or disable the use of REST API search endpoint	`true` - enable; `false` - disable	`false`
`$wgCitizenSearchDescriptionSource`	Source of description text on search suggestions	`wikidata` - Use description provided by WikibaseLib or ShortDescription; `textextracts` - Use description provided by TextExtracts; `pagedescription` - Use description provided by Description2 or any other extension that sets the `description` page property	`textextracts`
`$wgCitizenMaxSearchResults`	Max number of search suggestions	Integer > 0	`6`

Image lazyload[edit]

Name	Description	Values	Default
`$wgCitizenEnableLazyload`	Enable or disable image lazyloading	`true` - enable; `false` - disable	`false`

Webapp manifest[edit]

Name	Description	Values	Default
`$wgCitizenEnableManifest`	Enable or disable web app manifest	`true` - enable; `false` - disable	`true`
`$wgCitizenManifestThemeColor`	Theme color of the web app manifest	Hex color code	`#131a21`
`$wgCitizenManifestBackgroundColor`	Background color of the web app manifest	Hex color code	`#131a21`

Security-related[edit]

Content Security Policy (CSP)[edit]

Name	Description	Values	Default
`$wgCitizenEnableCSP`	Enable or disable Content Security Policy, as an alternative to `$wgCSPHeader` in MediaWiki 1.32+	`true` - enable; `false` - disable	`false`
`$wgCitizenEnableCSPReportMode`	Enable or disable CSP report only mode, overrides `$wgCitizenEnableCSP`	`true` - enable; `false` - disable	`false`
`$wgCitizenCSPDirective`	The string of your CSP directive	See the Content Security Policy page

HTTP Strict Transport Security (HSTS)[edit]

Name	Description	Values	Default
`$wgCitizenEnableHSTS`	Enable or disable HTTP Strict Transport Security	`true` - enable; `false` - disable	`false`
`$wgCitizenHSTSMaxAge`	Time in second that the browser should remember that a site is only to be accessed using HTTPS	Integer > 0	`300`
`$wgCitizenHSTSIncludeSubdomains`	Apply HSTS to all of the site's subdomains	`true` - enable; `false` - disable	`false`
`$wgCitizenHSTSPreload`	Enable or disable HSTS preload	`true` - enable; `false` - disable	`false`

Other security headers[edit]

Name	Description	Values	Default
`$wgCitizenEnableDenyXFrameOptions`	Enable or disable the deny X-Frame-Options header	`true` - enable; `false` - disable	`false`
`$wgCitizenEnableXXSSProtection`	Enable or disable the X-XSS-Protection header	`true` - enable; `false` - disable	`false`
`$wgCitizenEnableStrictReferrerPolicy`	Enable or disable `strict-origin-when-cross-origin` referrer policy header, should be used in conjunction with `$wgReferrerPolicy` as that only outputs the meta tags	`true` - enable; `false` - disable	`false`
`$wgCitizenEnableFeaturePolicy`	Enable or disable Feature Policy	`true` - enable; `false` - disable	`false`
`$wgCitizenFeaturePolicyDirective`	The string of your Feature Policy directive	See the Feature Policy page

Miscellaneous[edit]

Name	Description	Values	Default
`$wgCitizenEnablePreconnect`	Enable or disable preconnect to required origin	`true` - enable; `false` - disable	`false`
`$wgCitizenPreconnectURL`	The URL for preconnect to required origin	URL