Skin:Timeless



Timeless strongly supports responsive web design and is optimized for a multitude of screen widths ranging from narrow mobile phone screens up to wide monitors.

The skin is based on 1>Special:MyLanguage/Winter|Winter and an attempt to incorporate suggestions on 2>w:Wikipedia:Village pump (proposals)/Archive 125#New skin for Wikipedia|this 2015 Village pump discussion into a skin.

Features
Unlike the minimalistic skin , which is the default skin for mobile phones, Timeless incorporates the functionality of a desktop-focused theme such as , the default desktop skin, onto all screen sizes.

In addition, Timeless offers a distinct convenient shortcut to the user contribution list in the top bar, next to the “” and “” buttons.

The general aim is to make a fully featured skin that emphasizes both content and editing tools, with multiple view modes for showing everything, focusing only on content (winter), or switching to dark/night viewing. One day it will actually do this.

Unlike MobileFrontend/Minerva, Timeless does not forcibly restyle tables for mobile resolutions, and instead expects and encourages users to make tables and templates responsive themselves, optimized to their particular usage.

With , users are able to manually enable a dark background for reducing eye strain and power saving on AMOLED displays. Instructions are available on that page.

The future goal is to create a fully featured skin that:


 * 1) emphasizes both content and editing tools,
 * 2) with multiple view modes for showing everything, focusing only on content (winter), or
 * 3) switching to dark/night viewing.

Responsive website design details
This section is based on the default configuration.

≥1340 pixels
Above a simulated screen width of 1340 pixels, the site is visible in three columns. Some site navigation sections are on the left side of the content area (e.g. "", "") while some are on the right side ("", "", "", "", "") are on the right side.

Starting at a simulated browser viewport width of around 1900 pixels, the width of the center column with the content is fixed to 1261 pixels, while on the earlier skins ' and <tvar|2>'</>, it is able to extend indefinitely with screen width.

An indefinite content width can be achieved with this skin using 1>#Indefinite content width</>|this CSS code snippet.

With 1>#One-sided navigation menu</>|this CSS code, users can optionally display the navigation sections from the third (right-side) column in the first (left-side) column, like already done at 2>#1339 to 1100 pixels</>|1339 to 1100 pixels of browser width.

1339 to 1100 pixels
The site is visible in two columns. The site navigation sections on the right side of the content area move to the left side below the existing sections.

Less than 1100 pixels
The site is visible on one column. The content area fills the entire screen space. Categories appear at to the bottom of the page, where they are on <tvar|1></> and <tvar|2></>.

The site navigation sections are collapsed into a top navigation bar with text labels, and currently shown and hidden using JavaScript, rather than pure CSS, as implemented in the <tvar|1></> using <tvar|2> </>.

Less than 851 pixels
Below 851 pixels, the responsive design of Timeless adapts to mobile phone screens.

The text labels on the navigation elements above the content area (e.g. "", "", "", ", "") are not shown to save horizontal space; only the icons are shown instead of both.

The site navigation sections are collapsed into a top navigation bar with icon labels.

CSS snippets
These code snippets can be used to customize the skin's appearance, by pasting them into <tvar|1>MediaWiki:Timeless.css</> as a MediaWiki administrator, into one's own 2>Special:MyLanguage/Manual:CSS</>|user space CSS as a regular user, or into a user skin browser extension as a visitor.

Indefinite content width
Regarding 1>Talk:Reading/Web/Desktop Improvements</>|criticism of limited content widths, using this CSS code snippet, the width of the center (content) column and the blue middle line of the colour bar above it extends indefinitely with screen width.

One-sided navigation menu
Using this code snippet, the elements of the right-side navigation menu (<tvar|1> </>) will continue to be displayed in the left column (under <tvar|2> </>) like they do on 3>#1339 to 1100 pixels</>|1100 to 1330 pixels of browser width even 4>#≥1340 pixels</>|beyond 1340 pixels of browser width, for users who prefer a one-sided navigation menu as known from the skins <tvar|5>'</> and <tvar|6>'</>.

The code also works in combintion with the limitless content width code from above.

Modernized fonts in top bar
The following CSS code adds a set of modern font types (including fallback fonts) to the currently unformatted fonts of the user name and top-bar navigation menus 1>#Less than 1100 pixels</>|displayed between 852 and 1100 pixels of browser width.

Highlight section title upon navigation
This CSS code snippet highlights the last section header upon navigation to facilitate returning to it when scrolling through a long document.

Configuration
The following are only supported in MediaWiki 1.34+


 * (string, default 'cat.svg')
 * Set it as you would <tvar|1> </> to an appropriate background image. Recommendation is an svg set to 500-750px wide: svg for HiDPI support; the size can really be whatever, but where that will result in a similar behind-content look as with the default cat.
 * For a background to potentially also work unmodified with other background-colour themes if and when they are later implemented, a transparent single-colour image is recommended, with 20-50% opacity black/white, where the alpha values of the b/w parts are likewise around 10-50/255, as this should allow it to work on most anything that isn't pure white/black.
 * Examples (which actually don't follow the above recommendation and thus probably won't work on dark backgrounds): <tvar|1>Timeless backdrop (wiktionary).svg</> and <tvar|2>Timeless backdrop (metawiki).svg</>


 * (null|string|array, default null)
 * Special logo rendering, allowing for custom logos for Timeless specifically (such as a square logo version without the wordmark in order to avoid duplication with the header). Also provides slightly better HiDPI support than using <tvar|1>$wgLogoHD</>, as that only works for 135x135px logos, and scales all high-res logos down to this size.
 * Can be used to point Timeless at a File uploaded onwiki (remember to protect the file if using this) simply by providing the file name, or you can specify the logo path details manually using an array.
 * To reuse a <tvar|1>$wgLogo</> and <tvar|2>$wgLogoHD</> already set for a nominally 160x160px logo, but where the HD versions also come out the right size:
 * To use <tvar|1>File:Cows.svg</> uploaded onwiki:
 * Note that uploaded logos work best as svgs or as 2x- or higher-sized rasters, and will be scaled down for each target resolution. Obviously this approach requires file uploads and thumbnailing to be enabled.
 * Recommended nominal sizes probably around 135px to 165px.
 * Note that uploaded logos work best as svgs or as 2x- or higher-sized rasters, and will be scaled down for each target resolution. Obviously this approach requires file uploads and thumbnailing to be enabled.
 * Recommended nominal sizes probably around 135px to 165px.


 * (null|string|array, default null)
 * To use an image instead of the default Linux Libertine serif text for the header banner wordmark. Same usage approach as $wgTimelessLogo.
 * So the English Wikipedia might use <tvar|1>Wikipedia wordmark.svg</>, like so:
 * Or specify an array of each resolution version, plus the dimensions, per above (more likely with them, frankly).
 * If not using an uploaded file onwiki, specifying the dimensions is required.
 * Recommended nominal size up to 200px wide by 38px tall.
 * Recommended nominal size up to 200px wide by 38px tall.

Note that Timeless supports wordmark and HiDPI logos set in <tvar|1></>, so just using that is recommended if you have no particular reason not to. In particular the site title rendering may or may not require a wordmark image to render correctly, as the styles for the text title are basically just guesses that will not always work. Other options to make the wordmark render correctly include:


 * Setting some custom css in the wiki's <tvar|1> </>, such as no-wrap or a different font-size value
 * Setting a different display string via changing the contents of the <tvar|1> </> message