Athena/TopBarPrototype

So I was looking at Athena, and that thing looks really cool, and I felt like fiddling with some css and js, so...

...fiddles with css and js...

...So now I've gotten as far as the pics at Athena let. I plan to try to maintain this and keep it up to date with whatever design documents and images get uploaded, as well as fiddle with it whenever I get an idea of my own.

Summary of content: HTML, CSS, and JS for the top-bar, the bottom-bar, the "You" menu, and the footer. JS handles section expanding, the "sliding" of the top and bottom bars (with "locking" the bottom bar at the bottom of the page), search suggestions (with history suggestions), menu expanding. CSS also for non-signed-in-view. CSS background-images are limited to those uploaded by Jorm so far. No JS libraries used, assumed HTML is minimal. (Total JS 1.78Kb, CSS 1.7Kb) Additional things at the bottom: JS for handling if there's ever a way to pull section content from the api based on an element's id in the page, and CSS and HTML for the login page.

I'm not in any position to be able to make this stuff go anywhere by myself (I don't know PHP, and don't have SVN access or whatever), but I'm going to keep fiddling with it anyway, even if it's probably useless. Meh.

So the CSS, HTML, and JS is below. If you want to sort of see what it looks like by viewing it on a desktop browser, go to a random mobile page (say, http://en.wikipedia.org/w/index.php?title=Zebra&useformat=mobile ), (make sure you're not using the "beta", you can use ?mobileaction=opt_out_mobile_site to opt-out) and copy the following line into a javascript console:

document.body.onmousedown=document.body.ontouchstart=window.onload=null;for(var i=0,h=document.getElementsByTagName('h2');i<h.length;i++){h[i].removeAttribute("onclick");h[i].removeAttribute("class")}document.body.innerHTML += ' #mw-top-bar{top:0px;height:45px;}#mw-bottom-bar{bottom:0px;height:40px;}#mw-top-bar,#mw-bottom-bar{position:fixed;width:100%;color:#FFFFFF;-webkit-transition:all 0.3s;border-spacing:0px;}#mw-top-bar,#bottom-bar-left,#bottom-bar-right{background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3E3E3E),color-stop(14%,#393939),color-stop(32%,2E2E2E),color-stop(64%,#151515),color-stop(84%,#080808),color-stop(100%,#000000));background:-webkit-linear-gradient(top,#3E3E3E 0%,#393939 14%,#2E2E2E 32%,#151515 64%,#080808 84%,#010101 100%);background-color:#000000;}#mw-bottom-bar div{position:absolute;bottom:0px;font-size:10px;font-weight:bold;}#bottom-bar-left{left:0px;width:58px;height:45px;}#bottom-bar-center{background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#6D6D6D),color-stop(15%,#676767),color-stop(36%,#5A5A5A),color-stop(77%,#494949),color-stop(100%,#282828));background:-webkit-linear-gradient(top,#6D6D6D 0%,#676767 15%,#5A5A5A 36%,#494949 77%,#282828 100%);background-color:#6D6D6D;left:58px;right:112px;height:40px;box-shadow:0px -15px 15px #3A3A3A inset;-webkit-box-shadow:0px -15px 15px #3A3A3A inset;}#bottom-bar-right{right:0px;width:112px;height:45px;}#mw-bottom-bar.closed{bottom:-45px;}#mw-top-bar.closed{top:-50px;}#mw-you,#mw-logo,#mw-signin{font-size:10px;font-weight:bold;height:45px;width:63px;padding:0px;text-align:center;}#mw-logo a,#mw-bottom-bar span,#mw-interwiki,#mw-you a,#mw-signin a{display:block;color:#FFFFFF;height:15px;padding-top:30px;}#mw-bottom-bar a{float:right;width:50px;text-align:center;color:#FFFFFF;}#bottom-bar-center a{float:left;padding-top:22px;height:18px;}div #mw-interwiki{float:right;width:62px;}#mw-you,#mw-signin{height:15px;width:50px;padding-right:8px;padding-left:5px;}#mw-you.active div,#mw-signin div{background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3964C0),color-stop(23%,#335FBE),color-stop(100%,#1044B5));background:-webkit-linear-gradient(top,#3964C0 0%,#335FBE 23%,#1044B5 100%);background-color:#3964C0;}#mw-you.active:after{position:absolute;right:28px; top:45px;z-index:2;content:"";border-top:#0E42B4 5px solid;border-left:transparent 5px solid;border-right:transparent 5px solid;}#mw-signin div{position:absolute;top:0px;right:8px;width:50px;height:50px;padding-top:0px;}#mw-signin a{height:20px;padding-top:30px;background:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_key.png?pathrev=103083&view=co&revision=103083);background-position:10px 3px;}#mw-signin:after{position:absolute;right:58px;top:45px;z-index:1;content:"";height:0px;width:0px;border-top:#09338E 5px solid;border-left:transparent 5px solid;}#mw-searchtd{padding:2px 30px 2px 0px;}#mw-search{border:1px solid #787878;border-radius:3px;width:100%;font-size:18px;padding-left:5px;padding-right:25px;box-shadow:0px 3px 7px #BBBBBB inset;-webkit-box-shadow:0px 3px 7px #BBBBBB inset;}#mw-results{display:none;position:absolute;top:35px;left:67px;right:64px;background-color:#FFFFFF;border:1px solid #AAAAAA;color:#000000;}#mw-searchbutton{border:0px;position:absolute;right:65px;top:10px;width:25px;height:25px;}.selectedSlider{background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#3964C0),color-stop(20%,#335FBE),color-stop(68%,#194BB7),color-stop(100%,#0D41B4));background:-webkit-linear-gradient(top,#3964C0 0%,#335FBE 20%,#194BB7 68%,#0D41B4 100%); background-color:#3964C0;}#bottom-bar-left a:after,#bottom-bar-right a+a:after{position:absolute;bottom:40px;height:0px;width:0px;content:"";border-top:transparent solid 5px;}#bottom-bar-left a:after{left:58px;border-left:#000000 solid 5px;}#bottom-bar-right a+a:after{right:112px;border-right:#000000 solid 5px;}#bottom-bar-left a.selectedSlider:after{border-left-color:#09338E;}#bottom-bar-right a+a.selectedSlider:after{border-right-color:#09338E;}#mw-youmenu{background:-webkit-gradient(linear,left bottom,right top,color-stop(0%,#000000),color-stop(50%,#4A4A4A),color-stop(100%,#000000));background:-webkit-linear-gradient(60deg,#000000 0%,#4A4A4A 50%,#000000 100%);background-color:#000000;position:fixed;top:45px;right:0px;z-index:1;height:346px;width:188px;border:2px solid #323232;border-top:0;box-shadow:2px 4px 5px rgba(0,0,0,0.7);-webkit-box-shadow:2px 4px 5px rgba(0,0,0,0.7);display:none;}#mw-youmenu a{color:#FFFFFF;display:block;padding:15px;padding-left:60px;font-weight:bold;font-size:12px;}#mw-youmenu a#mw-logout{margin-top:25px;padding-right:40px;float:right;}#mw-results .suggestions-results a{display:block;margin:0;line-height:2.7em;padding:0.01em 0.25em;text-decoration:none;color:#000000;border-top:1px #888888 solid;font-size:15px;}.suggestions-results div{float:right;margin:0;line-height:1.8em;padding:0.01em 0.25em;font-size:20px;}.suggestions-results a:hover{background-color:#ACD1E9;}#mw-footer{background-color:#000000;color:#888888;padding:8px 0px;font-size:11px;margin-top:60px;}#mw-footer a{color:#FFFFFF;}#mw-footer .footerUpper{font-size:12px;padding:5px 8px;}#mw-footer .footerUpper b{color:#DDDDDD;}#mw-footer .footerLower{line-height:13px;padding:0px 8px;}#mw-footer .footerLower a{font-weight:bold;}#mw-footer #mw-bottom-bar{height:0px;top:-8px;position:relative;-webkit-transition:all 0s;}#mw-top-bar a,#mw-bottom-bar a,#mw-bottom-bar span{background-repeat:no-repeat !important;}#bottom-bar-right a:first-child{background:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_globe.png?pathrev=103083&view=co&revision=103083);background-position:13px 2px;}#bottom-bar-right a+a span{background:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_discussion.png?pathrev=103083&view=co&revision=103083);background-position:8px 2px;}#bottom-bar-left span{background-image:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_puzzle.png?pathrev=103083&view=co&revision=103083);background-position:9px 2px;}#mw-logo a{background:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_w.png?pathrev=103083&view=co&revision=103083);background-position:15px 3px;}#mw-top-bar #mw-you a{background-image:url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_user.png?pathrev=103083&view=co&revision=103083);background-position:9px 2px;}h2{font-size:1.4em;margin-left:1.3em;padding-bottom:3px;}h2+div{display:none;}h2.expanded+div{display:block;}h2:before{content:"+";color:#676D79;border:1px solid #676D79;border-radius:20px;width:20px;height:20px;display:inline-block;text-align:center;font-size:22px;position:absolute;left:5px;}h2.expanded:before{content:"−";}#mw-top-bar td, #mw-bottom-bar td{border:0 !important}#mw-top-bar{border:0 !important}#header,h2 button,#footer{display:none !important;}#mw-youmenu a{line-height:normal}h2.expanded+div{display:block !important}  Article  HistoryMore Language Discuss   (User Name)Your NotificationsYour Talk PageYour Watchlist</a>Your Contributions</a>Your Preferences</a>Log Out</a>  About</a> • Contact</a> • Privacy policy</a> • Disclaimers</a> Disable images</a> • Mobile site feedback</a> View Wikipedia as: Mobile • Classic</a> Text is available under the Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. See Terms of use</a> for details. Wikipedia is a registered trademark of the Wikimedia Foundation, Inc.</a>, a non-profit organization. ';document.onclick=function(a){function c{if(youmenu&&"block"==youmenu.style.display&&(!a||"mw-youmenu"!=a.id&&"mw-you"!=a.id))youmenu.style.display="none",document.getElementById("mw-you").className=""}a=a||event;a=a.target||a.srcElement;if("mw-search"==a.id&&withSliders)focusSlider,search.onblur=closeSlider,c;else{for(var b={"mw-results":1,"mw-top-bar":1,"mw-bottom-bar":1,"mw-youmenu":1,"mw-you":1};a&&!a.hash&&"H2"!=a.nodeName&&!b[a.id];)a=a.parentNode;if(a&&"H2"==a.nodeName&&"xxnotsectionheader"!= a.className)toggleSection(a);else if(a&&a.hash&&0==a.hash.indexOf("#"))revealForHash(a.hash);else if(withSliders&&(!a||b[a.id]))topSlider.className=bottomSlider.className="open",closeSlider;a&&b[a.id]&&focusSlider;c;if(a&&"mw-you"==a.id&&(youmenu=document.getElementById("mw-youmenu")))youmenu.style.display="block"==youmenu.style.display?(closeSlider,a.className="","none"):(focusSlider,a.className="active","block");if((!a||"mw-results"!=a.id)&&results)results.style.display="none"}}; document.onkeyup=function(a){a=a||event;a=a.target||a.srcElement;if("mw-search"==a.id&&withSliders){if(0==search.value.length)results.style.display="none";clearTimeout(searchTimer);var c=a.value;1>c.length?results.innerHTML="":searchTimer=setTimeout(function{searchApi(c)},typingDelay)}};var sliderFocused=!1,sliderTimer=-1,searchTimer=-1,topSlider,bottomSlider,results,search,youmenu,typingDelay=500,apiUrl=(window.scriptPath||"/w")+"/api.php",numResults=5,maxHistSpace=10; function closeSlider{sliderFocused=!1;clearTimeout(sliderTimer);sliderTimer=setTimeout(function{if(!sliderFocused&&withSliders)topSlider.className=bottomSlider.className="closed",results.style.display="none"},2E3)}function withSliders{if(bottomSlider)return!0;bottomSlider=document.getElementById("mw-bottom-bar");topSlider=document.getElementById("mw-top-bar");search=document.getElementById("mw-search");results=document.getElementById("mw-results");return!!bottomSlider} function focusSlider{sliderFocused=!0;clearTimeout(sliderTimer);topSlider.className=bottomSlider.className="open"} function pageLoaded{sliderFocused||closeSlider;withSliders;search.parentNode.onsubmit=function{newHistSuggestion(search.value)};window.scrollTo(0,1);0==document.location.hash.indexOf("#")&&revealForHash(document.location.hash);var a=!1,c=document.getElementById("mw-footer"),b,d;window.updateFooterScroll=function{b=Math.max(document.documentElement.clientHeight,document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight)- screen.availHeight-c.offsetHeight+30;window.onscroll};window.onscroll=function{if((window.pageYOffset||"CSS1Compat"==document.compatMode&&document.documentElement.scrollTop||document.body.scrollTop)>b!=a)(a=!a)?c.insertBefore(bottomSlider,c.firstChild):document.body.appendChild(bottomSlider)};updateFooterScroll;window.onorientationchange=function{switch(window.orientation){case 0:case 90:case 180:case -90:if(d!=window.orientation)d=window.orientation,updateFooterScroll}}} function toggleSection(a){a.className=a.className?"":"expanded";window.updateFooterScroll&&updateFooterScroll}function revealForHash(a){if(a=document.getElementById(a.substr(1))){for(a&&"H2"!=a.nodeName;)a=a.previousSibling||a.parentNode;a&&"expanded"!=a.className&&toggleSection(a)}}function histSuggestions{var a=document.cookie.split("histsugg=");return 2>a.length?"":"|"+a[1].split(";")[0]} function newHistSuggestion(a){if(-1==(histSuggestions+"|").indexOf("|"+a+"|")&&a)document.cookie="histsugg="+a+histSuggestions.split("|").slice(0,maxHistSpace).join("|")+";path=/;expires="+(new Date(+new Date+2592E6)).toGMTString} function searchApi(a){for(var c=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP"),b=histSuggestions.split("|").slice(1),d=[];b.length;b.shift)0==b[0].toLowerCase.indexOf(a.toLowerCase)&&d.push(b[0]);focusSlider;d.splice(numResults);c.onreadystatechange=function{if(4==c.readyState&&200==c.status){var b=d.concat((window.JSON&&JSON.parse?JSON.parse:eval)(c.responseText)[1]),f={};for(results.style.display="block";results.firstChild;)results.removeChild(results.firstChild); if(0===b.length)results.appendChild(document.createTextNode("No results"));else{results.appendChild(document.createElement("div")).className="suggestions-results";for(var e=0;e<b.length;e++)f[b[e]]||(f[b[e]]=!0,function(b){var c=results.lastChild.appendChild(document.createElement("div")),d=results.lastChild.appendChild(document.createElement("a"));c.appendChild(document.createTextNode(" +  "));c.onmousedown=function{search.value=b+" ";searchApi(b);return!1};d.title=b;d.href="/wiki/"+b;d.onclick= function{newHistSuggestion(b)};0==b.toLowerCase.indexOf(a.toLowerCase)?(d.appendChild(document.createElement("b")).appendChild(document.createTextNode(b.substr(0,a.length))),d.appendChild(document.createTextNode(b.substr(a.length)))):d.appendChild(document.createTextNode(b))}(b[e]))}}};c.open("GET",apiUrl+"?action=opensearch&limit="+(numResults-d.length)+"&format=json&search="+a,!0);c.send};pageLoaded;

Note that the "Languages" and "More" buttons won't work because I don't know what the menu is supposed to look like. Also, I didn't bother to duplicate the css prefixes for every major browser, so this will only work for Webkit browsers. And of course, the links won't actually go to the correct pages.

CSS:

top: 0px; height: 45px; }
 * 1) mw-top-bar {

bottom: 0px; height: 40px; }
 * 1) mw-bottom-bar {

position: fixed; width: 100%; color: #FFFFFF; -webkit-transition: all 0.3s; border-spacing: 0px; }
 * 1) mw-top-bar, #mw-bottom-bar {

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3E3E3E), color-stop(14%,#393939), color-stop(32%,2E2E2E), color-stop(64%,#151515), color-stop(84%,#080808), color-stop(100%,#000000)); background: -webkit-linear-gradient(top, #3E3E3E 0%,#393939 14%,#2E2E2E 32%,#151515 64%,#080808 84%,#010101 100%); background-color: #000000; }
 * 1) mw-top-bar, #bottom-bar-left, #bottom-bar-right {

position: absolute; bottom: 0px; font-size: 10px; font-weight: bold; }
 * 1) mw-bottom-bar div {

left: 0px; width: 58px; height: 45px; }
 * 1) bottom-bar-left {

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6D6D6D), color-stop(15%,#676767), color-stop(36%,#5A5A5A), color-stop(77%,#494949), color-stop(100%,#282828)); background: -webkit-linear-gradient(top, #6D6D6D 0%,#676767 15%,#5A5A5A 36%,#494949 77%,#282828 100%); background-color: #6D6D6D; left: 58px; right: 112px; height: 40px; box-shadow: 0px -15px 15px #3A3A3A inset; -webkit-box-shadow: 0px -15px 15px #3A3A3A inset; }
 * 1) bottom-bar-center {

right: 0px; width: 112px; height: 45px; }
 * 1) bottom-bar-right {

bottom: -45px; }
 * 1) mw-bottom-bar.closed {

top: -50px; }
 * 1) mw-top-bar.closed {

font-size: 10px; font-weight: bold; height: 45px; width: 63px; padding: 0px; text-align: center; }
 * 1) mw-you, #mw-logo, #mw-signin {

display: block; color: #FFFFFF; height: 15px; padding-top: 30px; }
 * 1) mw-logo a, #mw-bottom-bar span, #mw-interwiki, #mw-you a, #mw-signin a {

float: right; width: 50px; text-align: center; color: #FFFFFF; }
 * 1) mw-bottom-bar a {

float: left; padding-top: 22px; height: 18px; }
 * 1) bottom-bar-center a {

div #mw-interwiki { float: right; width: 62px; }

height: 15px; width: 50px; padding-right: 8px; padding-left: 5px; }
 * 1) mw-you, #mw-signin {

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3964C0), color-stop(23%,#335FBE), color-stop(100%,#1044B5)); background: -webkit-linear-gradient(top, #3964C0 0%,#335FBE 23%,#1044B5 100%); background-color: #3964C0; }
 * 1) mw-you.active div, #mw-signin div {

position: absolute; right: 28px; top: 45px; z-index: 2; content: ""; border-top: #0E42B4 5px solid; border-left: transparent 5px solid; border-right: transparent 5px solid; }
 * 1) mw-you.active:after {

position: absolute; top: 0px; right: 8px; width: 50px; height: 50px; padding-top: 0px; }
 * 1) mw-signin div {

height: 20px; padding-top: 30px; background: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_key.png?pathrev=103083&view=co&revision=103083); background-position: 10px 3px; }
 * 1) mw-signin a {

position: absolute; right: 58px; top: 45px; z-index: 1; content: ""; height: 0px; width: 0px; border-top: #09338E 5px solid; border-left: transparent 5px solid; }
 * 1) mw-signin:after {

padding: 2px 30px 2px 0px; }
 * 1) mw-searchtd {

border: 1px solid #787878; border-radius: 3px; width: 100%; font-size: 18px; padding-left: 5px; padding-right: 25px; box-shadow: 0px 3px 7px #BBBBBB inset; -webkit-box-shadow: 0px 3px 7px #BBBBBB inset; }
 * 1) mw-search {

display: none; position: absolute; top: 35px; left: 67px; right: 64px; background-color: #FFFFFF; border: 1px solid #AAAAAA; color: #000000; }
 * 1) mw-results {

border:0px; position: absolute; right: 65px; top: 10px; width: 25px; height: 25px; }
 * 1) mw-searchbutton {

.selectedSlider { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3964C0), color-stop(20%,#335FBE), color-stop(68%,#194BB7), color-stop(100%,#0D41B4)); background: -webkit-linear-gradient(top, #3964C0 0%,#335FBE 20%,#194BB7 68%,#0D41B4 100%); background-color: #3964C0; }

position: absolute; bottom: 40px; height: 0px; width: 0px; content: ""; border-top: transparent solid 5px; }
 * 1) bottom-bar-left a:after, #bottom-bar-right a+a:after {

left: 58px; border-left: #000000 solid 5px; }
 * 1) bottom-bar-left a:after {

right: 112px; border-right: #000000 solid 5px; }
 * 1) bottom-bar-right a+a:after {

border-left-color: #09338E; }
 * 1) bottom-bar-left a.selectedSlider:after {

border-right-color: #09338E; }
 * 1) bottom-bar-right a+a.selectedSlider:after {

background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#000000), color-stop(50%,#4A4A4A), color-stop(100%,#000000)); background: -webkit-linear-gradient(60deg, #000000 0%,#4A4A4A 50%,#000000 100%); background-color: #000000; position: fixed; top: 45px; right: 0px; z-index: 1; height: 346px; width: 188px; border: 2px solid #323232; border-top:0; box-shadow: 2px 4px 5px rgba(0,0,0,0.7); -webkit-box-shadow: 2px 4px 5px rgba(0,0,0,0.7); display: none; }
 * 1) mw-youmenu {

color: #FFFFFF; display: block; padding: 15px; padding-left: 60px; font-weight: bold; font-size: 12px; }
 * 1) mw-youmenu a {

margin-top: 25px; padding-right: 40px; float: right; }
 * 1) mw-youmenu a#mw-logout {

display: block; margin: 0; line-height: 2.7em; padding: 0.01em 0.25em; text-decoration: none; color: #000000; border-top: 1px #888888 solid; font-size: 15px; } .suggestions-results div{ float: right; margin: 0; line-height: 1.8em; padding: 0.01em 0.25em; font-size: 20px; }
 * 1) mw-results .suggestions-results a {

.suggestions-results a:hover{ background-color: #ACD1E9; }

background-color: #000000; color: #888888; padding: 8px 0px; font-size: 11px; margin-top: 60px; }
 * 1) mw-footer {

color: #FFFFFF; }
 * 1) mw-footer a {

font-size: 12px; padding: 5px 8px; }
 * 1) mw-footer .footerUpper {

color: #DDDDDD; }
 * 1) mw-footer .footerUpper b {

line-height: 13px; padding: 0px 8px; }
 * 1) mw-footer .footerLower {

font-weight: bold; }
 * 1) mw-footer .footerLower a {

height: 0px; top: -8px; position: relative; -webkit-transition: all 0s; }
 * 1) mw-footer #mw-bottom-bar {

background-repeat: no-repeat !important; }
 * 1) mw-top-bar a, #mw-bottom-bar a, #mw-bottom-bar span {

background: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_globe.png?pathrev=103083&view=co&revision=103083); background-position: 13px 2px; }
 * 1) bottom-bar-right a:first-child {

background: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_discussion.png?pathrev=103083&view=co&revision=103083); background-position: 8px 2px; }
 * 1) bottom-bar-right a+a span {

background-image: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_puzzle.png?pathrev=103083&view=co&revision=103083); background-position: 9px 2px; }
 * 1) bottom-bar-left span {

background: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_w.png?pathrev=103083&view=co&revision=103083); background-position: 15px 3px; }
 * 1) mw-logo a {

background-image: url(//svn.wikimedia.org/viewvc/mediawiki/trunk/mockups/athena/images/icons/athena_icon_efefef_user.png?pathrev=103083&view=co&revision=103083); background-position: 9px 2px; }
 * 1) mw-top-bar #mw-you a {

h2 { font-size: 1.4em; margin-left: 1.3em; padding-bottom: 3px; }

h2+div { display: none; }

h2.expanded+div{ display: block; }

h2:before { content: "+"; color: #676D79; border: 1px solid #676D79; border-radius: 20px; width: 20px; height: 20px; display: inline-block; text-align: center; font-size: 22px; position: absolute; left: 5px; }

h2.expanded:before { content: "−"; }

HTML (at the top, footer at the bottom):

 Article </a> History</a> <a>More</a> <a id="mw-interwiki" onclick="interwiki">Language</a> <a href="/wiki/Talk:ARTICLE"> Discuss </a> <a>(User Name)</a> <a>Your Notifications</a> <a>Your Talk Page</a> <a>Your Watchlist</a> <a>Your Contributions</a> <a>Your Preferences</a> <a id="mw-logout">Log Out</a> <a>About</a> • <a>Contact</a> • <a>Privacy policy</a> • <a>Disclaimers</a> <a>Disable images</a> • <a>Mobile site feedback</a> View Wikipedia as: Mobile • <a>Classic</a> Text is available under the <a>Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. See <a>Terms of use</a> for details.

Wikipedia is a registered trademark of the <a>Wikimedia Foundation, Inc.</a>, a non-profit organization.

JS (in the head):

document.onclick = function(e) { function hideYouMenu { if( youmenu && youmenu.style.display == 'block' && (!e || e.id != "mw-youmenu" && e.id != "mw-you") ) { youmenu.style.display = 'none'; document.getElementById("mw-you").className = ''; }	}	e = e || event; e = e.target || e.srcElement; if(e.id == "mw-search" && withSliders ) { focusSlider search.onblur = closeSlider; hideYouMenu; return; }	var stopIds = {'mw-results':1,'mw-top-bar':1,'mw-bottom-bar':1,'mw-youmenu':1,'mw-you':1} for(e && !e.hash && e.nodeName != "H2" && !stopIds[e.id]; ) { e = e.parentNode; }	if( e && e.nodeName == "H2" && e.className != "xxnotsectionheader") { // headers toggleSection( e ); } else if( e && e.hash && e.hash.indexOf( '#' ) == 0 ) { // links revealForHash( e.hash ); } else if ( withSliders && !(e && !stopIds[e.id] ) ) { topSlider.className = bottomSlider.className = "open"; closeSlider; }	if( e && stopIds[e.id] ) { focusSlider; }	hideYouMenu if( e && e.id == "mw-you" ) { youmenu = document.getElementById("mw-youmenu"); if(youmenu) { youmenu.style.display = youmenu.style.display == "block" ? (closeSlider, e.className='', "none") : (focusSlider, e.className='active', "block"); }	}	if( (!e || e.id != "mw-results") && results ) { results.style.display = 'none'; } }

document.onkeyup = function(e) { e = e || event; e = e.target || e.srcElement; if( e.id == "mw-search") { if ( !withSliders ){ // not yet loaded? return; }		if ( search.value.length == 0 ) { results.style.display = 'none'; }		// from bottom clearTimeout( searchTimer ); var term = e.value; if ( term.length < 1 ) { results.innerHTML = ''; } else { searchTimer = setTimeout( function { searchApi( term ); }, typingDelay ); }	} }

var sliderFocused = false, sliderTimer = -1, searchTimer = -1, topSlider, bottomSlider, results, search, youmenu, typingDelay = 500, apiUrl = (window.scriptPath || "/w")+"/api.php", numResults = 5, maxHistSpace = 10;

function closeSlider { sliderFocused = false; clearTimeout(sliderTimer); sliderTimer = setTimeout(function{		if(!sliderFocused && withSliders ){			topSlider.className = bottomSlider.className = "closed";			results.style.display = "none";		}	}, 2000) }

function withSliders { if(bottomSlider) { return true; }	bottomSlider = document.getElementById("mw-bottom-bar"); topSlider = document.getElementById("mw-top-bar"); search = document.getElementById("mw-search"); results = document.getElementById("mw-results"); return !!bottomSlider; }

function focusSlider { sliderFocused = true; clearTimeout(sliderTimer); topSlider.className = bottomSlider.className = "open"; }

function pageLoaded { sliderFocused || closeSlider; withSliders; search.parentNode.onsubmit = function{ newHistSuggestion(search.value) }	// Try to scroll and hide URL bar window.scrollTo( 0, 1 ); document.location.hash.indexOf( '#' ) == 0 && revealForHash( document.location.hash ); var isSliderLocked = false, footer = document.getElementById("mw-footer"), toScroll, oldOrientation; window.updateFooterScroll = function{ toScroll = Math.max(document.documentElement.clientHeight,document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight) - screen.availHeight - footer.offsetHeight + 30; window.onscroll; };

window.onscroll = function{ if( (window.pageYOffset || document.compatMode == "CSS1Compat" && document.documentElement.scrollTop || document.body.scrollTop) > toScroll != isSliderLocked ) { if (isSliderLocked = !isSliderLocked) { footer.insertBefore(bottomSlider, footer.firstChild); } else { document.body.appendChild(bottomSlider); }		}	};	updateFooterScroll; window.onorientationchange = function { switch(window.orientation) { case 0: case 90: case 180: case -90: if( oldOrientation != window.orientation ) { oldOrientation = window.orientation; updateFooterScroll; }			break; }	} }

function toggleSection( header ) { header.className = header.className ? '' : 'expanded'; window.updateFooterScroll && updateFooterScroll; }

function revealForHash( hash ) { hash = document.getElementById( hash.substr(1) ); if( hash ) { for(hash && hash.nodeName != "H2"; ) { hash = hash.previousSibling || hash.parentNode; }		if( hash && hash.className != "expanded" ) { toggleSection( hash ); }	} }

function histSuggestions { var a=document.cookie.split("histsugg="); return a.length < 2?'':'|'+a[1].split(";")[0]; }

function newHistSuggestion(term) { if((histSuggestions+"|").indexOf("|"+term+"|") == -1 && term){ document.cookie = "histsugg="+term+histSuggestions.split("|").slice(0, maxHistSpace ).join("|")+";path=/;expires="+(new Date(+new Date+(3600000*24*30)).toGMTString) } };

function searchApi( term ) { var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject( 'Microsoft.XMLHTTP' ); for(var hist = histSuggestions.split("|").slice(1), histS = []; hist.length; hist.shift) { if(hist[0].toLowerCase.indexOf(term.toLowerCase) == 0) { histS.push(hist[0]); }	}	focusSlider; histS.splice( numResults ); xmlHttp.onreadystatechange = function { if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) { var response = histS.concat((window.JSON && JSON.parse ? JSON.parse : eval)( xmlHttp.responseText )[1]), dontDuplicate={}; results.style.display = 'block'; for(results.firstChild;){results.removeChild(results.firstChild)} if(response.length === 0){ results.appendChild( document.createTextNode( "No results" ) ); } else { results.appendChild( document.createElement('div') ).className = "suggestions-results"; for( var i = 0; i < response.length; i++ ){ if( dontDuplicate[ response[i] ] ){ continue; }					dontDuplicate[response[i]] = true; (function(re){						var newdiv = results.lastChild.appendChild( document.createElement('div') ),							newlink = results.lastChild.appendChild( document.createElement('a') );						newdiv.appendChild( document.createTextNode(' +  ') );						newdiv.onmousedown = function{							search.value = re + ' ';							searchApi(re);							return false;						}						newlink.title = re;						newlink.href = '/wiki/' + re;						newlink.onclick = function{ newHistSuggestion( re ) };						if( re.toLowerCase.indexOf( term.toLowerCase ) == 0 ){							newlink.appendChild( document.createElement('b') ).appendChild(document.createTextNode(re.substr(0, term.length)));							newlink.appendChild( document.createTextNode( re.substr( term.length ) ) );						} else {							newlink.appendChild( document.createTextNode( re ) );						}					})(response[i]) }			}		}	}	var url = apiUrl + '?action=opensearch&limit=' + (numResults - histS.length) + '&format=json&search=' + term; xmlHttp.open( 'GET', url, true ); xmlHttp.send; }

and JS and the bottom:

pageLoaded

Other stuff:

1: Load section content from the api. Assumes simple Title <h2 id="...etc...

API action=query&prop=sectioncontent returns [h2.id, section html] JS:

var sectionLoaded = {};

function toggleSection( header ) { header.className = header.className ? '' : 'expanded'; if( !sectionLoaded[ header.id ] ) { header.parentNode.insertBefore( document.createElement("div"), header.nextSibling ) .appendChild( document.createElement("img") ) .src = "loading.png"; // not a real file // Alternatively: // .appendChild( document.createTextNode("Loading...") ); requestSection( header.id ) }	window.updateFooterScroll && updateFooterScroll; }

function requestSection( id, isAnchor ) { sectionLoaded[ id ] = true; var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject( 'Microsoft.XMLHTTP' ); xmlHttp.onreadystatechange = function { if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) { var response = (window.JSON && JSON.parse ? JSON.parse : eval)( xmlHttp.responseText ); if(!response || response.length === 0) { return; }			var h = document.getElementById( response[0] ); if( h && h.nodeName == "H2" ){ if( isAnchor ) { h.className = 'expanded'; h = h.parentNode.insertBefore( document.createElement("div"), h.nextSibling); h.innerHTML = response[1]; var a = document.getElementById( id ); a && a.scrollIntoView; } else { h = h.nextSibling; h.innerHTML = response[1]; }				sectionLoaded[ response[0] ] = true; window.updateFooterScroll && updateFooterScroll; }		}	}	xmlHttp.open( 'GET', apiUrl + '?action=query&titles='+wgPageName+'&format=json&prop=sectioncontent&sectionid='+id, true ); // mw escapes ids automatically, so no need to worry afaik xmlHttp.send; }

function revealForHash( hash ) { var node = document.getElementById( hash = hash.substr(1) ); if( node ) { for(node && node.nodeName != "H2" ; node = node.previousSibling ) { while( node && !node.previousSibling ) { node = node.parentNode; }		}		if( node && node.className != 'expanded' ) { toggleSection( node ); }	} else { sectionLoaded[ hash ] || requestSection( hash, true ); } }

2: Login screen styles:

label { display: block; font-weight: bold; font-size: 13px; margin: 4px; }	border: #7E7E7E solid 1px; height: 26px; width: 217px; padding: 0px 5px; box-shadow: 0px 3px 5px #BBB inset; margin-left: 13px; margin-bottom: 5px; }
 * 1) mw-login-username, #mw-login-password {

<form style="padding: 10px;"> <label for="mw-login-username">Username: <input id="mw-login-username" /> <label for="mw-login-password">Password: <input id="mw-login-password" /> <input type="submit" style="line-height:1em;display:block;padding:9px 7px;color:white;font-size:14px;font-weight:bold;border:#545454 solid 1px;border-radius:3px;margin-top: 15px;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5277C7), color-stop(19%,#4C72C5), color-stop(72%,#315DBE), color-stop(100%,#2756BB)); background: -webkit-linear-gradient(top, #5277C7 0%,#4C72C5 19%,#315DBE 72%,#2756BB 100%)" value="Login ►" />

3: Search box stretches to max width on focus:

CSS:

-webkit-transition: width 1s,max-width 1s,color 1s,right 1s; } .searchfocused #mw-logo, .searchfocused #mw-you { width: 5px; max-width: 0px; } .searchfocused #mw-logo a, .searchfocused #mw-you a { width: 0px; color: transparent; } .searchfocused #mw-searchbutton { right: 20px; }	left: 8px; right: 16px; }
 * 1) mw-searchbutton, #mw-logo, #mw-you, #mw-logo a, #mw-you a {
 * 1) mw-results {

JS: (in document.onclick) -		search.onblur = closeSlider; +		document.body.className="searchfocused"; +		search.onblur = function{ +			closeSlider; +			document.body.className=""; +		};

4: Logged out view HTML: (CSS is in main CSS area above)

-			<td id="mw-you"> -				 <a>You</a> -			 +			<td id="mw-signin"> +				 <a>Sign In</a> +