From 3a1bc368de34c105ae8747118fea1ae8c5e215b8 Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Fri, 30 Oct 2015 20:42:24 +0000
Subject: [PATCH] Initial skin from skin:Example; just renamed

Change-Id: Ic60e93eff08abe541635e135faf04e60a756f44c
---
 Gruntfile.js                      |  20 ++
 Timeless.php                      |  10 +
 Timeless.skin.php                 |  28 ++
 TimelessTemplate.php              | 248 ++++++++++++++++++
 i18n/en.json                      |   7 +
 i18n/qqq.json                     |   7 +
 package.json                      |  12 +
 resources/libraries/normalise.css | 412 ++++++++++++++++++++++++++++++
 resources/main.js                 |   0
 resources/screen-common.less      |  79 ++++++
 resources/screen-desktop.less     |  47 ++++
 resources/screen-mobile.less      |  21 ++
 resources/variables.less          |  10 +
 skin.json                         |  51 ++++
 14 files changed, 952 insertions(+)
 create mode 100644 Gruntfile.js
 create mode 100644 Timeless.php
 create mode 100644 Timeless.skin.php
 create mode 100644 TimelessTemplate.php
 create mode 100644 i18n/en.json
 create mode 100644 i18n/qqq.json
 create mode 100644 package.json
 create mode 100644 resources/libraries/normalise.css
 create mode 100644 resources/main.js
 create mode 100644 resources/screen-common.less
 create mode 100644 resources/screen-desktop.less
 create mode 100644 resources/screen-mobile.less
 create mode 100644 resources/variables.less
 create mode 100644 skin.json

diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..9c56558
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,20 @@
+/*jshint node:true */
+module.exports = function ( grunt ) {
+	grunt.loadNpmTasks( 'grunt-banana-checker' );
+	grunt.loadNpmTasks( 'grunt-jsonlint' );
+
+	grunt.initConfig( {
+		banana: {
+			all: 'i18n/'
+		},
+		jsonlint: {
+			all: [
+				'**/*.json',
+				'!node_modules/**'
+			]
+		}
+	} );
+
+	grunt.registerTask( 'test', [ 'jsonlint', 'banana' ] );
+	grunt.registerTask( 'default', 'test' );
+};
diff --git a/Timeless.php b/Timeless.php
new file mode 100644
index 0000000..ea0bc9e
--- /dev/null
+++ b/Timeless.php
@@ -0,0 +1,10 @@
+<?php
+/**
+ * This PHP entry point is deprecated. Please use wfLoadSkin() and the skin.json file
+ * instead. See https://www.mediawiki.org/wiki/Manual:Extension_registration for more details.
+ */
+if ( !function_exists( 'wfLoadSkin' ) ) {
+	die( 'The Timeless skin requires MediaWiki 1.25 or newer.' );
+}
+
+wfLoadSkin( 'Timeless' );
diff --git a/Timeless.skin.php b/Timeless.skin.php
new file mode 100644
index 0000000..7d09f22
--- /dev/null
+++ b/Timeless.skin.php
@@ -0,0 +1,28 @@
+<?php
+/**
+ * SkinTemplate class for the Timeless skin
+ *
+ * @ingroup Skins
+ */
+class SkinTimeless extends SkinTemplate {
+	public $skinname = 'timeless', $stylename = 'Timeless',
+		$template = 'TimelessTemplate', $useHeadElement = true;
+
+	/**
+	 * Add CSS via ResourceLoader
+	 *
+	 * @param $out OutputPage
+	 */
+	function setupSkinUserCss( OutputPage $out ) {
+		parent::setupSkinUserCss( $out );
+
+		$out->addMeta( 'viewport', 'width=device-width, initial-scale=1.0' );
+
+		$out->addModuleStyles( array(
+			'mediawiki.skinning.interface',
+			'mediawiki.skinning.content.externallinks',
+			'skins.timeless'
+		) );
+		$out->addModules( array( 'skins.timeless.js' ) );
+	}
+}
diff --git a/TimelessTemplate.php b/TimelessTemplate.php
new file mode 100644
index 0000000..e384666
--- /dev/null
+++ b/TimelessTemplate.php
@@ -0,0 +1,248 @@
+<?php
+/**
+ * BaseTemplate class for the Timeless skin
+ *
+ * @ingroup Skins
+ */
+class TimelessTemplate extends BaseTemplate {
+	/**
+	 * Outputs the entire contents of the page
+	 */
+	public function execute() {
+		$this->html( 'headelement' );
+		?>
+		<div id="mw-wrapper">
+			<?php
+			$this->outputLogo();
+			?>
+			<div class="mw-body" role="main">
+				<?php
+				if ( $this->data['sitenotice'] ) {
+					?>
+					<div id="siteNotice"><?php $this->html( 'sitenotice' ) ?></div>
+					<?php
+				}
+				if ( $this->data['newtalk'] ) {
+					?>
+					<div class="usermessage"><?php $this->html( 'newtalk' ) ?></div>
+					<?php
+				}
+				?>
+
+				<h1 class="firstHeading">
+					<?php $this->html( 'title' ) ?>
+				</h1>
+				<div id="siteSub"><?php echo $this->getMsg( 'tagline' )->parse() ?></div>
+				<div class="mw-body-content">
+					<div id="contentSub">
+						<?php
+						if ( $this->data['subtitle'] ) {
+							?>
+							<p><?php $this->html( 'subtitle' ) ?></p>
+							<?php
+						}
+						if ( $this->data['undelete'] ) {
+							?>
+							<p><?php $this->html( 'undelete' ) ?></p>
+							<?php
+						}
+						?>
+					</div>
+
+					<?php
+					$this->html( 'bodytext' );
+					$this->html( 'catlinks' );
+					$this->html( 'dataAfterContent' );
+					?>
+				</div>
+			</div>
+
+			<div id="mw-navigation">
+				<h2><?php echo $this->getMsg( 'navigation-heading' )->parse() ?></h2>
+				<?php
+				$this->outputSearch();
+				echo '<div id="user-tools">';
+					$this->outputUserLinks();
+				echo '</div><div id="page-tools">';
+					$this->outputPageLinks();
+				echo '</div><div id="site-navigation">';
+					$this->outputSiteNavigation();
+				echo '</div>';
+				?>
+			</div>
+
+			<div id="mw-footer">
+				<?php
+				foreach ( $this->getFooterLinks() as $category => $links ) {
+					?>
+					<ul role="contentinfo">
+						<?php
+						foreach ( $links as $key ) {
+							?>
+							<li><?php $this->html( $key ) ?></li>
+							<?php
+						}
+						?>
+					</ul>
+					<?php
+				}
+				?>
+
+				<ul role="contentinfo">
+					<?php
+					foreach ( $this->getFooterIcons( 'icononly' ) as $blockName => $footerIcons ) {
+						?>
+						<li>
+							<?php
+							foreach ( $footerIcons as $icon ) {
+								echo $this->getSkin()->makeFooterIcon( $icon );
+							}
+							?>
+						</li>
+						<?php
+					}
+					?>
+				</ul>
+			</div>
+		</div>
+
+		<?php $this->printTrail() ?>
+		</body></html>
+
+		<?php
+	}
+
+	/**
+	 * Outputs a single sidebar portlet of any kind.
+	 */
+	private function outputPortlet( $box ) {
+		if ( !$box['content'] ) {
+			return;
+		}
+
+		?>
+		<div
+			role="navigation"
+			class="mw-portlet"
+			id="<?php echo Sanitizer::escapeId( $box['id'] ) ?>"
+			<?php echo Linker::tooltip( $box['id'] ) ?>
+		>
+			<h3>
+				<?php
+				if ( isset( $box['headerMessage'] ) ) {
+					echo $this->getMsg( $box['headerMessage'] )->escaped();
+				} else {
+					echo htmlspecialchars( $box['header'] );
+				}
+				?>
+			</h3>
+
+			<?php
+			if ( is_array( $box['content'] ) ) {
+				echo '<ul>';
+				foreach ( $box['content'] as $key => $item ) {
+					echo $this->makeListItem( $key, $item );
+				}
+				echo '</ul>';
+			} else {
+				echo $box['content'];
+			}?>
+		</div>
+		<?php
+	}
+
+	/**
+	 * Outputs the logo and (optionally) site title
+	 */
+	private function outputLogo( $id = 'p-logo', $imageonly = false ) {
+		?>
+		<div id="<?php echo $id ?>" class="mw-portlet" role="banner">
+			<a
+				class="mw-wiki-logo"
+				href="<?php echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] )
+			?>" <?php
+			echo Xml::expandAttributes( Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) )
+			?>></a>
+			<?php
+			if ( !$imageonly ) {
+				?>
+				<a id="p-banner" class="mw-wiki-title" href="<?php echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] ) ?>">
+					<?php echo $this->getMsg( 'sitetitle' )->escaped() ?>
+				</a>
+				<?php
+			}
+			?>
+		</div>
+		<?php
+	}
+
+	/**
+	 * Outputs the logo and site title
+	 */
+	private function outputSearch() {
+		?>
+		<form
+			action="<?php $this->text( 'wgScript' ) ?>"
+			role="search"
+			class="mw-portlet"
+			id="p-search"
+		>
+			<input type="hidden" name="title" value="<?php $this->text( 'searchtitle' ) ?>" />
+			<h3>
+				<label for="searchInput"><?php echo $this->getMsg( 'search' )->escaped() ?></label>
+			</h3>
+			<?php echo $this->makeSearchInput( array( "id" => "searchInput" ) ) ?>
+			<?php echo $this->makeSearchButton( 'go', array( 'id' => 'searchGoButton', 'class' => 'searchButton' ) ) ?>
+			<input type='hidden' name="title" value="<?php $this->text( 'searchtitle' ) ?>"/>
+		</form>
+		<?php
+	}
+
+	/**
+	 * Outputs the sidebar
+	 * Set the elements to true to allow them to be part of the sidebar
+	 */
+	private function outputSiteNavigation() {
+		$sidebar = $this->getSidebar();
+
+		$sidebar['SEARCH'] = false;
+		$sidebar['TOOLBOX'] = true;
+		$sidebar['LANGUAGES'] = true;
+
+		foreach ( $sidebar as $boxName => $box ) {
+			if ( $boxName === false ) {
+				continue;
+			}
+			$this->outputPortlet( $box, true );
+		}
+	}
+	private function outputPageLinks() {
+		$this->outputPortlet( array(
+			'id' => 'p-namespaces',
+			'headerMessage' => 'namespaces',
+			'content' => $this->data['content_navigation']['namespaces'],
+		) );
+		$this->outputPortlet( array(
+			'id' => 'p-variants',
+			'headerMessage' => 'variants',
+			'content' => $this->data['content_navigation']['variants'],
+		) );
+		$this->outputPortlet( array(
+			'id' => 'p-views',
+			'headerMessage' => 'views',
+			'content' => $this->data['content_navigation']['views'],
+		) );
+		$this->outputPortlet( array(
+			'id' => 'p-actions',
+			'headerMessage' => 'actions',
+			'content' => $this->data['content_navigation']['actions'],
+		) );
+	}
+	private function outputUserLinks() {
+		$this->outputPortlet( array(
+			'id' => 'p-personal',
+			'headerMessage' => 'personaltools',
+			'content' => $this->getPersonalTools(),
+		) );
+	}
+}
diff --git a/i18n/en.json b/i18n/en.json
new file mode 100644
index 0000000..a6ecf87
--- /dev/null
+++ b/i18n/en.json
@@ -0,0 +1,7 @@
+{
+	"@metadata": {
+		"authors": [ "Isarra" ]
+	},
+	"skinname-timeless": "Timeless",
+	"timeless-desc": "A timeless skin designed after the Winter prototype by Brandon Harris."
+}
diff --git a/i18n/qqq.json b/i18n/qqq.json
new file mode 100644
index 0000000..476db52
--- /dev/null
+++ b/i18n/qqq.json
@@ -0,0 +1,7 @@
+{
+	"@metadata": {
+		"authors": [ "..." ]
+	},
+	"skinname-timeless": "{{optional}}",
+	"timeless-desc": "{{desc|what=skin|name=WoOgLeShades|url=https://www.mediawiki.org/wiki/Skin:Timeless}}"
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..76e8a82
--- /dev/null
+++ b/package.json
@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "scripts": {
+    "test": "grunt test"
+  },
+  "devDependencies": {
+    "grunt": "0.4.5",
+    "grunt-cli": "0.1.13",
+    "grunt-banana-checker": "0.2.2",
+    "grunt-jsonlint": "1.0.4"
+  }
+}
diff --git a/resources/libraries/normalise.css b/resources/libraries/normalise.css
new file mode 100644
index 0000000..351d2c6
--- /dev/null
+++ b/resources/libraries/normalise.css
@@ -0,0 +1,412 @@
+/*! normalize.css v3.0.mwfork.2 | MIT License | git.io/normalize */
+
+/**
+ * Prevent iOS text size adjust after orientation change, without disabling
+ * user zoom.
+ */
+
+html {
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+	margin: 0;
+}
+
+/* HTML5 display definitions
+	 ========================================================================== */
+
+/**
+ * Correct 'block' display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+	display: block;
+}
+
+/**
+ * 1. Correct 'inline-block' display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of 'progress' in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+	display: inline-block; /* 1 */
+	vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying 'audio' without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+	display: none;
+	height: 0;
+}
+
+/**
+ * Address '[hidden]' styling not present in IE 8/9.
+ * Hide the 'template' element in IE, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+	display: none;
+}
+
+/* Links
+	 ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+	background: transparent;
+}
+
+/* Text-level semantics
+	 ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+	border-bottom: 1px dotted;
+}
+@supports (text-decoration: underline dotted) {
+	abbr[title] {
+		border-bottom: none;
+		text-decoration: underline dotted;
+	}
+}
+
+/**
+ * Address style set to 'bolder' in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+	font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+	font-style: italic;
+}
+
+/**
+ * Address variable 'h1' font-size and margin within 'section' and 'article'
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+	font-size: 2em;
+	margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+	background: #ff0;
+	color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+	font-size: 80%;
+}
+
+/**
+ * Prevent 'sub' and 'sup' affecting 'line-height' in all browsers.
+ */
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sup {
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+/* Embedded content
+	 ========================================================================== */
+
+/**
+ * Remove border when inside 'a' element in IE 8/9.
+ */
+
+img {
+	border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+	overflow: hidden;
+}
+
+/* Grouping content
+	 ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+	margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+	height: 0;
+}
+
+/**
+ * Address odd 'em'-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+	font-family: monospace, monospace;
+	font-size: 1em;
+}
+
+/* Forms
+	 ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of 'select', unless a 'border' property is set.
+ */
+
+/**
+ * 1. Inherit most font properties to avoid cross-browser weirdness
+ * 2. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-style: inherit;
+	font-variant: inherit;
+	font-weight: inherit;
+	font-stretch: inherit;
+	font-size: inherit;
+	line-height: inherit; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+ * Address 'overflow' set to 'hidden' in IE 8/9/10.
+ */
+
+button {
+	overflow: visible;
+}
+
+/**
+ * Address inconsistent 'text-transform' inheritance for 'button' and 'select'.
+ * All other form control elements do not inherit 'text-transform' values.
+ * Correct 'button' style inheritance in Firefox, IE 8+, and Opera
+ * Correct 'select' style inheritance in Firefox.
+ */
+
+button,
+select {
+	text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native 'audio'
+ *    and 'video' controls.
+ * 2. Correct inability to style clickable 'input' types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    'input' and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+	-webkit-appearance: button; /* 2 */
+	cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+	cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting 'line-height' on 'input' using '!important' in
+ * the UA stylesheet.
+ */
+
+input {
+	line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to 'content-box' in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+	box-sizing: border-box; /* 1 */
+	padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * 'font-size' values of the 'input', it causes the cursor style of the
+ * decrement button to change from 'default' to 'text'.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+ * 1. Address 'appearance' set to 'searchfield' in Safari 5 and Chrome.
+ * 2. Address 'box-sizing' set to 'border-box' in Safari 5 and Chrome
+ *    (include '-moz' to future-proof).
+ */
+
+input[type="search"] {
+	-webkit-appearance: textfield; /* 1 */
+	-moz-box-sizing: content-box;
+	-webkit-box-sizing: content-box; /* 2 */
+	box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and 'textfield' appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+	border: 1px solid #c0c0c0;
+	margin: 0 2px;
+	padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct 'color' not being inherited in IE 6/7/8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+	border: 0; /* 1 */
+	padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9.
+ */
+
+textarea {
+	overflow: auto;
+}
+
+/**
+ * Don't inherit the 'font-weight' (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+	font-weight: bold;
+}
+
+/* Tables
+	 ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+td,
+th {
+	padding: 0;
+}
diff --git a/resources/main.js b/resources/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/resources/screen-common.less b/resources/screen-common.less
new file mode 100644
index 0000000..17a8560
--- /dev/null
+++ b/resources/screen-common.less
@@ -0,0 +1,79 @@
+@import "variables.less";
+
+/* Page layout */
+
+html,
+body {
+	font-family: sans-serif;
+	margin: 0;
+	padding: 0;
+}
+
+#mw-wrapper {
+	margin: 0 auto;
+	position: relative;
+}
+
+.mw-body {
+	padding: 1em;
+}
+#p-logo {
+	text-align: center;
+	width: 10em;
+
+	a.mw-wiki-logo {
+		display: block;
+		content: '';
+		width: 10em;
+		height: 10em;
+		background-repeat: no-repeat;
+		background-position: 50% 50%;
+	}
+}
+
+/* Search form and personal menu in top-right corner */
+
+#p-search {
+	position: absolute;
+	top: 1em;
+	right: 1em;
+	text-align: right;
+}
+
+#p-personal {
+	position: absolute;
+	top: 3em;
+	right: 1em;
+	text-align: right;
+
+	ul {
+		list-style-type: none;
+		margin: 0;
+	}
+}
+
+/* Footer */
+
+#mw-footer {
+	clear: both;
+	border-top: 1px solid @border;
+	margin-top: 1em;
+	padding: 1em;
+}
+
+#mw-footer ul {
+	list-style-type: none;
+	margin: 0;
+}
+
+#mw-footer ul li {
+	display: inline-block;
+	margin-right: 1em;
+}
+
+#mw-navigation h2,
+#p-search h3,
+#p-personal h3 {
+	.hidden;
+}
+
diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less
new file mode 100644
index 0000000..19b1dde
--- /dev/null
+++ b/resources/screen-desktop.less
@@ -0,0 +1,47 @@
+@import "variables.less";
+
+#mw-wrapper {
+	width: 60em;
+	border-left: 1px solid @border;
+	border-right: 1px solid @border;
+}
+.mw-body {
+	width: @width;
+	border-left: 1px solid @border;
+	float: right;
+	padding-top: 6em;
+}
+
+#p-logo,
+#mw-navigation {
+	width: 10em;
+	padding-left: 1em;
+	clear: left;
+	float: left;
+}
+
+#p-personal ul li {
+	display: inline-block;
+	margin-right: 1em;
+}
+#page-tools {
+	position: absolute;
+	top: 5em;
+	right: 1em;
+	width: @width;
+
+	div,
+	ul,
+	li {
+		list-style: none;
+		display: inline;
+		margin: 0;
+		padding: 0;
+	}
+	li {
+		padding-right: 1em;
+	}
+	h3 {
+		.hidden;
+	}
+}
diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less
new file mode 100644
index 0000000..1114b34
--- /dev/null
+++ b/resources/screen-mobile.less
@@ -0,0 +1,21 @@
+@import "variables.less";
+
+.mw-body,
+.firstHeading {
+	margin-top: 0;
+}
+
+#p-namespaces,
+#p-views,
+#p-actions {
+	float: left;
+	margin-right: 1em;
+}
+#p-navigation {
+	clear: both;
+}
+
+.mw-body,
+#mw-navigation {
+	padding: 1em;
+}
diff --git a/resources/variables.less b/resources/variables.less
new file mode 100644
index 0000000..0628dc0
--- /dev/null
+++ b/resources/variables.less
@@ -0,0 +1,10 @@
+@import "mediawiki.mixins";
+
+@width: 46em;
+@border: #ccc;
+
+/* To hide objects, but keep them accessible for screen-readers */
+.hidden() {
+	position: absolute;
+	top: -9999px;
+}
diff --git a/skin.json b/skin.json
new file mode 100644
index 0000000..c3582ff
--- /dev/null
+++ b/skin.json
@@ -0,0 +1,51 @@
+{
+	"name": "Timeless",
+	"version": "0.1",
+	"author": "Isarra",
+	"url": "https://www.mediawiki.org/wiki/Skin:Timeless",
+	"descriptionmsg": "timeless-desc",
+	"namemsg": "skinname-timeless",
+	"license-name": "GPL-2.0+",
+	"type": "skin",
+	"ValidSkinNames": {
+		"timeless": "Timeless"
+	},
+	"MessagesDirs": {
+		"Timeless": [
+			"i18n"
+		]
+	},
+	"ResourceModules": {
+		"skins.timeless": {
+			"class": "ResourceLoaderSkinModule",
+			"styles": {
+				"resources/libraries/normalise.css": {
+					"media": "screen"
+				},
+				"resources/screen-common.less": {
+					"media": "screen"
+				},
+				"resources/screen-desktop.less": {
+					"media": "screen and (min-width: 951px)"
+				},
+				"resources/screen-mobile.less": {
+					"media": "screen and (max-width: 950px)"
+				}
+			}
+		},
+		"skins.timeless.js": {
+			"scripts": [
+				"resources/main.js"
+			]
+		}
+	},
+	"ResourceFileModulePaths": {
+		"localBasePath": "",
+		"remoteSkinPath": "Timeless"
+	},
+	"AutoloadClasses": {
+		"SkinTimeless": "Timeless.skin.php",
+		"TimelessTemplate": "TimelessTemplate.php"
+	},
+	"manifest_version": 1
+}