Initial structure

Change-Id: I6457449db49ae1eef083684db75d5280bf404381

TimelessTemplate.php

@@ -12,9 +12,34 @@ class TimelessTemplate extends BaseTemplate {
 		$this->html( 'headelement' );
 		?>
 		<div id="mw-wrapper">
+			<div id="mw-header-container" class="ts-container">
+			<div id="mw-header" class="ts-inner">
+				<div id="user-tools">
+					<?php $this->outputUserLinks(); ?>
+				</div>
 				<?php
-			$this->outputLogo();
+				$this->outputLogo( 'p-logo-text', 'text' );
+				$this->outputSearch();
 				?>
+			</div>
+			</div>
+
+			<div id="content-container" class="ts-container">
+			<div id="content-block" class="ts-inner">
+				<div id="mw-site-navigation">
+					<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">';
+						$this->outputSiteNavigation();
+					echo '</div>';
+					?>
+				</div>
+				<div id="mw-related-navigation">
+				</div>
+				<div id="content">
 				<div class="mw-body" role="main">
 					<?php
 					if ( $this->data['sitenotice'] ) {
@@ -56,22 +81,12 @@ class TimelessTemplate extends BaseTemplate {
 						?>
 					</div>
 				</div>
-
+				</div>
-			<div id="mw-navigation">
+			</div>
-				<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">
+			<div id="mw-footer-container" class="ts-container">
+			<div id="mw-footer" class="ts-inner">
 				<?php
 				foreach ( $this->getFooterLinks() as $category => $links ) {
 					?>
@@ -105,6 +120,7 @@ class TimelessTemplate extends BaseTemplate {
 				</ul>
 			</div>
 			</div>
+		</div>
 
 		<?php $this->printTrail() ?>
 		</body></html>
@@ -154,9 +170,12 @@ class TimelessTemplate extends BaseTemplate {
 	/**
 	 * Outputs the logo and (optionally) site title
 	 */
-	private function outputLogo( $id = 'p-logo', $imageonly = false ) {
+	private function outputLogo( $id = 'p-logo', $part = 'both' ) {
 		?>
 		<div id="<?php echo $id ?>" class="mw-portlet" role="banner">
+			<?php
+			if ( $part !== 'text' ) {
+				?>
 				<a
 					class="mw-wiki-logo"
 					href="<?php echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] )
@@ -164,7 +183,8 @@ class TimelessTemplate extends BaseTemplate {
 				echo Xml::expandAttributes( Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) )
 				?>></a>
 				<?php
-			if ( !$imageonly ) {
+			}
+			if ( $part !== 'image' ) {
 				?>
 				<a id="p-banner" class="mw-wiki-title" href="<?php echo htmlspecialchars( $this->data['nav_urls']['mainpage']['href'] ) ?>">
 					<?php echo $this->getMsg( 'sitetitle' )->escaped() ?>

resources/forms.less

@@ -60,7 +60,7 @@ td.mw-label {
 }
 
 fieldset {
-	border: solid @grey;
+	border: solid @grey-bright;
 	border-width: 1px 1px @border;
 	line-height: 1.3em;
 	margin: 1em 0;
@@ -127,7 +127,7 @@ textarea,
 	padding: .25em .35em;
 	border: solid 1px @grey;
 	margin: .5em 0;
-	box-shadow: inset 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
+	box-shadow: inset 0px 2px 1px 1px rgba(0, 0, 0, 0.05);
 	font-size: 1em;
 	min-height: 30px;
 }

resources/screen-common.less

@@ -9,6 +9,8 @@ body {
 	padding: 0;
 	color: @text;
 	background: @background;
+	font-size: 1em;
+	line-height: 1.3;
 }
 
 a {
@@ -41,7 +43,7 @@ a {
 	}
 }
 
-#mw-navigation h2,
+#mw-site-navigation h2,
 #p-search h3,
 #p-personal h3 {
 	.hidden;

resources/screen-desktop.less

@@ -1 +1,21 @@
 @import "variables.less";
+
+.ts-inner {
+	max-width: 1250px;
+	margin: auto;
+}
+#p-logo-text,
+#mw-site-navigation {
+	width: 12em;
+	float: left;
+}
+#p-search,
+#content {
+	margin-left: 14em;
+	margin-right: 14em;
+}
+#mw-related-navigation,
+#p-personal {
+	width: 12em;
+	float: right;
+}

resources/variables.less

@@ -7,8 +7,8 @@
 @link: @blue;
 @link-red: @red;
 
-@grey: #ddd;
+@grey: #ccc;
-@grey-bright: #f0f0f0;
+@grey-bright: #eee;
 @grey-dark: #aaa;
 
 @red: #b22;
@@ -27,10 +27,15 @@
 @link-red: @red;
 
 
+/* Flair */
+
 @fonts: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
 @border: .2em;
 @radius: .2em;
 
+
+/* Misc */
+
 /* To hide objects, but keep them accessible for screen-readers */
 .hidden() {
 	position: absolute;