From ff28a87f463b2e89398b6290fbc722dcfceabd28 Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Tue, 3 Nov 2015 06:22:41 +0000
Subject: [PATCH] Turn this into more of a skin. Formatting, horror, more
 horror.

Thanks to Skizzers for the catlist db query.
Thanks to HORROR for the tool parsing.
Lots of css and stuff.

Change-Id: I9b6b4c2e3a206d909972929ae32777c933d0be46
---
 TimelessTemplate.php                  | 341 ++++++++++++++++++++++----
 i18n/en.json                          |  14 +-
 i18n/qqq.json                         |  15 +-
 notes                                 |  30 ++-
 resources/forms.less                  |  29 +--
 resources/images/arrow-down-white.png | Bin 0 -> 227 bytes
 resources/images/arrow-down-white.svg |   5 +
 resources/images/star-filled.png      | Bin 0 -> 529 bytes
 resources/images/star-filled.svg      |   6 +
 resources/images/star.png             | Bin 0 -> 657 bytes
 resources/images/star.svg             |   6 +
 resources/images/user.png             | Bin 0 -> 704 bytes
 resources/images/user.svg             |  87 +++++++
 resources/screen-common.less          | 165 ++++++++++++-
 resources/screen-desktop.less         | 195 +++++++++++++--
 resources/variables.less              |  20 +-
 skin.json                             |   2 +-
 17 files changed, 804 insertions(+), 111 deletions(-)
 create mode 100644 resources/images/arrow-down-white.png
 create mode 100644 resources/images/arrow-down-white.svg
 create mode 100644 resources/images/star-filled.png
 create mode 100644 resources/images/star-filled.svg
 create mode 100644 resources/images/star.png
 create mode 100644 resources/images/star.svg
 create mode 100644 resources/images/user.png
 create mode 100644 resources/images/user.svg

diff --git a/TimelessTemplate.php b/TimelessTemplate.php
index 7202f5f..55c5571 100644
--- a/TimelessTemplate.php
+++ b/TimelessTemplate.php
@@ -9,6 +9,8 @@ class TimelessTemplate extends BaseTemplate {
 	 * Outputs the entire contents of the page
 	 */
 	public function execute() {
+		$pileOfTools = $this->getPageTools();
+
 		$this->html( 'headelement' );
 		?>
 		<div id="mw-wrapper">
@@ -30,14 +32,46 @@ class TimelessTemplate extends BaseTemplate {
 					<h2><?php echo $this->getMsg( 'navigation-heading' )->parse() ?></h2>
 					<?php
 					$this->outputLogo( 'p-logo', 'image' );
-					echo '<div id="page-tools">';
-						$this->outputPageLinks();
-					echo '</div><div id="site-navigation">';
+					echo '<div id="site-navigation" class="sidebar-chunk">';
 						$this->outputSiteNavigation();
 					echo '</div>';
+					$this->outputPortlet( array(
+						'id' => 'p-sitetools',
+						'headerMessage' => 'timeless-sitetools',
+						'content' => $pileOfTools['general'],
+						'class' => 'sidebar-chunk'
+					) );
 					?>
 				</div>
 				<div id="mw-related-navigation">
+					<div id="page-tools" class="sidebar-chunk">
+						<?php
+						if ( count( $pileOfTools['page-secondary'] ) > 0 ) {
+							$this->outputPortlet( array(
+								'id' => 'p-pageactions',
+								'headerMessage' => 'timeless-pageactions',
+								'content' => $pileOfTools['page-secondary'],
+							) );
+						}
+						if ( count( $pileOfTools['user'] ) > 0 ) {
+							$this->outputPortlet( array(
+								'id' => 'p-userpagetools',
+								'headerMessage' => 'timeless-userpagetools',
+								'content' => $pileOfTools['user'],
+							) );
+						}
+						$this->outputPortlet( array(
+							'id' => 'p-pagemisc',
+							'headerMessage' => 'timeless-pagemisc',
+							'content' => $pileOfTools['page-tertiary'],
+						) );
+						?>
+					</div>
+					<?php
+
+					$this->outputInterlanguageLinks();
+					$this->outputCategories();
+					?>
 				</div>
 				<div id="mw-content">
 				<div class="mw-body" role="main">
@@ -57,7 +91,23 @@ class TimelessTemplate extends BaseTemplate {
 					<h1 class="firstHeading">
 						<?php $this->html( 'title' ) ?>
 					</h1>
-					<div id="siteSub"><?php echo $this->getMsg( 'tagline' )->parse() ?></div>
+					<div id="page-header-links">
+					<?php
+						$this->outputPortlet( array(
+							'id' => 'p-namespaces',
+							'headerMessage' => 'timeless-namespaces',
+							'content' => $pileOfTools['namespaces'],
+						) );
+					?>
+					<?php
+						$this->outputPortlet( array(
+							'id' => 'p-pagetools',
+							'headerMessage' => 'timeless-pagetools',
+							'content' => $pileOfTools['page-primary'],
+						) );
+					?>
+					</div>
+					<div class="visual-clear"></div>
 					<div class="mw-body-content">
 						<div id="contentSub">
 							<?php
@@ -79,7 +129,6 @@ class TimelessTemplate extends BaseTemplate {
 						?>
 						<div class="visual-clear"></div>
 						<?php
-						$this->html( 'catlinks' );
 						$this->html( 'dataAfterContent' );
 						?>
 					</div>
@@ -91,23 +140,7 @@ class TimelessTemplate extends BaseTemplate {
 
 			<div id="mw-footer-container" class="ts-container">
 			<div id="mw-footer" class="ts-inner">
-				<?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">
+				<ul role="contentinfo" id="footer-icons">
 					<?php
 					foreach ( $this->getFooterIcons( 'icononly' ) as $blockName => $footerIcons ) {
 						?>
@@ -122,6 +155,21 @@ class TimelessTemplate extends BaseTemplate {
 					}
 					?>
 				</ul>
+				<?php
+				foreach ( $this->getFooterLinks() as $category => $links ) {
+					?>
+					<ul role="contentinfo" id="footer-<?php echo Sanitizer::escapeId( $category ) ?>">
+						<?php
+						foreach ( $links as $key ) {
+							?>
+							<li><?php $this->html( $key ) ?></li>
+							<?php
+						}
+						?>
+					</ul>
+					<?php
+				}
+				?>
 			</div>
 			</div>
 		</div>
@@ -139,11 +187,16 @@ class TimelessTemplate extends BaseTemplate {
 		if ( !$box['content'] ) {
 			return;
 		}
+		if ( !isset( $box['class'] ) ) {
+			$box['class'] = 'mw-portlet';
+		} else {
+			$box['class'] .= ' mw-portlet';
+		}
 
 		?>
 		<div
 			role="navigation"
-			class="mw-portlet"
+			class="<?php echo $box['class'] ?>"
 			id="<?php echo Sanitizer::escapeId( $box['id'] ) ?>"
 			<?php echo Linker::tooltip( $box['id'] ) ?>
 		>
@@ -238,14 +291,13 @@ class TimelessTemplate extends BaseTemplate {
 
 	/**
 	 * 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;
+		$sidebar['SEARCH'] = false; // Already hardcoded into header
+		$sidebar['TOOLBOX'] = false; // Parsed as part of pageTools
+		$sidebar['LANGUAGES'] = false; // PUT THIS ON THE OTHER SIDE
 
 		foreach ( $sidebar as $boxName => $box ) {
 			if ( $boxName === false ) {
@@ -254,33 +306,214 @@ class TimelessTemplate extends BaseTemplate {
 			$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(),
-		) );
+		$user = $this->getSkin()->getUser();
+		?>
+		<div class="mw-portlet" id="p-personal" role="navigation">
+			<h3>
+			<span>
+			<?php
+			// Display status, and make a dropdown if logged in
+			if ( $user->isLoggedIn() ) {
+				$userName = $user->getName();
+				// Make sure it fit firsts
+				if ( strlen( $userName ) < 15 ) {
+					echo htmlspecialchars( $userName, ENT_QUOTES );
+				} else {
+					echo wfMessage( 'timeless-loggedin' )->escaped();
+				}
+			} else {
+				echo wfMessage( 'timeless-anonymous' )->escaped();
+			}
+			?>
+			</span>
+			</h3>
+			<div class="p-body dropdown">
+			<ul<?php $this->html( 'userlangattributes' ) ?>>
+			<?php
+				foreach ( $this->getPersonalTools() as $key => $item ) {
+					if ( $key == 'userpage' ) {
+						$item['links'][0]['text'] = wfMessage( 'timeless-userpage' )->text();
+					}
+					if ( $key == 'mytalk' ) {
+						$item['links'][0]['text'] = wfMessage( 'timeless-talkpage' )->text();
+					}
+					echo $this->makeListItem( $key, $item );
+				}
+			?>
+			</ul>
+			</div>
+		</div>
+		<?php
+	}
+
+	/*
+	 * Generates pile of all the tools
+	 * Returns array of arrays of each kind
+	 */
+	private function getPageTools() {
+		$title = $this->getSkin()->getTitle();
+		$namespace = $title->getNamespace();
+
+		$sortedPileOfTools = array(
+			'namespaces' => array(),
+			'page-primary' => array(),
+			'page-secondary' => array(),
+			'user' => array(),
+			'page-tertiary' => array(),
+			'general' => array()
+		);
+
+		$pileOfTools = array();
+		foreach ( $this->data['content_navigation'] as $navKey => $navBlock ) {
+			/* Just use namespaces items as they are */
+			if ( $navKey == 'namespaces' ) {
+				if ( $namespace < 0 ) {
+					// Put special page ns_pages in the more pile so they're not so lonely
+					$sortedPileOfTools['page-tertiary'] = $navBlock;
+				} else {
+					$sortedPileOfTools['namespaces'] = $navBlock;
+				}
+			} else {
+				$pileOfTools = array_merge( $pileOfTools, $navBlock );
+			}
+		}
+		$pileOfTools = array_merge( $pileOfTools, $this->getToolbox() );
+		if ( $namespace >= 0 ) {
+			$pileOfTools['pagelog'] = array(
+				'text' => $this->getMsg( 'timeless-pagelog' )->escaped(),
+				'href' => SpecialPage::getTitleFor( 'Log', $title->getPrefixedText() )->getLocalURL(),
+				'id' => 't-pagelog'
+			);
+		}
+
+		/* This is really dumb, but there is no sane way to do this. */
+		foreach ( $pileOfTools as $navKey => $navBlock ) {
+			$currentSet = null;
+
+			if ( in_array( $navKey, array( 'watch', 'unwatch' ) ) ) {
+				$currentSet = 'namespaces';
+			} elseif ( in_array( $navKey, array( 'edit', 'view', 'history', 'contributions', 'addsection' ) ) ) {
+				$currentSet = 'page-primary';
+			} elseif ( in_array( $navKey, array( 'delete', 'rename', 'protect', 'unprotect', 'viewsource', 'move' ) ) ) {
+				$currentSet = 'page-secondary';
+			} elseif (in_array( $navKey, array( 'blockip', 'userrights', 'log' ) ) ) {
+				$currentSet = 'user';
+			} elseif (in_array( $navKey, array( 'whatlinkshere', 'print', 'info', 'pagelog', 'recentchangeslinked', 'permalink' ) ) ) {
+				$currentSet = 'page-tertiary';
+			} else {
+				$currentSet = 'general';
+			}
+			$sortedPileOfTools[$currentSet][$navKey] = $navBlock;
+		}
+
+		return $sortedPileOfTools;
+	}
+
+	/*
+	 * Assemble and output array of categories, regardless of view mode
+	 * Just using Skin or OutputPage functions doesn't respect view modes (preview, history, whatever)
+	 */
+	private function outputCategories() {
+		global $wgContLang;
+
+		$skin =  $this->getSkin();
+		$title = $skin->getTitle();
+		$catList = false;
+
+		/* Get list from outputpage if in preview; otherwise get list from title */
+		if ( in_array( $skin->getRequest()->getVal( 'action' ), array( 'submit', 'edit' ) ) ) {
+			$allCats = array();
+			/* Can't just use getCategoryLinks because there's no equivalent for Title */
+			$allCats2 = $skin->getOutput()->getCategories();
+			foreach ( $allCats2 as $displayName ) {
+				$catTitle = Title::makeTitleSafe( NS_CATEGORY, $displayName );
+				$allCats[] = $catTitle->getDBkey();
+			}
+		} else {
+			/* This is probably to trim out some excessive stuff. Unless I was just high on cough syrup. */
+			$allCats = array_keys( $title->getParentCategories() );
+
+			$len = strlen( $wgContLang->getNsText( NS_CATEGORY ) . ':' );
+			foreach ( $allCats as $i => $catName ) {
+				$allCats[$i] = substr( $catName, $len );
+			}
+		}
+		if ( count( $allCats ) > 0 ) {
+			$dbr = wfGetDB( DB_SLAVE );
+			$res = $dbr->select(
+				array( 'page', 'page_props' ),
+				array( 'page_id', 'page_title' ),
+				array(
+					'page_title' => $allCats,
+					'page_namespace' => NS_CATEGORY,
+					'pp_propname' => 'hiddencat'
+				),
+				__METHOD__,
+				array(),
+				array( 'page_props' => array( 'JOIN', 'pp_page = page_id' ) )
+			);
+			$hiddenCats = array();
+			foreach ( $res as $row ) {
+				$hiddenCats[] = $row->page_title;
+			}
+			$normalCats = array_diff( $allCats, $hiddenCats );
+
+			$normalCount = count( $normalCats );
+			$hiddenCount = count( $hiddenCats );
+			$count = $normalCount;
+
+			/* Mostly consistent with how Skin does it. Doesn't have the classes. Either way can't be good for caching. */
+			if (  $skin->getUser()->getBoolOption( 'showhiddencats' ) || $title->getNamespace() == NS_CATEGORY ) {
+				$count += $hiddenCount;
+			} else {
+				/* We don't care if there are hidden ones. */
+				$hiddenCount = 0;
+			}
+
+			/* Assemble the html because why not... */
+			if ( $count ) {
+				$catList = '<div role="navigation" class="mw-portlet sidebar-chunk" id="p-catlist">';
+				if ( $normalCount ) {
+					$catList .= $this->assembleCatList( $normalCats, 'catlist-normal', 'categories' );
+				}
+				if ( $hiddenCount ) {
+					$catList .= $this->assembleCatList( $hiddenCats, 'catlist-hidden', 'hidden-categories' );
+				}
+				$catList .= '</div>';
+			}
+		}
+		if ( $catList ) {
+			echo $catList;
+		}
+	}
+	private function assembleCatList( $list, $id, $message ) {
+		$catList = '<h3>' . $this->getMsg( $message )->escaped() . '</h3>';
+		$catList .= '<ul id="' . $id . '">';
+		foreach ( $list as $category) {
+			$title = Title::makeTitleSafe( NS_CATEGORY, $category );
+			if ( !$title ) {
+				continue;
+			}
+			$category = Linker::link( $title, $title->getText() );
+			$catList .=  '<li>' . $category . '</li>';
+		}
+		$catList .= '</ul>';
+
+		return $catList;
+	}
+
+	private function outputInterlanguageLinks() {
+		if ( $this->data['language_urls'] ) {
+			$msgObj = $this->getMsg( 'otherlanguages' );
+			$this->outputPortlet( array(
+				'id' => 'p-lang',
+				'header' => $msgObj->exists() ? $msgObj->text() : 'otherlanguages',
+				'generated' => false,
+				'content' => $this->data['language_urls'],
+				'class' => 'sidebar-chunk'
+			) );
+		}
 	}
 }
diff --git a/i18n/en.json b/i18n/en.json
index a08744c..c324d6d 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -4,5 +4,17 @@
 	},
 	"skinname-timeless": "Timeless",
 	"timeless-desc": "A timeless skin designed after the Winter prototype by Brandon Harris.",
-	"timeless-search-placeholder": "Search approximately {{NUMBEROFPAGES}} pages"
+	"timeless-search-placeholder": "Search approximately {{NUMBEROFPAGES}} pages",
+	"timeless-loggedin": "Your account",
+	"timeless-anonymous": "Anonymous user",
+	"timeless-userpage": "User page",
+	"timeless-talkpage": "User talk",
+	"timeless-pagelog": "Page logs",
+	"timeless-sitetools": "Wiki tools",
+	"timeless-pageactions": "Page tools",
+	"timeless-userpagetools": "User tools",
+	"timeless-pagemisc": "More",
+	"timeless-namespaces": "Namespaces",
+	"timeless-pagetools": "Page actions"
 }
+
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 4797115..65ffcb1 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -1,10 +1,21 @@
 {
 	"@metadata": {
 		"authors": [
-			"..."
+			"Isarra"
 		]
 	},
 	"skinname-timeless": "{{optional}}",
 	"timeless-desc": "{{desc|what=skin|name=Timeless|url=https://www.mediawiki.org/wiki/Skin:Timeless}}",
-	"timeless-search-placeholder": "Main search input placeholder text"
+	"timeless-search-placeholder": "Main search input placeholder text",
+	"timeless-loggedin": "Label for logged in users' user menu (if their username is too long to fit)",
+	"timeless-anonymous": "Label for anonymous (not logged in) user menu",
+	"timeless-userpage": "User page/profile link label in the personal menu\n{{Identical|User page}}",
+	"timeless-talkpage": "Talk page link label in the personal menu",
+	"timeless-pagelog": "Label for special:log link for the page",
+	"timeless-sitetools": "Label for general site tools menu in sidebar",
+	"timeless-pageactions": "Label for some page actions",
+	"timeless-userpagetools": "Label for actions associated with a userpage",
+	"timeless-pagemisc": "Label for more tools",
+	"timeless-namespaces": "Label for page namespaces and watch tool",
+	"timeless-pagetools": "Label for some other page tools"
 }
diff --git a/notes b/notes
index eb1ae45..34fc164 100644
--- a/notes
+++ b/notes
@@ -1 +1,29 @@
-...
+
+logo
+site navigation
+> wiki tools
+
+> listen
+table of contents
+
+
+
+search
+firstheading
+page actions - edit etc
+content
+> references
+related content
+
+
+
+personal tools
+notifications
+
+page tools - protect etc
+user tools
+> all page tools - related, info etc
+
+> languages
+> sister projects
+categories
diff --git a/resources/forms.less b/resources/forms.less
index 8548f00..d5879f8 100644
--- a/resources/forms.less
+++ b/resources/forms.less
@@ -13,13 +13,9 @@
 		display: inline;
 		margin-right: 1em;
 
-		&.selected {
-			font-weight: bold;
-
-			a {
-				color: @text;
-				border-bottom: solid @border @blue;
-			}
+		&.selected a {
+			color: @text;
+			border-bottom: solid @border @blue;
 		}
 	}
 }
@@ -32,6 +28,7 @@
 		border: none;
 		padding: 0;
 		margin: 0;
+		box-shadow: none;
 	}
 	.mainLegend {
 		display: none;
@@ -60,25 +57,16 @@ td.mw-label {
 }
 
 fieldset {
-	border: solid @grey-bright;
-	border-width: 1px 1px @border;
+	.box;
 	line-height: 1.3em;
 	margin: 1em 0;
-	padding: 1.25em 1.75em;
+	background: @background;
 
 	legend {
 		padding: .5em 1.25em;
 		background: @background;
-		border-bottom: solid @border @blue;
 		font-weight: bold;
-	}
-	fieldset {
-		box-shadow: none;
-
-		legend {
-			border-bottom: none;
-			color: @blue;
-		}
+		color: @blue-dark;
 	}
 }
 label {
@@ -127,7 +115,7 @@ textarea,
 	padding: .25em .35em;
 	border: solid 1px @grey;
 	margin: .5em 0;
-	box-shadow: inset 0px 2px 1px 1px rgba(0, 0, 0, 0.05);
+	box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.05);
 	font-size: 1em;
 	min-height: 30px;
 }
@@ -166,6 +154,7 @@ button {
 	background: @background;
 	color: @text;
 	min-height: 30px;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
 	&:active {
 		background: @grey-bright;
diff --git a/resources/images/arrow-down-white.png b/resources/images/arrow-down-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..5953d0e7776dc898b7a7e0eb52019a7b595224c8
GIT binary patch
literal 227
zcmeAS@N?(olHy`uVBq!ia0vp^Vn8gw!3HFS-u9~jDVAa<&kznEsNqQI0P;BtJR*yM
z>aT+^qm#z$3ZS55iEBhjaDG}zd16s2LwR|*US?i)adKios$PCk`s{Z$Qb0uso-U3d
z7QJuJp5|;Y5OBSit}OKCh*D5m)&(yX*4+|CcXx3#&({$tn$BE2@5-;-*q0K?Z&ZCJ
zu{|$8ZP~B6^yw$53$t%_O`iF-!MsMkzNhL(_Li1#Xa5R@G=&i7==*OOrvB`TobshJ
Q7ibrQr>mdKI;Vst06P;+-~a#s

literal 0
HcmV?d00001

diff --git a/resources/images/arrow-down-white.svg b/resources/images/arrow-down-white.svg
new file mode 100644
index 0000000..39a3daf
--- /dev/null
+++ b/resources/images/arrow-down-white.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="22" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<path style="fill:#555" d="m15.5 5-5 5-5-5z"/>
+<path style="fill:#fff" d="m15.5 6l-5 5-5-5z" fill="#797979"/>
+</svg>
diff --git a/resources/images/star-filled.png b/resources/images/star-filled.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1b2318caaa241f326569a7917c292e08d7d36fc
GIT binary patch
literal 529
zcmV+s0`C2ZP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00004b3#c}2nYxW
zd<bNS00009a7bBm000fw000fw0YWI7cmMzZ8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10gg#TK~y-6&6GiF6Hyd}zdNZy;Vly6xfO(_W!jzlLbh3`8*i$m
zt=V)I{S)&yvJ3^0CkUb-;>wM`z{YO6=spdR5NuP;b(6rfopuHl^ehkOo_8+iy$AmS
zX_`i9nnq=`3uQ!c9B+uo6nI&rl_Eh1p#ppXD&G6J(P;d*Nnf~zne6~8z*4{8-}<A3
zolfUgtyVh(?$4-W=iG9$**yELgw<+wH)95HZ!{Vug$Y9li@*aBSv9jYAO_ZeyVuN}
z00(CFHHxAGpl4>ERrUM4<%yZ?0UI}+p1~bpT}0N+4B)l*{u9hrR@I-w;cy#xQ_?Vt
z_s+Rz^Y$;45<<8QyaFDUH2dJ3dz3BdLMf^`0iFQwN|=2dkH?QMH-4pMRh^jGevzAq
zbldIr>196m+C))QFOhILcQ%ilPNz$M)lfvT36IR|Ij{*F&Pg*XZwS<ZV<7R~ue4gN
zuByK1^?Iu!qBG-q-j{aeEr$>mMPzd@7<7{)InO&SgitZFry}xJRli*m>OaLVw*`M{
TrnKa800000NkvXXu0mjfnn&U{

literal 0
HcmV?d00001

diff --git a/resources/images/star-filled.svg b/resources/images/star-filled.svg
new file mode 100644
index 0000000..26f7923
--- /dev/null
+++ b/resources/images/star-filled.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="5.64mm" width="5.64mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 20 20">
+<g transform="translate(-77 -51.8)">
+<path style="color-rendering:auto;text-decoration-color:#000000;color:#000000;shape-rendering:auto;solid-color:#000000;text-decoration-line:none;fill:#aaa;fill-rule:evenodd;mix-blend-mode:normal;block-progression:tb;text-indent:0;image-rendering:auto;white-space:normal;text-decoration-style:solid;isolation:auto;text-transform:none" d="m87 53.6-2.63 5.12-5.65 0.954 4.03 4.1-0.846 5.7 5.12-2.59 5.13 2.57-0.289-1.91-0.574-3.79 4.02-4.11-5.65-0.935z"/>
+</g>
+</svg>
diff --git a/resources/images/star.png b/resources/images/star.png
new file mode 100644
index 0000000000000000000000000000000000000000..d27efa9926127100dad4bc335b3f96c93ac130d4
GIT binary patch
literal 657
zcmV;C0&e|@P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00004b3#c}2nYxW
zd<bNS00009a7bBm000fw000fw0YWI7cmMzZ8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10uD(;K~y-6&6Lk-Q&AAcf8TA|BHYczT*Q?iw1KueAD{#TAqy)d
zxmbltLCCWB074c%fZL$Bu$$yw3;sb+H?12VKnxZtLKh<RB0*x&HkxtaX-U%56kX_S
z4(FWj%zQK7nSp;{l}g2{R4U$au$kk4rl+SDfFD3@7*@joaU72T4ZsV-a4MhAfBzkR
zXd03hfgCWgy}iBoR}8Dw>Sz!I8^Bq2wB`GLu23lK{t?3<2(CM44d69!rqybdhcb-g
z_ylkcm@=~&NmIZKaLVCIlG<kW(Ct3~ZzR1nvxZw=MN#xM0}zH`J5AFYz`WE`g)hK*
zsZ?48NRng~I1iizX3cCCz|0<mVfgZZAso~z0p@_Vr1@g8_*9bhr&X`lFGzX}i~*0D
z&1R`wF1LFey41&j1h@#Kp6BI@#bToyQ>)b`J<nSQP6N+<-=FIisYjG3iuQcpkAP=D
z*y(ic_OtUm?~Zf!VrOUPQorJdR4x<>yOQp??MHyMwY5yOS{((D^ug6_Woc>Y+o6E{
z2hMWt(Pok)r8G?&K@e=lalCA1TaM}Epoar{xzp)PNJ7%GnT>Z{-3Io$gC2{ar2XjQ
zz&lCTfUCd;zm&zy20A=y+DroPCEdzqvn%@pA&%p^q|0V@6PPeF^?$2Fz3jT?O0(I#
rzyG%eU`EVrLDG{biasAf>OZxg*}J<egc(Ii00000NkvXXu0mjfr5PmI

literal 0
HcmV?d00001

diff --git a/resources/images/star.svg b/resources/images/star.svg
new file mode 100644
index 0000000..c8f519e
--- /dev/null
+++ b/resources/images/star.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="5.64mm" width="5.64mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 20 20">
+<g transform="translate(-77 -51.8)">
+<path style="stroke:#aaa;stroke-linecap:round;stroke-width:2.55;fill:none" transform="matrix(.781 .0353 -.0351 .786 21.1 10)" d="m92.5 69.3-5.04-2.23-4.81 2.69 0.568-5.48-4.04-3.74 5.39-1.15 2.31-5 2.76 4.77 5.47 0.649-3.68 4.1z"/>
+</g>
+</svg>
diff --git a/resources/images/user.png b/resources/images/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff9858a63e091640303ef9620c6ea8f8a33a22b8
GIT binary patch
literal 704
zcmV;x0zdtUP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00004b3#c}2nYxW
zd<bNS00009a7bBm000fw000fw0YWI7cmMzZ8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10zFAYK~y-6osuzVQ&AL#|C9F~*he&0LwJFNP>@3AC>g2{<B&xI
z_T|1xD0DCx99)DB77~g$i9@nGHCr*bSTqqcI5>!e1hF83ZbFAbY)yE^*Lz&jXp=Na
z`%mYdd(U_8f6gV0Q7V<XMnri43%%5PB6_sBx%qBf-AD-`mU6kA(`Yo<wr#d;o14uh
z=W@A&R4R4nM6h%^JzFRg+K%J!pd82HVzJl}LR=VC>l&3b48zK1v$~=vLwky%Ad|_=
z1cSk)se!Rr?7FV&$2!n;9kE#K#?-(-Ai&4cdI|=EBhQQkhC-pYlYpU6=*^@veKGTS
z$8q+DCh~7EznFP;BFHq&%K)ecy)C8uGYISD%w7ozA?E&P^erco$+PqG^RF$-$^!rq
zy&$3m051Ww0Q>~7MMPJLs0;v>W##>T|0^Lx|2wFMfngZ;S65drR;$%@DWyR~4~Xak
zfLnu3gb*`C^wc!Xd(mi=*4Eb207^Kt2LR=A`Rn51;w1p6R4OQyN<X^Y?lS;es;Yjo
zZJS*#*PNm#H#JSWyS%&{NF)*<B5Z7Id|X*sxpD-!y}jKHhr`<8dUtmhwOS4JdL27E
zJ78w`d_F`X5yazhc)i~Ki|h6J??@za=7^2Gy*+u{R41v`YRRFYXqt8~*sE#fcDws=
zAK2-1zMmG@ZnyV`fF6(M$!USAsy-h|GP6rcSvhI{q?DhT**oGMfSFZhe#p$9n7KWM
mV>9y?W`4}f=T7TvD*XkrYm|R{l~hLn0000<MNUMnLSTaO`#9+U

literal 0
HcmV?d00001

diff --git a/resources/images/user.svg b/resources/images/user.svg
new file mode 100644
index 0000000..5df4d20
--- /dev/null
+++ b/resources/images/user.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="5.64mm"
+   width="5.64mm"
+   version="1.1"
+   viewBox="0 0 20 20"
+   id="svg4136"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="user.svg"
+   inkscape:export-filename="/media/shintaiden/home/rahah/mediawiki/skins/Timeless/resources/images/user.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <metadata
+     id="metadata4148">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4146" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3840"
+     inkscape:window-height="2124"
+     id="namedview4144"
+     showgrid="true"
+     inkscape:zoom="67.475764"
+     inkscape:cx="7.1743599"
+     inkscape:cy="10.812713"
+     inkscape:window-x="2880"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4136"
+     inkscape:snap-bbox="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-others="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4150" />
+  </sodipodi:namedview>
+  <path
+     inkscape:connector-curvature="0"
+     style="fill:#555555;fill-opacity:1"
+     d="m 3.6434932,8.4526943 c -1.7584726,2.3893907 -1.9573009,4.9984967 -1.227529,6.7279547 0.488999,1.18 1.179848,1.870866 1.989848,2.290867 0.792,0.428 1.749703,0.517941 2.599703,0.519941 l 6.3292038,0 c 0.921,0 1.850524,-0.20736 2.650524,-0.674359 0.8,-0.467 1.460246,-1.198913 1.800246,-2.288912 0.490001,-1.55 0.26532,-4.030165 -1.47968,-6.4601667 -0.0076,0.01164 -0.02113,0.0182 -0.02932,0.02932 A 7.5059113,7.5059113 0 0 1 10.00788,11.986728 7.5059113,7.5059113 0 0 1 3.6434932,8.4526943 Z"
+     id="path4140-5" />
+  <path
+     sodipodi:nodetypes="sssss"
+     inkscape:connector-curvature="0"
+     id="path4142-2"
+     d="m 10.007881,-0.01576092 c -2.4852818,0 -4.5000018,2.01471912 -4.5000018,4.50000012 0,2.485281 2.01472,4.5000001 4.5000018,4.5000001 2.48528,0 4.5,-2.0147191 4.5,-4.5000001 0,-2.485281 -2.01472,-4.50000012 -4.5,-4.50000012 z"
+     style="fill:#555555;fill-opacity:1;fill-rule:evenodd" />
+  <path
+     style="fill:#ffffff"
+     d="M 3.640625 9.453125 C 1.8835375 11.840633 1.6848657 14.447685 2.4140625 16.175781 C 2.9026774 17.354852 3.5929816 18.045174 4.4023438 18.464844 C 5.1937201 18.892507 6.1506693 18.982377 7 18.984375 L 13.324219 18.984375 C 14.244494 18.984375 15.173286 18.777179 15.972656 18.310547 C 16.772026 17.843915 17.431752 17.112579 17.771484 16.023438 C 18.261099 14.474658 18.036595 11.996446 16.292969 9.5683594 C 16.285395 9.5799893 16.271857 9.5865465 16.263672 9.5976562 A 7.5000009 7.5000009 0 0 1 10 12.984375 A 7.5000009 7.5000009 0 0 1 3.640625 9.453125 z "
+     transform="scale(1.0007881,1.0007881)"
+     id="path4140" />
+  <path
+     sodipodi:nodetypes="sssss"
+     inkscape:connector-curvature="0"
+     id="path4142"
+     d="m 10.007881,0.99211966 c -2.4852804,0 -4.5000004,2.01471904 -4.5000004,4.50000004 0,2.485281 2.01472,4.5 4.5000004,4.5 2.48528,0 4.5,-2.014719 4.5,-4.5 0,-2.485281 -2.01472,-4.50000004 -4.5,-4.50000004 z"
+     style="fill:#ffffff;fill-rule:evenodd" />
+</svg>
diff --git a/resources/screen-common.less b/resources/screen-common.less
index 2868709..aba5377 100644
--- a/resources/screen-common.less
+++ b/resources/screen-common.less
@@ -10,7 +10,7 @@ body {
 	color: @text;
 	background: @background-dark;
 	font-size: 1em;
-	line-height: 1.3;
+	line-height: 1.4;
 }
 #mw-content {
 	background: @background;
@@ -21,7 +21,11 @@ body {
 #mw-footer-container {
 	border-top: solid 1px @background-dark2;
 	box-shadow: inset 0 7px 2px -4px rgba(0, 0, 0, .1);
+	color: @text-inverse;
 
+	a {
+		color: @text-inverse;
+	}
 	ul {
 		margin: 0;
 	}
@@ -29,13 +33,13 @@ body {
 
 #p-logo {
 	text-align: center;
-	width: 10em;
+	width: 11em;
 
 	a.mw-wiki-logo {
 		display: block;
 		content: '';
-		width: 10em;
-		height: 10em;
+		width: 11em;
+		height: 11em;
 		background-repeat: no-repeat;
 		background-position: 50% 50%;
 	}
@@ -50,26 +54,165 @@ a {
 	&:visited {
 		color: @blue-dark;
 	}
-	&.new {
-		color: @red;
+}
+a.new,
+.new a {
+	color: @red;
 
-		&:visited {
-			color: @red-dark;
-		}
+	&:visited {
+		color: @red-dark;
 	}
 }
 
+.mw-editsection {
+	font-family: @fonts;
+}
 .mw-editsection-bracket {
 	display: none;
 }
 .visual-clear {
 	clear: both;
 }
+#mw-content {
+	h1, h2, h3, h4, h5, h6, dt {
+		font-weight: normal;
+		font-family: @fonts-secondary;
+		line-height: 1.25;
+		margin: 1.5em 0 .5em;
+	}
+
+	h1, h2 {
+		border-bottom: solid 2px @blue-bright;
+
+	}
+
+	h1.firstHeading {
+		margin: .25em 0 .5em;
+		border-bottom: solid 4px @red;
+	}
+
+	h1 {
+		font-size: 2em;
+	}
+	h2 {
+		font-size: 1.7em;
+	}
+	h3 {
+		font-size: 1.5em;
+	}
+	h4 {
+		font-size: 1.35em;
+	}
+	h5 {
+		font-size: 1.25em;
+	}
+	h6 {
+		font-size: 1.2em;
+	}
+	dt {
+		margin-top: 1em;
+	}
+	dd {
+		margin-bottom: 1em;
+	}
+	.mw-changeslist-legend dd {
+		margin-bottom: 0;
+	}
+}
+
+/* Thumbnails */
+.tright {
+	margin: 0 0 .5em .5em;
+	padding: 0 0 1em 1.5em;
+	background: #fff;
+}
+.tleft {
+	margin: 0 .5em .5em 0;
+	padding: 0 1.5em 1em 0;
+	background: #fff;
+
+}
+.thumbinner {
+	.box;
+	padding: .75em;
+}
+.thumbcaption {
+	font-size: 95%;
+	padding: .5em 1em;
+}
+.thumbinner img{
+	border: solid 1px @grey-bright;
+}
+#mw-content li.gallerybox div.thumb {
+	.box;
+	padding: 0;
+}
+
+/* Tables of contents */
+ul#filetoc,
+#toc, .toc, .mw-warning {
+	display: inline-block;
+	.box;
+	padding: 1.25em 1.75em;
+	margin: 1em 0 ;
+	min-width: 15em;
+}
+ul#filetoc {
+	display: block;
+	border: none;
+}
+#toc ul,
+.toc ul {
+	margin: 1em 0 0;
+	list-style: none;
+}
+#mw-content .toc h2 {
+	font-size: 1.2em;
+	font-family: @fonts;
+	margin: 0;
+	display: inline-block;
+	border-bottom-color: @grey;
+}
+.toctoggle {
+	color: @background3;
+}
+#toc li:last-child {
+	margin-bottom: .5em;
+}
+.toclevel-1 {
+	margin-bottom: .25em;
+}
+.mw-changeslist-legend,
+#mw-content .mw-search-profile-tabs,
+#mw-content fieldset#mw-searchoptions,
+table.wikitable {
+	border: none;
+	color: @text;
+	.box;
+}
+#mw-content .mw-search-profile-tabs {
+	padding: .5em;
+}
+
+table.wikitable > tr > th,
+table.wikitable > tr > td,
+table.wikitable > * > tr > th,
+table.wikitable > * > tr > td {
+	border: 1px solid @grey-bright;
+	padding: 0.5em;
+}
+
+table.wikitable > tr > th,
+table.wikitable > * > tr > th {
+	border: none;
+}
+
 
 /* Hidden stuff */
 
+#p-namespaces h3,
+#p-pagetools h3,
 #mw-site-navigation h2,
-#p-search h3,
-#p-personal h3 {
+#p-search h3 {
 	.hidden;
 }
diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less
index 58cdada..1055054 100644
--- a/resources/screen-desktop.less
+++ b/resources/screen-desktop.less
@@ -1,7 +1,7 @@
 @import "variables.less";
 
 .ts-inner {
-	max-width: 1300px;
+	max-width: 100em;
 	padding: 0 3em;
 	margin: auto;
 }
@@ -13,14 +13,16 @@
 #p-search,
 #mw-content {
 	margin-left: 12em;
-	margin-right: 12em;
+	margin-right: 18em;
 }
 #mw-related-navigation,
-#p-personal {
-	width: 12em;
+#user-tools {
+	width: 18em;
 	float: right;
 }
 
+/* Header */
+
 #mw-header-container {
 	position: fixed;
 	top: 0;
@@ -31,12 +33,37 @@
 	border-bottom: solid 1px @background-dark2;
 	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
 }
+.dropdown {
+	display: none;
+}
 
+#p-personal {
+	padding-left: 1.5em;
+}
+#p-personal h3 {
+	margin: 0;
+	padding: .55em 0 .45em 1.5em;
+	font-family: @fonts-secondary;
+	font-weight: normal;
+	font-size: 1.1em;
+	text-shadow: 0 -1px 0 @background-dark2;
+	.background-image-svg('images/user.svg', 'images/user.png');
+	background-position: 0% 10px;
+	background-repeat: no-repeat;
 
-/* BANNER */
+	span {
+		.background-image-svg('images/arrow-down-white.svg', 'images/arrow-down-white.png');
+		background-position: 100% 2px;
+		background-repeat: no-repeat;
+		padding-right: 1.35em;
+	}
+	&:hover {
+		cursor: pointer;
+	}
+}
 
 #p-logo-text {
-	width: 10em;
+	width: 11em;
 	text-align: center;
 	text-shadow: 0 -1px 0 @background-dark2;
 
@@ -50,7 +77,7 @@
 }
 
 
-/* SEARCH */
+/* Search */
 
 #simpleSearch {
 	box-shadow: inset 0 2px 2px 1px rgba(0, 0, 0, 0.1);
@@ -63,7 +90,7 @@
 	border: none;
 	margin: 0;
 	height: 2.1em;
-	padding: .65em 4.5em .45em 2em;
+	padding: .4em 4.5em .3em 2em;
 	box-shadow: none;
 	background: transparent;
 	width: 100%;
@@ -75,28 +102,156 @@
 	right: 1.5em;
 	width: 2.5em;
 	height: 2.5em;
-	border: none;
-	background: transparent;
-	text-indent: -99999px;
+	.icon;
 	.background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
 	background-position: 50% 40%;
-	background-repeat: no-repeat;
+	box-shadow: none;
 }
 
 
-/* CONTENT */
+/* Content */
 
 #mw-content-container {
 	margin-top: 3em;
-	padding-bottom: 1em;
+	padding-bottom: .5em;
 }
 #mw-content {
+	.box;
 	background: @background;
-	padding-top: 1em;
-	border: 1px @grey-bright;
-	border-style: none solid solid;
-	box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
+	padding: 1em 2em 3em;
 	overflow: hidden;
-	padding-right: 2em;
-	padding-left: 2em;
+}
+#page-header-links {
+	div,
+	ul,
+	li {
+		list-style: none;
+		display: inline-block;
+		margin: 0;
+		padding: 0;
+	}
+	li {
+		margin: .25em 0 1.5em;
+
+		&:hover {
+			border-bottom: solid 3px @grey;
+		}
+		&.selected {
+			border-bottom: solid 3px @blue;
+
+			a {
+				color: @text;
+			}
+		}
+	}
+	#p-namespaces {
+		float: left;
+
+		li {
+			margin-right: 1em;
+		}
+	}
+	#p-pagetools {
+		float: right;
+
+		li {
+			margin-left: 1em;
+		}
+	}
+}
+#ca-watch a,
+#ca-unwatch a {
+	.icon;
+	display: inline-block;
+	width: 1.4em;
+	height: 1.4em;
+	box-sizing: border-box;
+}
+#ca-watch a {
+	.background-image-svg('images/star.svg', 'images/star.png');
+}
+#ca-unwatch a {
+	.background-image-svg('images/star-filled.svg', 'images/star-filled.png');
+}
+
+/* Sidebars */
+
+.dropdown,
+#mw-site-navigation .sidebar-chunk,
+#mw-related-navigation .sidebar-chunk {
+	.box;
+	padding: 1.5em 1.5em 0;
+	margin: 1em;
+	line-height: 1.1;
+
+	ul,
+	li {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+	h3 {
+		font-weight: normal;
+		font-size: 1em;
+		margin: .25em 0 .75em 0;
+		padding-bottom: .15em;
+		border-bottom: solid 2px @grey;
+	}
+	ul {
+		margin-bottom: 2em;
+	}
+	li {
+		margin: 0 0 .35em;
+	}
+}
+
+#mw-site-navigation .sidebar-chunk {
+	margin-left: 0;
+}
+#mw-related-navigation .sidebar-chunk {
+	margin-right: 0;
+}
+
+/* Dropdowns */
+
+#p-personal {
+	position: relative;
+
+	&:hover .dropdown {
+		display: block;
+	}
+}
+
+.dropdown {
+	position: absolute;
+	padding: 1.5em 2em 0;
+	min-width: 8em;
+	top: 1.6em;
+	left: 0;
+}
+
+/* Footer */
+
+#mw-footer {
+	padding-top: .5em;
+	padding-bottom: 1em;
+
+	ul,
+	li {
+		margin: 1em 0;
+		list-style: none;
+		padding: 0;
+	}
+}
+#footer-places li {
+	display: inline;
+	padding-right: 1em;
+}
+#footer-icons {
+	float: right;
+	margin: 0 0 0 1em;
+
+	li {
+		margin: 0 0 1em 0;
+	}
 }
diff --git a/resources/variables.less b/resources/variables.less
index 7923666..8bbe005 100644
--- a/resources/variables.less
+++ b/resources/variables.less
@@ -3,6 +3,7 @@
 @text: #013;
 @background: #fff;
 @background2: #f3f3f3;
+@background3: #fcfcfc;
 
 @background-dark: #777;
 @background-dark2: #555;
@@ -11,7 +12,7 @@
 @link: @blue;
 @link-red: @red;
 
-@grey: #ccc;
+@grey: #ddd;
 @grey-bright: #eee;
 @grey-dark: #aaa;
 
@@ -46,3 +47,20 @@
 	position: absolute;
 	top: -9999px;
 }
+
+/* Icons - hides labels, but keep them accessible for screen-readers */
+.icon() {
+	text-indent: -99999px;
+	border: none;
+	background: transparent;
+	background-repeat: no-repeat;
+}
+
+.box {
+	background: @background3;
+	border: solid @grey-bright;
+	border-width: 1px 1px @border;
+	padding: 1.25em 1.75em;
+	box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.02);
+	overflow: auto;
+}
diff --git a/skin.json b/skin.json
index 5534791..109d740 100644
--- a/skin.json
+++ b/skin.json
@@ -1,6 +1,6 @@
 {
 	"name": "Timeless",
-	"version": "0.1",
+	"version": "0.3",
 	"author": "Isarra",
 	"url": "https://www.mediawiki.org/wiki/Skin:Timeless",
 	"descriptionmsg": "timeless-desc",