From b8944ceeef7c4f42cdea3735ec96c71eaf52ef0f Mon Sep 17 00:00:00 2001
From: Tom Hutchison <Hutchy68@gmail.com>
Date: Wed, 4 Nov 2015 09:53:51 -0500
Subject: [PATCH 1/2] Code fixes, cleanup

---
 Pivot.skin.php               |   36 +-
 assets/stylesheets/pivot.css |   66 +-
 pivot.css                    | 1166 ----------------------------------
 pivot.php                    |   17 +-
 view/sidebar.php             |   18 +-
 5 files changed, 88 insertions(+), 1215 deletions(-)
 delete mode 100644 pivot.css

diff --git a/Pivot.skin.php b/Pivot.skin.php
index 617737a..0575e7d 100644
--- a/Pivot.skin.php
+++ b/Pivot.skin.php
@@ -45,7 +45,7 @@ class Skinpivot extends SkinTemplate {
 		$out->addModuleStyles('skins.pivot');
 	}
 
-	public function initPage( OutputPage $out ) {
+	public function initPage(OutputPage $out) {
 		global $wgLocalStylePath;
 		parent::initPage($out);
 
@@ -69,8 +69,8 @@ class pivotTemplate extends BaseTemplate {
 				$this->html('bodytext'); 
 				$out = ob_get_contents();
 				ob_end_clean();
-				$markers   = array("&lt;a", "&lt;/a", "&gt;");
-				$tags   = array("<a", "</a", ">");
+				$markers = array("&lt;a", "&lt;/a", "&gt;");
+				$tags = array("<a", "</a", ">");
 				$body = str_replace($markers, $tags, $out);
 				break;	
 			default:
@@ -79,14 +79,10 @@ class pivotTemplate extends BaseTemplate {
 		}
 		switch ($wgPivotFeatures['showFooterIcons']) {
 			case true:
-				$footerLeftClass = 'small-12 medium-8 large-9 columns';
-				$footerRightClass = 'small-12 medium-4 large-3 columns';
 				$poweredbyType = "icononly";
 				$poweredbyMakeType = 'withImage';
 				break;
 			default:
-				$footerLeftClass = 'small-12 medium-8 large-9 columns';
-				$footerRightClass = 'small-12 medium-4 large-3 columns';
 				$poweredbyType = "nocopyright";
 				$poweredbyMakeType = 'withoutImage';
 				break;	
@@ -96,7 +92,7 @@ class pivotTemplate extends BaseTemplate {
 <!-- START PIVOTTEMPLATE -->
 		<div class="off-canvas-wrap docs-wrap" data-offcanvas="">
 			<div class="inner-wrap">
-				<?php if ($wgPivotFeatures['fixedNavBar'] != false) echo "<div class='fixed'>";?>
+				<?php if ($wgPivotFeatures['fixedNavBar'] != false) echo "<div class='fixed'>"; ?>
 				<nav class="tab-bar">
 					<section id="left-nav-aside" class="left-small show-for-small">
 						<a class="left-off-canvas-toggle"><span id="menu-user"><i class="fa fa-navicon fa-lg"></i></span></a>
@@ -116,7 +112,7 @@ class pivotTemplate extends BaseTemplate {
 					<a class="right-off-canvas-toggle"><span id="menu-user"><i class="fa <?php if ($wgUser->isLoggedIn()): ?>fa-user<?php else: ?>fa-navicon<?php endif; ?> fa-lg"></i></span></a>
 					</section>
 				</nav>
-				<?php if ($wgPivotFeatures['fixedNavBar'] != false) echo "</div>";?>
+				<?php if ($wgPivotFeatures['fixedNavBar'] != false) echo "</div>"; ?>
 				    <aside class="left-off-canvas-menu">
       					<ul class="off-canvas-list">
 						
@@ -138,7 +134,7 @@ class pivotTemplate extends BaseTemplate {
 					  <ul class="off-canvas-list">
 					<?php if ($wgUser->isLoggedIn()): ?>
 						<li id="personal-tools"><label>Personal</label></li>
-						<?php foreach ( $this->getPersonalTools() as $key => $item ) { echo $this->makeListItem($key, $item); } ?>
+						<?php foreach ($this->getPersonalTools() as $key => $item) { echo $this->makeListItem($key, $item); } ?>
 							<?php else: ?>
 								<?php if (isset($this->data['personal_urls']['anonlogin'])): ?>
 									<li><a href="<?php echo $this->data['personal_urls']['anonlogin']['href']; ?>"><?php echo wfMessage( 'login' )->text() ?></a></li>
@@ -195,8 +191,8 @@ class pivotTemplate extends BaseTemplate {
 									<?php if ($wgUser->isLoggedIn() || $wgPivotFeatures['showActionsForAnon']): ?>
 										<a href="#" data-options="align:left" data-dropdown="drop1" class="button secondary small radius pull-right" id="drop"><i class="fa fa-navicon fa-lg"><span id="page-actions" class="show-for-medium-up">&nbsp;<?php echo wfMessage( 'actions' )->text() ?></span></i></a>
 										<ul id="drop1" class="tiny content f-dropdown" data-dropdown-content>
-											<?php foreach( $this->data['content_actions'] as $key => $item ) { echo preg_replace(array('/\sprimary="1"/','/\scontext="[a-z]+"/','/\srel="archives"/'),'',$this->makeListItem($key, $item)); } ?>
-											<?php wfRunHooks( SkinTemplateToolboxEnd, array( &$this, true ) );  ?>
+											<?php foreach($this->data['content_actions'] as $key => $item) { echo preg_replace(array('/\sprimary="1"/', '/\scontext="[a-z]+"/', '/\srel="archives"/'),'',$this->makeListItem($key, $item)); } ?>
+											<?php wfRunHooks(SkinTemplateToolboxEnd, array(&$this, true));  ?>
 										</ul>
 										<?php if ($wgUser->isLoggedIn()): ?>
 											<div id="echo-notifications"></div>
@@ -239,14 +235,14 @@ class pivotTemplate extends BaseTemplate {
 									<footer class="row">
 
 										<div id="footer">
-											<div id="footer-left" class="<?php echo $footerLeftClass;?>">
+											<div id="footer-left" class="small-12 medium-8 large-9 columns">
 											<ul id="footer-left">
-												<?php foreach ( $this->getFooterLinks( "flat" ) as $key ) { ?>
-													<li id="footer-<?php echo $key ?>"><?php $this->html( $key ) ?></li>
+												<?php foreach ($this->getFooterLinks("flat") as $key) { ?>
+													<li id="footer-<?php echo $key ?>"><?php $this->html($key) ?></li>
 												<?php } ?>									
 											</ul>
 											</div>	
-											<div id="footer-right-icons" class="<?php echo $footerRightClass;?>">
+											<div id="footer-right-icons" class="small-12 medium-4 large-3 columns">
 											<ul id="footer-right">
 												<li class="social-follow">
 													<?php if ($wgPivotFeatures['useAddThisFollow'] != false) { ?>
@@ -256,9 +252,9 @@ class pivotTemplate extends BaseTemplate {
 														</div>
 													<?php } ?>
 												</li>
-												<?php foreach ( $this->getFooterIcons( $poweredbyType ) as $blockName => $footerIcons ) { ?>
-													<li class="<?php echo $blockName ?>"><?php foreach ( $footerIcons as $icon ) { ?>
-														<?php echo $this->getSkin()->makeFooterIcon( $icon, $poweredbyMakeType ); ?>
+												<?php foreach ($this->getFooterIcons($poweredbyType) as $blockName => $footerIcons) { ?>
+													<li class="<?php echo $blockName ?>"><?php foreach ($footerIcons as $icon) { ?>
+														<?php echo $this->getSkin()->makeFooterIcon($icon, $poweredbyMakeType); ?>
 														<?php } ?>
 													</li>
 												<?php } ?>
@@ -282,7 +278,7 @@ class pivotTemplate extends BaseTemplate {
 		<?php $this->printTrail(); ?>
 
 			<?php if ($wgPivotFeatures['addThisFollowPUBID'] != '') { ?>
-				<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<?php echo $wgPivotFeatures['addThisPUBID'];?>" async="async">></script>
+				<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<?php echo $wgPivotFeatures['addThisPUBID']; ?>" async="async">></script>
 			<?php } ?>	
 		</body>
 		</html>
diff --git a/assets/stylesheets/pivot.css b/assets/stylesheets/pivot.css
index 73a7110..24123dc 100644
--- a/assets/stylesheets/pivot.css
+++ b/assets/stylesheets/pivot.css
@@ -2,6 +2,8 @@ body { line-height: 1.6em; font-size: 16px; }
 
 p, ul, ol, dl { font-size: 16px; }
 
+h4,h5,h6 {color: 2e2e2e;}
+
 #toc ul, .toc ul { font-size: 16px; }
 
 @media only screen and (min-width: 40.0625em) {
@@ -10,7 +12,7 @@ p, ul, ol, dl { font-size: 14px; }
 #toc ul, .toc ul { font-size:  13.3px; }
 }
 
-p, table { margin-bottom: 1em; max-width: 100%; }
+p, table { border: none; margin-bottom: 1em; max-width: 100%; }
 
 
 a.label:hover,
@@ -72,15 +74,23 @@ body.action-formedit .row.hide-on-form-edit { display: none;}
 }
 #p-cactions #drop1 a:hover {
     background-color: #eee;
-	color: darkslateblue;
+    color: darkslateblue;
 }
 #p-cactions > a.button {
 float:right; }
 
+/* Fix scaling issue for menu icon */
+@media only screen and (min-width: 40.0625em) {
+    #drop .fa.fa-navicon.fa-lg {
+    font-size: 1.25em;
+}
+
 span#page-actions {
-	font-size: .75em;
+    font-size: 0.85em;
     font-family: sans-serif;
-    vertical-align: top;
+    vertical-align: middle;
+    padding:0 0 0 10px;
+}
 }
 
 /* Make sure top bar is even more z-indx! */
@@ -98,11 +108,8 @@ color: #eee;
 section.middle.tab-bar-section a {
 color: #fff;
 }
-ul.off-canvas-list form#searchform {
-margin: 1em;
-}
 ul.off-canvas-list form#searchform-offcanvas {
-    margin: 1em;
+margin: 1em;
 }
 a.feedlink {
 background: none;
@@ -211,15 +218,12 @@ ul#drop1.f-dropdown {
     color: #222;
     border-bottom: 1px solid #eee;
 }
-
 .mw-content-ltr ul {
     margin: .5em 0 1em 2em;
 }
-
 ul.accordion {
 	margin: 0;
 }
-
 .columns ul.special li {
   float:none;
   width: 100%;
@@ -321,6 +325,22 @@ li.social-follow {
     font-weight: bold;
 }
 
+/* Fix Tables on narrow pages for Special Pages and Category Pages */
+@media screen and (max-width:782px) {
+    .ns-14 #mw-subcategories table td,
+    .ns-14 #mw-pages table td,
+    .ns--1 table.mw-specialpages-table td {
+    display: inline;
+}
+.ns-14 table,
+.ns--1 table {
+    overflow:hidden;
+}
+.ns-14 table ul,
+.ns--1 table ul {
+    margin: 0 0 0 2em;
+}
+}
 
 /* TABS */
 
@@ -852,7 +872,7 @@ body.mw-special-Userlogin h2.title {
 }
 
 /* Aside CSS */
-ul.off-canvas-list input#searchInput,
+ul.off-canvas-list input#searchInput-offcanvas,
 ul.off-canvas-list button.button.search {
 height: 2rem;
 margin: 0;
@@ -875,7 +895,8 @@ ul.side-nav .button {
     margin: 0;
 }
 ul.side-nav input[type="search"] {
-    height: 2.1em;
+    height: 1.9rem;
+    font-size: 0.9rem;
 }
 .side-nav li a:not(.button) {
 	padding: 0 0 0 .5em;
@@ -898,8 +919,9 @@ ul.off-canvas-list li a:hover {
 	background: #f1f0ff;
 }
 
-.side-nav li a:not(.button):hover {
-    background: #eeffee;
+.side-nav li a:not(.button):hover,
+.side-nav li a:not(.button):focus {
+    background: transparent;
     color: #0b0080;
 }
 
@@ -915,7 +937,6 @@ body {
 }
 li.name.logo {
     margin-bottom: 1em;
-    display: table;
     margin-right: auto;
     margin-left: auto;
 }
@@ -1145,4 +1166,15 @@ td.htmlform-tip {
 }
 .orbit-bullets {
     margin: 0 auto 30px auto !important;
-}
\ No newline at end of file
+}
+
+/* Block-Grid UL fixes */
+ul[class*="block-grid"] {
+    margin: 0;
+}
+
+/* WikiEditor Label Fix */
+.wikiEditor-ui-toolbar .label {
+    background: transparent;
+    color: #000;
+}
diff --git a/pivot.css b/pivot.css
deleted file mode 100644
index fec4920..0000000
--- a/pivot.css
+++ /dev/null
@@ -1,1166 +0,0 @@
-body { line-height: 1.6em; font-size: 16px; }
-
-p, ul, ol, dl { font-size: 16px; }
-
-h4,h5,h6 {color: 2e2e2e;}
-
-#toc ul, .toc ul { font-size: 16px; }
-
-@media only screen and (min-width: 40.0625em) {
-body { line-height: 1.6em; font-size: 14px; }
-p, ul, ol, dl { font-size: 14px; }
-#toc ul, .toc ul { font-size:  13.3px; }
-}
-
-p, table { border: none; margin-bottom: 1em; max-width: 100%; }
-
-
-a.label:hover,
-a.label:focus {
-  color: white;
-}
-
-a.label.new { background-color: #d0d0d0; }
-
-a.button.dropdown { float:right;}
-
-a {
-    text-decoration: none;
-    color: #0645ad;
-    background: none;
-}
-
-a:hover {
-	color: #0b0080;
-	text-decoration: underline;
-}
-
-h1.title a {
-    text-decoration: none;
-}
-
-/* ULS Override to force no display of background image */
-.uls-trigger {
-    background-image: none !important;
-}
-#pt-uls a.uls-trigger {
-    padding-left: .66667em !important;
-}
-
-/* Force FontAwesome to load in the top-nav, Foundation is overriding it with Helvetica. Ban Helvetica */
-.fa { font-family: 'FontAwesome' !important;  }
-
-/* Hide the page actions button for special pages (cuz there's nothing in it) */
-.mw-special-FormEdit a.button.dropdown, .ns-special a.button.dropdown { display:none; }
-.ns-special #p-cactions a#drop { display: none; }
-
-/* Hide some rows on form-edit (e.g. a thing's title) */
-body.action-formedit .row.hide-on-form-edit { display: none;}
-
-/* Move the MediaWiki notification area so it isn't on top of the Action menu */
-.mw-notification-area {
-  margin-top: 2em;
-}
-/* Also adjust z-index of action menu to force it on top */
-#p-cactions #drop1 {
-    z-index: 1000;
-    white-space: nowrap;
-    border: 1px solid cyan;
-}
-#p-cactions #drop1 a {
-    width: 100%;
-    text-align: left;
-    font-size: 14px;
-}
-#p-cactions #drop1 a:hover {
-    background-color: #eee;
-	color: darkslateblue;
-}
-#p-cactions > a.button {
-float:right; }
-
-span#page-actions {
-	font-size: .75em;
-    font-family: sans-serif;
-    vertical-align: top;
-}
-
-/* Make sure top bar is even more z-indx! */
-#toolbox-dropdown {
-  z-index: 10000000;
-}
-#personal-tools-dropdown {
-  z-index: 10000000;
-}
-
-/* off-canvas */
-section.middle.tab-bar-section a:hover {
-color: #eee;
-}
-section.middle.tab-bar-section a {
-color: #fff;
-}
-ul.off-canvas-list form#searchform-offcanvas {
-margin: 1em;
-}
-a.feedlink {
-background: none;
-}
-ul.off-canvas-list li label {
-font-size: .9em;
-}
-/* off-canvas end */
-
-/* Dropdown Icon Alignment */
-#drop-icon {
-  display: inline;
-  margin-right: 4px;
-}
-
-td.mw-submit a,
-.htmlform-tip,
-#mw-upload-permitted p {
-  font-size: 14px;
-}
-
-alert.label a {color: pink;}
-
-code {
-  font-weight: normal;
-  color: #222222;
-}
-
-small {
-  font-size: 80%;
-}
-
-h4.namespace.label {
-  font-size: small;
-  display:inline-block;
-}
-
-.label {
-  padding-bottom: 0.39em;
-}
-
-h2 span {
-  display: inline;
-}
-
-h2.title {
-  margin-bottom: 0.1em;
-}
-
-h3#tagline {
-  font-style: italic;
-  font-size: small;
-  margin-bottom: 0.5em;
-  color: #6f6f6f;
-}
-
-.clear_both {
-  clear:both;
-}
-
-.large-2 strong, .large-2 b {
-  display: block;
-}
-
-.large-2 strong, .large-2 b, table th {
-  font-size: 0.875em;
-  color: #4d4d4d;
-  font-weight: 500;
-}
-
-/* LAYOUT */
-
-.row .row {
-  margin-bottom: 0.9em;
-}
-
-div.small-10 .row {
-  margin: 1em 0 0 0;
-}
-
-div.small-9.columns textarea {
-  margin-bottom: 0.25em;
-}
-
-div {
-  line-height: 1.60em;
-}
-
-/* NOTICES, ALERTS, WARNINGS */
-div#userloginprompt, p#userloginlink {
-  font-size: 80%;
-
-}
-
-/* LISTS */
-
-ul#drop1.f-dropdown {
-  margin-left:0;
-  margin-top:.5em;
-  margin-bottom:.25em;
-  padding:.25em;
-}
-.f-dropdown li a {
-    display: block;
-    padding: 0.5em;
-    color: #222;
-    border-bottom: 1px solid #eee;
-}
-
-.mw-content-ltr ul {
-    margin: .5em 0 1em 2em;
-}
-
-.columns ul.special li {
-  float:none;
-  width: 100%;
-}
-
-.columns div#uploadtext ul {
-  list-style-type: disc;
-}
-
-.columns div#uploadtext ul li {
- float: none;
- width: 95%;
- margin-left: 2em;
-}
-
-#catlinks {
-    text-align: left;
-    border: 1px solid #ddd;
-    padding: .5em;
-    margin: 1em 0;
-	font-size: 95%;
-}
-
-#catlinks a.label {
-    font-size: 1em;
-}
-
-.catlinks li {border-left:none;}
-
-.mw-specialpages-table td ul.columns li {width: 50%;}
-
-.columns #mw-normal-catlinks ul li {
-  float: none;
-  width: auto;
-}
-
-#mw-normal-catlinks a.new {
-  color: white;
-}
-
-ul.vcard { padding: 0.5em 0.5em 0.55em 0.5em; }
-
-/*#mw-content-text .columns li {float:none;width:90%;}*/
-
-/* Footer Classes */
-
-footer.row ul.columns li { display: inline;float:none;}
-
-footer.row ul {
-  list-style-type: none;
-  margin: .5em 0em;
-}
-
-footer.row ul.views.columns li {
-  margin-right: 1em;
-}
-
-footer.row {
-    border-top: 1px solid #c3c3e5;
-    padding-top: 1em;
-    padding-bottom: 2em;
-    color: #333;
-    max-width: 100%;
-    background-color: #fff;
-}
-@media only screen and (min-width: 1025px) { footer.row { padding-bottom: .5em } }
-
-ul#footer-left {
-    text-align: left;
-    font-size: 12px;
-}
-ul#footer-right {
-    text-align: right;
-    font-size: 12px;
-}
-li#footer-privacy {
-    float: left;
-    margin-right: 2em;
-}
-li#footer-about {
-    float: left;
-    margin-right: 2em;
-}
-ul#footer-right li {
-    float: right;
-    margin: 0 0 .5em .5em;
-}
-
-/* FollowUs AddThis Tweaks */
-li.social-follow {
-    width: 100%;
-}
-.addthis_horizontal_follow_toolbox {
-    float: right;
-    margin-bottom: .5em;
-}
-.social-links p {
-    margin:0 .2em 0 0;
-    font-weight: bold;
-}
-
-/* Fix Tables on narrow pages for Special Pages and Category Pages */
-@media screen and (max-width:782px) {
-    .ns-14 #mw-subcategories table td,
-    .ns-14 #mw-pages table td,
-    .ns--1 table.mw-specialpages-table td {
-    display: inline;
-}
-.ns-14 table,
-.ns--1 table {
-    overflow:hidden;
-}
-.ns-14 table ul,
-.ns--1 table ul {
-    margin: 0 0 0 2em;
-}
-}
-
-/* TABS */
-
-#mw-content-text ul.tabs {
-  margin: 0
-}
-
-#mw-content-text ul.tabs.vertical {
-  margin: 0
-}
-
-/* HEADERS */
-
-h1,h2,h3,h4,h5,h6 {
-  margin-top: 0em;
-  line-height: 1em;
-}
-
-.page-Special_SpecialPages h2 {
-  margin-bottom: 0.5em;
-}
-
-
-.editsection {
-  font-weight: normal;
-  font-size: 0.4em;
-}
-
-p.title {
-  padding: 0.9375em;
-}
-
-/* TABLES */
-
-.mw-content-ltr table#toc {
-  float:right;
-  width: auto;
-}
-
-.mw-content-rtl table#toc {
-  float:left;
-  width: auto;
-}
-
-table.formtable {
-  border: none;
-}
-
-table td[align="right"] {text-align: right;}
-
-/* TURN OFF TABLE STRIPING FOR EDITFORMS */
-table.formedit tr.even,
-table.formedit tr.alt,
-table.formedit tr:nth-of-type(even) {
-  background: transparent;
-}
-
-
-table {
-  width: auto;
-}
-
-td.mw-label {
-  width: 20%;
-}
-
-td.mw-input {
-  width: 80%;
-}
-
-thead tr th {
-  cursor: pointer;
-}
-
-table.formtable th {
-  text-align: right !important;
-}
-
-td.smwpropname, th.smwpropname, td.smwspecname {
-  text-align:left;
-}
-
-
-table tbody tr td, table tr td {
-  line-height: 1.6em;
-}
-
-table.wikitable {
-  margin: 0em 0 1em 0;
-}
-
-table.wikitable > tr > th,
-table.wikitable > * > tr > th {
-  text-align: left;
-}
-
-table.wikitable > tr > th,
-table.wikitable > tr > td,
-table.wikitable > * > tr > th,
-table.wikitable > * > tr > td {
-  border: 2px #fff solid;
-  padding: 0.6em;
-}
-
-/* FORMS, INPUTS, FIELDSETS */
-
-.multipleTemplateInstance {
-  background-color: white !important;
-  border: none !important;
-  border-bottom: 1px dashed #999999 !important;
-}
-
-.multipleTemplateInstance table {
-  border: none !important;
-}
-
-.multipleTemplateAdder {
-  font-size: 0.9em;
-  padding: 0.4125em 0.5em 0.55em 0.5em;
-}
-
- .novalue {
-  color: #999999;
-  font-style:italic;
-  font-size:small;
-}
-
-input[type="file"],
-input[type="checkbox"],
-input[type="radio"],
-select {
-  padding: 5px;
-}
-
-input[type="file"],
-select {
-  padding: 5px;
-  border: 1px solid #cccccc;
-}
-
-.inputSpan select.createboxInput,
-.dateInput select.monthInput,
-input.hourInput,
-input.minuteInput,
-input.secondInput,
-input.dayInput,
-input.yearInput,
-input[name="*[* date][hour]"],
-input[name="*[* date][minute]"],
-input[name="*[* date][second]"] {
-  width: auto;
-  margin-right: 1em;
-}
-
-/*
-.inputSpan input.createboxInput {
-  width: 100%;
-}
-*/
-.inputSpan button,
-.inputSpan .button {
-  margin: -4px 0 0 0;
-  padding:0.37em 0.75em 0.6em 0.70em;
-}
-
-.ms-selectable input[type="text"] {
-  width: 100%;
-}
-
-nav.top-bar .button { margin-top: 0; font-size: 0.75rem;}
-nav.top-bar #searchInput { height: auto; padding:0.35rem 0.444rem; margin:0px; font-size: 0.75rem;}
-
-button.ui-button-icon-only {
-  height: 2.24em !important;
-}
-
-select {width:auto;}
-
-
-input[type="checkbox"].createboxInput {
-  width: auto;
-}
-
-label.checkboxLabel {
-  margin-right: 0.5em;
-}
-
-.edit_with_form {
-  margin: -2em 0 0 0;
-  float:right;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  display:inline;
-}
-
-input[type='file'] {
-  margin-top: 0.4em;
-}
-
-input:not([type]),
-textarea,
-p.meta {
-  margin-bottom: 4px;
-}
-
-label {
-  display: inline;
-  font-weight: normal;
-}
-
-.mw-input label { font-weight: normal; }
-
-#mw-content-text ul.SFI_timepicker_hours,
-#mw-content-text ul.SFI_timepicker_minutes {
-  list-style-type: none;
-}
-
-#mw-content-text ul.SFI_timepicker_hours li {
-  margin: 2px 2px;
-  padding: 4px;
-}
-
-.sminput.sminput-googlemaps3 p button {
-  padding-top: 0.35em;
-  padding-bottom: 0.6em;
-}
-
-li label.inline {
-  margin-bottom: 2px;
-  padding: 0;
-}
-
-button, .button {
-  margin: 0.5em 0;
-  padding: 0.3em 0.75em 0.4em 0.75em;
-}
-
-.top-bar .button.search {
-  top: 1px;
-  text-align: left;
-}
-
-.top-bar-section .dropdown {
-  z-index: 100;
-}
-
-input[type="submit"] {
-    background-color: #5da423;
-    border-color: #457a1a;
-    color: white;
-    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-    -webkit-transition: background-color 300ms ease-out;
-    -moz-transition: background-color 300ms ease-out;
-    transition: background-color 300ms ease-out;
-}
-
-input#wpPreview {
-    background-color: #e9e9e9;
-    border-color: #d0d0d0;
-    color: black;
-    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-    -webkit-transition: background-color 300ms ease-out;
-    -moz-transition: background-color 300ms ease-out;
-    transition: background-color 300ms ease-out;
-}
-
-.editButtons input[type="submit"] {
-  display: inline-block;
-}
-
-legend {
-  font-size: 0.875em;
-  color: #4d4d4d;
-  cursor: pointer;
-  display: block;
-  font-weight: 500;
-}
-
-fieldset {
-  line-height: 1.6em;
-  padding: 0 1.25em 1em 1.25em;
-  margin-top: 0;
-}
-
-span.smwbuiltin,
-span.smwttactiveinline span.smwbuiltin {
-  font-style: normal;
-}
-
-
-/* MW still generates a label column for checkboxes, this minimizes is */
-div.mw-htmlform-field-HTMLCheckField div.mw-label { height:0; }
-
-
-/* ZUBR IE8 FIXES */
-/* GRID: https://gist.github.com/zurbchris/5068210 */
-.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
-.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
-.lt-ie9 .row.large-collapse .column,
-.lt-ie9 .row.large-collapse .columns { padding: 0; }
-.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
-.lt-ie9 .row .row.large-collapse { margin: 0; }
-
-.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
-.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
-
-.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
-.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }
-
-.lt-ie9 .large-1,
-.lt-ie9 .row .large-1 { width: 8.33333%; }
-
-.lt-ie9 .large-2,
-.lt-ie9 .row .large-2 { width: 16.66667%; }
-
-.lt-ie9 .large-3,
-.lt-ie9 .row .large-3 { width: 25%; }
-
-.lt-ie9 .large-4,
-.lt-ie9 .row .large-4 { width: 33.33333%; }
-
-.lt-ie9 .large-5,
-.lt-ie9 .row .large-5 { width: 41.66667%; }
-
-.lt-ie9 .large-6,
-.lt-ie9 .row .large-6 { width: 50%; }
-
-.lt-ie9 .large-7,
-.lt-ie9 .row .large-7 { width: 58.33333%; }
-
-.lt-ie9 .large-8,
-.lt-ie9 .row .large-8 { width: 66.66667%; }
-
-.lt-ie9 .large-9,
-.lt-ie9 .row .large-9 { width: 75%; }
-
-.lt-ie9 .large-10,
-.lt-ie9 .row .large-10 { width: 83.33333%; }
-
-.lt-ie9 .large-11,
-.lt-ie9 .row .large-11 { width: 91.66667%; }
-
-.lt-ie9 .large-12,
-.lt-ie9 .row .large-12 { width: 100%; }
-
-.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
-.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
-.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
-.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
-.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
-.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
-.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
-.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
-.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
-.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }
-
-.lt-ie9 .pull-2 { right: 16.66667%; }
-.lt-ie9 .pull-3 { right: 25%; }
-.lt-ie9 .pull-4 { right: 33.33333%; }
-.lt-ie9 .pull-5 { right: 41.66667%; }
-.lt-ie9 .pull-6 { right: 50%; }
-.lt-ie9 .pull-7 { right: 58.33333%; }
-.lt-ie9 .pull-8 { right: 66.66667%; }
-.lt-ie9 .pull-9 { right: 75%; }
-.lt-ie9 .pull-10 { right: 83.33333%; }
-
-.lt-ie9 .push-2 { left: 16.66667%; }
-.lt-ie9 .push-3 { left: 25%; }
-.lt-ie9 .push-4 { left: 33.33333%; }
-.lt-ie9 .push-5 { left: 41.66667%; }
-.lt-ie9 .push-6 { left: 50%; }
-.lt-ie9 .push-7 { left: 58.33333%; }
-.lt-ie9 .push-8 { left: 66.66667%; }
-.lt-ie9 .push-9 { left: 75%; }
-.lt-ie9 .push-10 { left: 83.33333%; }
-
-/* Nicolas Gallagher's micro clearfix */
-.lt-ie9 .row { *zoom: 1; }
-.lt-ie9 .row:before, .row:after { content: " "; display: table; }
-.lt-ie9 .row:after { clear: both; }
-/* END IE8 GRID */
-
-.lt-ie9 .hide-for-small { display: block !important; }
-
-/* TOP NAV */
-.lt-ie9 .top-bar-section {
-  display:block;
-}
-
-.lt-ie9 .top-bar-section ul {
-  height: auto;
-  width: 100%;
-}
-
-.lt-ie9 .top-bar .top-bar-section ul,
-.lt-ie9 .top-bar .top-bar-section ul li {
-  float: left;
-  display: inline;
-}
-/* END OTHER IE8 FIXES */
-
-/* UNTIL I CAN DETERMINE WHY toolboxend GENERATES AN EMPTY <li> IN THE MENU, I'M HIDING IT */
-#p-toolboxend { display:none;}
-
-
-/* Jamie's Header Hider */
-body.page-Main_Page h1.firstHeading,
-body.page-Main_Page #siteSub,
-body.page-Extension_Main_Page h1.firstHeading,
-body.page-Extension_Main_Page #siteSub,
-body.page-Skin_Main_Page h1.firstHeading,
-body.page-Skin_Main_Page #siteSub,
-body.page-Farm_Main_Pageh1.firstHeading,
-body.page-Farm_Main_Page #siteSub,
-body.mw-special-Userlogin h2.title {
-  display:none;
-}
-
-/* Don't like the black top bar? Copy this into your Common.css and change the colors
-.top-bar,
-.top-bar-section ul,
-.top-bar-section ul li.active > a,
-.top-bar-section li a:not(.button),
-.top-bar-section .has-form,
-.top-bar.expanded .title-area  {
-   background: black;
-   color: white;
-}
-
-.top-bar-section > ul > .divider,
-.top-bar-section > ul > [role="separator"] {
-  border-color: black;
-}
-*/
-
-/* Add improved styling for the Echo extension */
-
-#echo-notifications {
-  float: right;
-  display: inline-block;
-  margin: .5em 1em;
-}
-
-#echo-notifications #pt-notifications {
-  position: relative;
-  list-style: none;
-}
-
-#echo-notifications #pt-notifications .mw-echo-notifications-badge {
-  width: 30px;
-  height: 35px;
-  text-align: center;
-  border-radius: 6px;
-  margin: 0;
-  padding:6px;
-}
-
-#echo-notifications #pt-notifications a.mw-echo-short-link .mw-badge {
-  margin:0;
-  padding:6px;
-}
-
-#echo-notifications #pt-notifications .mw-badge-content {
-  font-size: 1.3em;
-  line-height: 1.1;
-}
-
-#echo-notifications .mw-echo-overlay-pokey {
-  top: 30px;
-  left: -1px;
-}
-
-#echo-notifications .mw-echo-overlay {
-  left: -185px;
-  width: 300px;
-  top: 40px;
-}
-
-#echo-notifications .mw-echo-overlay-title {
-  padding: 10px;
-}
-
-#echo-notifications .mw-echo-icon {
-  margin: 5px;
-}
-
-#echo-notifications a.mw-echo-short-link .mw-badge {
-  margin-left: 0;
-}
-
-#echo-notifications #mw-echo-overlay-pref-link {
-  background-image:none;
-  font-size: 14px;
-  padding-left:0;
-  border-left:none;
-}
-
-#echo-notifications #mw-echo-overlay-link {
-  padding: 10px 0px 10px 15px;
-  background-position: left 50%;
-  border-right: none;
-  margin-right:0;
-}
-
-#echo-notifications .mw-echo-dismiss {
-  padding: 10px;
-  font-size: .8em;
-  min-width: 100%;
-}
-
-#echo-notifications .mw-echo-notification {
-  overflow: visible;
-}
-
-#echo-notifications .mw-echo-title {
-  max-width: 99%;
-}
-
-/* Make Echo extension more mobile friendly on small widths */
-
-@media only screen and (min-width: 550px) {
-#echo-notifications .mw-echo-overlay { left: -420px; width: 450px; }
-#echo-notifications #mw-echo-overlay-pref-link { padding: 10px 0 10px 30px; }
-#echo-notifications #mw-echo-overlay-link { border-right: 1px solid #DDDDDD; margin-right: 2em; }
-}
-
-/* Aside CSS */
-ul.off-canvas-list input#searchInput-offcanvas,
-ul.off-canvas-list button.button.search {
-height: 2rem;
-margin: 0;
-}
-
-/* max-width row */
-.row {
-	max-width: 100%;
-}
-
-#p-cactions {
-    padding-top: 1.5em;
-    padding-bottom: .5em;
-    background-color: #fff;
-    border-left: 1px solid #ccc;
-    border-right: 1px solid #ccc;
-}
-
-ul.side-nav .button {
-    margin: 0;
-}
-ul.side-nav input[type="search"] {
-    height: 2.1em;
-}
-.side-nav li a:not(.button) {
-	padding: 0 0 0 .5em;
-	color: #0645ad;
-}
-ul.off-canvas-list li label {
-	background: #c3c3e5;
-	border: none;
-	color: #222;
-}
-ul.off-canvas-list li a {
-	border: none;
-	background: transparent;
-	color: #8c489f;
-}
-ul.off-canvas-list li a:hover {
-    background: #eeffee;
-}
-.right-off-canvas-menu, .left-off-canvas-menu {
-	background: #f1f0ff;
-}
-
-.side-nav li a:not(.button):hover {
-    background: #eeffee;
-    color: #0b0080;
-}
-
-ul.side-nav label {
-    font-variant: small-caps;
-    font-size: 1.2em;
-    font-weight: bold;
-    border: none;
-    display: block;
-}
-body {
-	background-color: #eee;
-}
-li.name.logo {
-    margin-bottom: 1em;
-    display: table;
-    margin-right: auto;
-    margin-left: auto;
-}
-@media only screen and (min-width: 642px) {
-	.tab-bar-section.middle { left: .8125rem; text-align: left; }
-}
-.tab-bar {
-	background: #443266;
-}
-
-/* TOC */
-#toc #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle {
-    text-align: center;
-}
-#toc ul, .toc ul {
-    list-style-type: none;
-    list-style-image: none;
-    margin-left: 1em;
-	margin-right: 1em;
-    padding: 0;
-    text-align: left;
-}
-#toctitle h2 {
-    font-size: 16px;
-    display: inline;
-    font-weight: bold;
-    font-family: sans-serif;
-	border: none;
-}
-#toc, .toc, .mw-warning {
-    border: 1px solid #aaa;
-    background-color: #f9f9f9;
-}
-#toc {
-	display:inline-block;
-}
-
-span#menu-user {
-    display: block;
-    width: 100%;
-    margin: 0 .9em;
-    color: #fff;
-}
-
-span#nav-main {
-    display: block;
-    width: 100%;
-    margin: 0 .9em;
-    color: #fff;
-}
-
-#sidebar ul a {
-    font-size: 14px;
-}
-
-.tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4 {
-    font-size: 1.5em;
-    font-weight: 400;
-    line-height: 1.8em;
-}
-section.right-small {
-    border-left: none;
-}
-section.left-small {
-    border-right: none;
-}
-
-h5.subtitle {
- font-size:.80em !important;
-}
-h4.namespace.label {
-   padding:0.25em;
-   font-size:1.1em !important;
-   font-weight:normal;
-   background-color: #2284a1;
-}
-
-.mw-content-ltr h2 {
-    display: block;
-    border-bottom: 1px solid #ddd;
-    overflow: hidden;
-}
-
-h2.title {
- font-size:1.65em;
- padding-bottom: 0em;
- margin-top:.5em;
-}
-
-h1, h2, h3, h4, h5, h6 { line-height: 1.4; }
-
-h1 {
-  font-size: 1.70em; }
- 
-h2 {
-  font-size: 1.45em; }
- 
-h3 {
-  font-size: 1.30em; }
- 
-h4 {
-  font-size: 1.18em; }
- 
-h5 {
-  font-size: 1.08em; }
-
-@media only screen and (min-width: 40.0625em) {
-h1 { font-size: 1.80em; }
-h2 { font-size: 1.55em; }
-h3 { font-size: 1.40em; }
-h4 { font-size: 1.24em; }
-h5 { font-size: 1.16em; }
-h2.title { font-size:1.8em; }
-}
-
-/* Preferences Fixes */
-
-#preftoc li a {
-color: white;
-padding: .25em .5em;
-}
-#preftoc li a:hover {
-background: aqua;
-color: white;
-}
-#preftoc li {
-margin: 2px;
-display:inline-block;
-float: none;
-padding: 1px;
-position: relative;
-list-style-type: none;
-list-style-image: none;
-z-index: 3;
-border-radius: 3px;
-font-size: .85em;
-background: #142849;
-border:0;
-color: white;
-}
- 
-#preftoc li a {
-color: white;
-}
- 
-#preftoc li a:hover {
-background: #2ba6cb;
-}
-ul#preftoc {
-margin: auto;
-text-align: center;
-}
-#preftoc > li.selected {
-background: #2C58A1;
-box-shadow: 2px 2px 5px 2px rgba(50, 138, 64, 0.54);
-}
-#preftoc li.selected a {
-cursor: default;
-text-decoration: none;
-}
-#preferences table {
-min-width: 100%;
-}
-#preftoc {
-    margin: 0;
-	padding: 0;
-	width: 100%;
-	clear: both;
-}
-#preftoc a:active {
-	display: block;
-	color: #000;
-	padding: 0 .7em;
-	position: relative;
-	text-decoration: none;
-}
-#preftoc li.selected a {
-	cursor: default;
-	text-decoration: none;
-}
-#preferences {
-	margin: 0;
-	clear: both;
-	background-color: #FFF;
-	border: none;
-}
-.prefsection {
-	border: none;
-	padding: 0;
-	margin: 0;
-}
-.prefsection legend {
-	font-weight: bold;
-}
-.prefsection table, .prefsection legend {
-	background-color: #F9F9F9;
-}
-#preferences legend.mainLegend {
-display: none;
-} 
-#preferences fieldset legend {
-	font-weight: bold;
-	padding: 0 .25em;
-	margin: 0;
-	margin: 0 .25em 0 1em;
-	background:#FFF;
-}
-td.htmlform-tip {
-	font-size: .8em;
-	padding: .2em 2em;
-	color: #666;
-	border: 1px solid #eeeffe;
-	background: #eeeffe;
-}
-.preferences-login {
-	clear: both;
-	margin-bottom: 1.5em;
-}
-.prefcache {
-	font-size: 90%;
-	margin-top: 1em;
-}
-
-/* Orbit Slider Overrides for MW */
-.orbit-container .orbit-slides-container img {
-    width: 100%;
-}
-.orbit-bullets {
-    margin: 0 auto 30px auto !important;
-}
-
-/* Block-Grid UL fixes */
-ul[class*="block-grid"] {
-    margin: 0;
-}
-
-
diff --git a/pivot.php b/pivot.php
index 8a468d5..8111681 100644
--- a/pivot.php
+++ b/pivot.php
@@ -3,15 +3,16 @@
 /**
  * Pivot Skin
  *
- * @file
+ * @file Since Version 1.0
  * @ingroup Skins
  * @author Garrick Van Buren, Jamie Thingelstad
+ * @author Tom Hutchison
  * @license 2-clause BSD
  */
 
 if ( ! defined('MEDIAWIKI'))
 {
-	die("Wiki Wonders What You're Doing");
+	die("Not Directly Called So What Are You Doing");
 }
 
 
@@ -35,12 +36,12 @@ $wgExtensionMessagesFiles['SkinPivot'] = __DIR__.'/Pivot.i18n.php';
 
 $wgResourceModules['skins.pivot'] = array(
 	'styles'         => array(
-    	'pivot/assets/stylesheets/normalize.css',
-        'pivot/assets/stylesheets/font-awesome.css',
-    	'pivot/assets/stylesheets/foundation.css',
-    	'pivot/assets/stylesheets/pivot.css',
-        'pivot/assets/stylesheets/pivot-print.css',
-    	'pivot/assets/stylesheets/jquery.autocomplete.css'
+		'pivot/assets/stylesheets/normalize.css',
+		'pivot/assets/stylesheets/font-awesome.css',
+		'pivot/assets/stylesheets/foundation.css',
+		'pivot/assets/stylesheets/pivot.css',
+		'pivot/assets/stylesheets/pivot-print.css',
+		'pivot/assets/stylesheets/jquery.autocomplete.css'
     ),
     'scripts'        => array(
         'pivot/assets/scripts/vendor/jquery.cookie.js',
diff --git a/view/sidebar.php b/view/sidebar.php
index fccf2ee..66f8798 100644
--- a/view/sidebar.php
+++ b/view/sidebar.php
@@ -1,16 +1,26 @@
 <?php
 
+/**
+ * Pivot Skin
+ *
+ * @file Builds the Sidebar reducing code duplication
+ * @since Version 1.0
+ * @ingroup Skins
+ * @author Tom Hutchison
+ * @license 2-clause BSD
+ */
+
 if ( ! defined('MEDIAWIKI'))
 {
-	die("Wiki Wonders What You're Doing");
+	die("Not Directly Called So What Are You Doing?");
 }
 		
-	foreach ( $this->getSidebar() as $boxName => $box ) { if ( ($box['header'] != wfMessage( 'toolbox' )->text())  ) { ?>
+	foreach ($this->getSidebar() as $boxName => $box) { if ( ($box['header'] != wfMessage( 'toolbox' )->text()) ) { ?>
 		<li id='<?php echo Sanitizer::escapeId( $box['id'] ) ?>'<?php echo Linker::tooltip( $box['id'] ) ?>>
 			<li><label><?php echo htmlspecialchars( $box['header'] ); ?></label></li>
 				<?php if ( is_array( $box['content'] ) ) { ?>
-						<?php foreach ( $box['content'] as $key => $item ) { echo $this->makeListItem( $key, $item ); } ?>
+						<?php foreach ($box['content'] as $key => $item) { echo $this->makeListItem($key, $item); } ?>
 							<?php } } ?>
 								<?php } ?>
 			<li><label>Toolbox</label></li>
-				<?php foreach ( $this->getToolbox() as $key => $item ) { echo $this->makeListItem($key, $item); } ?>
\ No newline at end of file
+				<?php foreach ($this->getToolbox() as $key => $item) { echo $this->makeListItem($key, $item); } ?>
\ No newline at end of file

From c61e161cae22cd604290380d16832a53808e2af6 Mon Sep 17 00:00:00 2001
From: Tom Hutchison <Hutchy68@gmail.com>
Date: Wed, 4 Nov 2015 10:30:39 -0500
Subject: [PATCH 2/2] Might as well add the language shim and start prepping
 for MW upgrade to 1.23+ versions

---
 Pivot.i18n.php | 91 ++++++++++++++++----------------------------------
 i18n/ar.json   | 11 ++++++
 i18n/de.json   | 11 ++++++
 i18n/en.json   | 11 ++++++
 i18n/es.json   | 11 ++++++
 i18n/fr.json   | 11 ++++++
 i18n/nl.json   | 11 ++++++
 pivot.php      |  4 ++-
 8 files changed, 97 insertions(+), 64 deletions(-)
 create mode 100644 i18n/ar.json
 create mode 100644 i18n/de.json
 create mode 100644 i18n/en.json
 create mode 100644 i18n/es.json
 create mode 100644 i18n/fr.json
 create mode 100644 i18n/nl.json

diff --git a/Pivot.i18n.php b/Pivot.i18n.php
index 3e8eb0b..be7ccf3 100644
--- a/Pivot.i18n.php
+++ b/Pivot.i18n.php
@@ -1,70 +1,35 @@
 <?php
-
 /**
- * Internationalization file for skin Pivot.
+ * This is a backwards-compatibility shim, generated by:
+ * https://git.wikimedia.org/blob/mediawiki%2Fcore.git/HEAD/maintenance%2FgenerateJsonI18n.php
  *
- * @file
- * @ingroup Skins
+ * Beginning with MediaWiki 1.23, translation strings are stored in json files,
+ * and the EXTENSION.i18n.php file only exists to provide compatibility with
+ * older releases of MediaWiki. For more information about this migration, see:
+ * https://www.mediawiki.org/wiki/Requests_for_comment/Localisation_format
+ *
+ * This shim maintains compatibility back to MediaWiki 1.17.
  */
-
 $messages = array();
+if ( !function_exists( 'wfJsonI18nShimd9f8f6c360c3cca9' ) ) {
+	function wfJsonI18nShimd9f8f6c360c3cca9( $cache, $code, &$cachedData ) {
+		$codeSequence = array_merge( array( $code ), $cachedData['fallbackSequence'] );
+		foreach ( $codeSequence as $csCode ) {
+			$fileName = dirname( __FILE__ ) . "/i18n/$csCode.json";
+			if ( is_readable( $fileName ) ) {
+				$data = FormatJson::decode( file_get_contents( $fileName ), true );
+				foreach ( array_keys( $data ) as $key ) {
+					if ( $key === '' || $key[0] === '@' ) {
+						unset( $data[$key] );
+					}
+				}
+				$cachedData['messages'] = array_merge( $data, $cachedData['messages'] );
+			}
 
-/** English
- * @author Garrick Van Buren
- */
-$messages['en'] = array(
-	'skinname-pivot' => 'Pivot',
-	'pivot-desc' => 'A mobile skin which "Pivots" seamlessly to any size display.',
-	'pivot-browsermsg' => 'may not look as expected in this version of Internet Explorer. We recommend you upgrade to a newer version of Internet Explorer or switch to a browser like Firefox or Chrome.',
-	'pivot-menutitle' => 'Menu'
-);
+			$cachedData['deps'][] = new FileDependency( $fileName );
+		}
+		return true;
+	}
 
-/** German (Deutsch)
- * @author Kghbln
- */
-$messages['de'] = array(
-	'skinname-pivot' => 'Pivot',
-	'pivot-desc' => 'Stellt eine Benutzeroberfläche bereit, die die Inhalte des Wikis betont',
-	'pivot-browsermsg' => 'sieht in dieser Version des Internet Explorers nicht wie gewünscht aus. Es wird ein Upgrade des Internet Explorers oder der Umstieg auf einen Browser wie Firefox oder Chrome empfohlen.',
-	'pivot-menutitle' => 'Menü'
-);
-
-/** Spanish (español)
- * @author Manuel Rubio 
- */
-$messages['es'] = array(
-	'skinname-pivot' => 'Pivot',
-	'pivot-desc' => 'Provee una plantilla que se centra en resaltar en primer plano el contenido.',
-	'pivot-browsermsg' => 'puede verse diferente a lo esperado en esta versión de Internet Explorer le recomendamos que se actualice a una versión más reciente, o cambie a un navegador como Firefox o Chrome.',
-	'pivot-menutitle' => 'Menu'
-);
-
-/** Dutch (nederlands)
- * @author Marijke Stuivenberg
- */
-$messages['nl'] = array(
-		'skinname-pivot' => 'Pivot',
-		'pivot-desc' => 'Biedt een uiterlijk dat er voor zorgt dat de inhoud op de voorgrond wordt weergegeven',
-		'pivot-browsermsg' => 'wordt mogelijk niet goed weergegeven in deze versie van Internet Explorer. Aanbevolen wordt te upgraden naar een nieuwere versie van Internet Explorer of om te schakelen naar een browser zoals Firefox of Chrome.',
-		'pivot-menutitle' => 'Menu'
-);
-
-/** Arabic
- * @author النعيمي باشا
- */
-$messages['ar'] = array(
-	'skinname-pivot' => 'Pivot',
-	'pivot-desc' => 'نوفر مظهر يركز على وضع محتواك في المقدمة',
-	'pivot-browsermsg' => 'ربما يظهر بشكل غير مقبول في هذه النسخة من انترنت اكسبلورر. ننصحك بالترقية إلى إصدار أحدث لانترنت اكسبلورر أو التغير إلى متصفح مثل فايرفوكس أو كروم.',
-	'pivot-menutitle' => 'قائمة'
-);
-
-/** French
- * @author MATsxm
- */
-$messages['fr'] = array(
-	'skinname-pivot' => 'Pivot',
-	'pivot-desc' => 'Un skin pour mobiles qui permet un affichage du contenu pour tous types d\'affichages.',
-	'pivot-browsermsg' => 'l\'affichage sur cette version d\'Internet Explorer peut être altéré. Nous vous recommandons de la mettre à jour niveau vers une version plus récente d\Internet Explorer ou de passer à un autre navigateur tel que Firefox ou Chrome.',
-	'pivot-menutitle' => 'Menu'
-);
+	$GLOBALS['wgHooks']['LocalisationCacheRecache'][] = 'wfJsonI18nShimd9f8f6c360c3cca9';
+}
diff --git a/i18n/ar.json b/i18n/ar.json
new file mode 100644
index 0000000..205c1b3
--- /dev/null
+++ b/i18n/ar.json
@@ -0,0 +1,11 @@
+{
+	"@metadata": {
+		"authors": [
+			"النعيمي باشا"
+		]
+	},
+	"skinname-pivot": "Pivot",
+	"pivot-desc": "نوفر مظهر يركز على وضع محتواك في المقدمة",
+	"pivot-browsermsg": "ربما يظهر بشكل غير مقبول في هذه النسخة من انترنت اكسبلورر. ننصحك بالترقية إلى إصدار أحدث لانترنت اكسبلورر أو التغير إلى متصفح مثل فايرفوكس أو كروم.",
+	"pivot-menutitle": "قائمة"
+}
diff --git a/i18n/de.json b/i18n/de.json
new file mode 100644
index 0000000..5619b49
--- /dev/null
+++ b/i18n/de.json
@@ -0,0 +1,11 @@
+{
+	"@metadata": {
+		"authors": [
+			"Kghbln"
+		]
+	},
+	"skinname-pivot": "Pivot",
+	"pivot-desc": "Stellt eine Benutzeroberfläche bereit, die die Inhalte des Wikis betont",
+	"pivot-browsermsg": "sieht in dieser Version des Internet Explorers nicht wie gewünscht aus. Es wird ein Upgrade des Internet Explorers oder der Umstieg auf einen Browser wie Firefox oder Chrome empfohlen.",
+	"pivot-menutitle": "Menü"
+}
diff --git a/i18n/en.json b/i18n/en.json
new file mode 100644
index 0000000..4b10201
--- /dev/null
+++ b/i18n/en.json
@@ -0,0 +1,11 @@
+{
+	"@metadata": {
+		"authors": [
+			"Garrick Van Buren"
+		]
+	},
+	"skinname-pivot": "Pivot",
+	"pivot-desc": "A mobile skin which \"Pivots\" seamlessly to any size display.",
+	"pivot-browsermsg": "may not look as expected in this version of Internet Explorer. We recommend you upgrade to a newer version of Internet Explorer or switch to a browser like Firefox or Chrome.",
+	"pivot-menutitle": "Menu"
+}
diff --git a/i18n/es.json b/i18n/es.json
new file mode 100644
index 0000000..d4a0257
--- /dev/null
+++ b/i18n/es.json
@@ -0,0 +1,11 @@
+{
+	"@metadata": {
+		"authors": [
+			"Manuel Rubio "
+		]
+	},
+	"skinname-pivot": "Pivot",
+	"pivot-desc": "Provee una plantilla que se centra en resaltar en primer plano el contenido.",
+	"pivot-browsermsg": "puede verse diferente a lo esperado en esta versión de Internet Explorer le recomendamos que se actualice a una versión más reciente, o cambie a un navegador como Firefox o Chrome.",
+	"pivot-menutitle": "Menu"
+}
diff --git a/i18n/fr.json b/i18n/fr.json
new file mode 100644
index 0000000..1267534
--- /dev/null
+++ b/i18n/fr.json
@@ -0,0 +1,11 @@
+{
+	"@metadata": {
+		"authors": [
+			"MATsxm"
+		]
+	},
+	"skinname-pivot": "Pivot",
+	"pivot-desc": "Un skin pour mobiles qui permet un affichage du contenu pour tous types d'affichages.",
+	"pivot-browsermsg": "l'affichage sur cette version d'Internet Explorer peut être altéré. Nous vous recommandons de la mettre à jour niveau vers une version plus récente d\\Internet Explorer ou de passer à un autre navigateur tel que Firefox ou Chrome.",
+	"pivot-menutitle": "Menu"
+}
diff --git a/i18n/nl.json b/i18n/nl.json
new file mode 100644
index 0000000..128db34
--- /dev/null
+++ b/i18n/nl.json
@@ -0,0 +1,11 @@
+{
+	"@metadata": {
+		"authors": [
+			"Marijke Stuivenberg"
+		]
+	},
+	"skinname-pivot": "Pivot",
+	"pivot-desc": "Biedt een uiterlijk dat er voor zorgt dat de inhoud op de voorgrond wordt weergegeven",
+	"pivot-browsermsg": "wordt mogelijk niet goed weergegeven in deze versie van Internet Explorer. Aanbevolen wordt te upgraden naar een nieuwere versie van Internet Explorer of om te schakelen naar een browser zoals Firefox of Chrome.",
+	"pivot-menutitle": "Menu"
+}
diff --git a/pivot.php b/pivot.php
index 8111681..6913bab 100644
--- a/pivot.php
+++ b/pivot.php
@@ -32,7 +32,9 @@ $wgValidSkinNames['pivot'] = 'Pivot';
 
 $wgAutoloadClasses['SkinPivot'] = __DIR__.'/Pivot.skin.php';
 
-$wgExtensionMessagesFiles['SkinPivot'] = __DIR__.'/Pivot.i18n.php';
+$wgMessagesDirs['SkinPivot'] = __DIR__ . '/i18n';
+
+$wgExtensionMessagesFiles['SkinPivot'] = __DIR__ . '/Pivot.i18n.php';
 
 $wgResourceModules['skins.pivot'] = array(
 	'styles'         => array(