스킨:타임리스

이 스킨은 미디어위키 1.31 이상에서 포함됩니다. 따라서 다시 다운로드하지 않아도 됩니다. 하지만 여전히 제공되는 별개의 지침을 따라야 합니다.

미디어위키 스킨 설명서 - 분류

Timeless 출시 상태: 안정
만든 이	Isarra
호환성 정책	스냅샷은 미디어위키와 함께 릴리스됩니다. Master is not backwards compatible.
미디어위키	1.31+
라이선스	GNU General Public License 2.0 or later
다운로드	스킨 다운로드 Git [?]: Git 마스터 다운로드 저장소 탐색 (Phabricator · GitHub) 커밋 기록 저장소 기여자 (깃허브) 코드 리뷰
예시	mediawiki.org This article
변수 $wgTimelessBackdropImage
Quarterly downloads	153 (Ranked 3rd)
Public wikis using	2,938 (Ranked 13th)
Public wikis using as default skin	165
$2 스킨 번역 (translatewiki.net에서 가능한 경우)
Vagrant role	timeless
이슈 :	미해결 작업 · 버그 보고

English Wikipedia homepage in the Timeless skin viewed on a mobile phone

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.

Winter기반의 스킨이며, 스킨에 this 215 Village pump discussion에서 제안된 모든 실용적인 것들을 통합하려는 시도입니다.

설치

• Vagrant 를 사용하고 있는 경우에는, vagrant roles enable timeless -p로 설치해주세요

수동 설치

• 파일을 다운로드하고 Timeless 폴더를 skins/ 디렉토리에 넣어 주세요.
• 아래의 코드를 LocalSettings.php 파일의 말미에 추가합니다:

  wfLoadSkin( 'Timeless' );
  

• 필요에 따라 구성
•  완료 - 위키의 Special:Version에 이동해서, 스킨이 올바르게 설치된 것을 확인합니다.

Features

Unlike the minimalistic skin Minerva , 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.

일반적 목표는 오직 내용에 초점을 맞추고(winter), 또는 어둡게/밝게 보여주는 것으로 전환하는, 모든 것을 보여주기 위한 다중 보기 모드에서, 내용 및 편집 도구 모두가 강화된 완전한 기능을 가진 스킨을 만드는 것입니다. 언젠가 실현될 것입니다.

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 Skin:Timeless-DarkCSS , 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 ("더 보기", "인쇄/내보내기", "다른 프로젝트", "다른 언어", "분류").

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 모노북 , it is able to extend indefinitely with screen width.

An indefinite content width can be achieved with this skin using this CSS code snippet.

With 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 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 벡터 and Monobook .

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 Skin:MinervaNeue using :checked.

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 MediaWiki:Timeless.css as a MediaWiki administrator, into one's own user space CSS as a regular user, or into a user skin browser extension as a visitor.

Indefinite content width

Regarding 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.

/* Indefinite content width */
@media screen and (min-width: 851px) {
    .color-middle-container,
    .ts-inner { max-width: none; }
}

One-sided navigation menu

Using this code snippet, the elements of the right-side navigation menu (#mw-related-navigation) will continue to be displayed in the left column (under #mw-site-navigation) like they do on 1100 to 1330 pixels of browser width even beyond 1340 pixels of browser width, for users who prefer a one-sided navigation menu as known from the skins 벡터 and 모노북 .

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

/* One-sided navigation menu */
@media (min-width: 1340px) {
  #mw-content-block {
    display: block;
  }
  #mw-content,
  #content-bottom-stuff {
    margin-left: 14em;
  }
  #mw-content-wrapper {
    float: right;
    margin-left: -14em;
    width: 100%;
  }
  #mw-related-navigation {
    width: 14em;
    padding: 0 1em 0 0;
  }
  div.color-middle {
    margin-right: 0;
  }
  .mw-wiki-logo {
  	display: inline-block;
  }
}

/* Align top colour bar with page columns */
.ts-inner {
  padding: 0 0 0 1em;
}

/* Re-aligning bottom logos */
#footer { padding-right: 1em; }

Modernized fonts in top bar

The following CSS code adds a set of modern sans serif font types (including fallback fonts) to the currently serif fonts (Linux Libertine, Times New Roman, etc.) of the user name and top-bar navigation menus displayed between 852 and 1100 pixels of browser width.

/* Top bar font modernization */
#mw-header *,
#mw-site-navigation *,
#mw-related-navigation * {
    font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}

/* Avoid cutting off letters with descenders: g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

/* Triangle position patch */
#personal h2::after {
   position: relative;
   bottom: 0.5em;
}

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.

.mw-headline:target {
  background-color: gold;
}

Legacy patches

Users and remote interface administrators of older MediaWiki installations with an early and lesser mature version of this skin can retrofit these patches of code to counter shortcomings in appearance in the mean time:

/* Width optimization: Prevents too narrow appearance on mobile phones */
@media (max-width:850px) {
  #mw-content  { padding: 0.5em 0.5em 3em; }
  #firstHeading { width: 100%; }
  #mw-header-container { padding: 3.75em 0.5em 0.35em; }
  #site-navigation h2 { left: 0.5em; }
  #p-logo-text { left: 3em; }
  #user-tools h2 { right: 1em; }
  #site-tools h2 { right: 4em; }
}

/* Table of contents indentation patch (retrofits header level indentations if missing) */
#toc ul ul {
  margin: 0 0 0 2em;
}

환경 구성

다음은 MediaWiki 1.34+에서 만 지원됩니다.

$wgTimelessBackdropImage (string, default 'cat.svg')

$wgLogo를 적합한 배경 이미지로 설정하십시오. 권장 사항은 HiDPI지원을 위한 svg인 500-700px 너비로 설정한 svg인데, 크기는 실제 무엇이든 사용할 수 있지만, 기본 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): Timeless backdrop (wiktionary).svg and Timeless backdrop (metawiki).svg

$wgTimelessLogo (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 $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 $wgLogo and $wgLogoHD already set for a nominally 160x160px logo, but where the HD versions also come out the right size:

$wgTimelessLogo = [
	'1x' => $wgLogo,
	'1.5x' => $wgLogoHD['1.5x'],
	'2x' => $wgLogoHD['2x'],
	'width' => 160,
	'height' => 160
];

위키에 업로드한 File:Cows.svg을 사용하기 위해

$wgTimelessLogo = 'Cows.svg';

• 업로드된 로그는 svg 또는 2x- 또는 더큰 크기의 래스터에서 최상으로 동작하며 각 대상 해상도로 축소되게 된다는 것에 주의하십시오. Obviously this approach requires file uploads and thumbnailing to be enabled.
• Recommended nominal sizes probably around 135px to 165px.

$wgTimelessWordmark (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 Wikipedia wordmark.svg, like so:

$wgTimelessWordmark = 'Wikipedia wordmark.svg';

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.

Note that Timeless supports wordmark and HiDPI logos set in Manual:$wgLogos , 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 Timeless.css, such as no-wrap or a different font-size value
• Setting a different display string via changing the contents of the timeless-sitetitle message