Permalink
Browse files

Moved tabzilla into the masthead

The tab now aligns with the right side of the content. It looked weird way off to the right in wide windows, and hiding it at < 1250px would hide it from too many people. Sorry I didn't see this sooner, I've been away from MDN too much :(
  • Loading branch information...
1 parent 67dbe67 commit fc4c407bfbef9130ba059eab5dcd5f745e0769ba @craigcook craigcook committed with groovecoder Apr 12, 2012
Showing with 6 additions and 11 deletions.
  1. +3 −8 media/css/mdn-screen.css
  2. +3 −3 templates/base.html
View
@@ -285,7 +285,7 @@ input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, in
#nav-main #nav-sub-docs a:hover, #nav-sub-docs a:focus, #nav-sub-docs a:active { border: 0; padding: .4em 0; color: #fb9500; text-decoration: underline; }
/*** @Search *********/
-#site-search { width: 280px; float: right; text-align: left; padding-left: 0; margin: -8px 0 0; position: relative; }
+#site-search { width: 280px; float: right; text-align: left; padding-left: 0; margin: -8px 140px 0 0; position: relative; }
#site-search p { margin: 0; }
#site-search #q { width: 160px; padding: 3px 4px 3px 28px; margin: 0 0 0 4px; float: right; background: #555; background: rgba(80,80,80,.9) url("../img/search-icons.png") 6px -96px no-repeat; border: 1px solid #666; color: #aaa; font-size: .857em; -webkit-appearance: textfield; appearance: textfield; }
#site-search #q:hover, #site-search #q:focus { border-color: #9c0d10; background-color: #fff; color: #333; }
@@ -302,7 +302,7 @@ input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, in
.user-state a { color: #ccc; }
.user-state a:hover, .user-state a:focus, .user-state a:active { color: #fff; }
.user-state form { display: inline; }
-#masthead .user-state { font-size: .786em; margin-bottom: 0; position: absolute; right: 10px; top: 12px; }
+#masthead .user-state { font-size: .786em; margin-bottom: 0; position: absolute; right: 150px; top: 12px; }
#site-info .user-state { margin-bottom: .5em; }
/*** @BrowserID *********/
@@ -345,12 +345,7 @@ a.browserid-signin:hover, a.browserid-signin:focus, a.browserid-link:active { ba
.footer .browserid-info h3:after { top: auto; bottom: -25px; background: transparent none; }
/*** @Tabzilla *********/
-/* Hide Tabzilla on screens < 1250px wide so that it does not interfere with login / logout links. This is a temporary workaround for Tabzilla's fixedness issue. */
-@media screen and (max-width: 1250px) {
- #developer-mozilla-org #tabzilla {
- display: none;
- }
-}
+#masthead #tabzilla { position: absolute; right: 0; top: 0; }
/*** @Language Picker *********/
footer .languages { float: right; text-align: right; margin: 0 0 .5em; }
View
@@ -12,7 +12,7 @@
<link rel="home" href="{{ url('home') }}">
<link rel="copyright" href="#copyright">
- <link rel="shortcut icon" href="{{ MEDIA_URL }}img/favicon.ico"/>
+ <link rel="shortcut icon" href="{{ MEDIA_URL }}img/favicon.ico">
{% block site_css %}
<!--[if !IE 6]><!-->
@@ -25,7 +25,7 @@
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="all" href="{{ MEDIA_URL }}css/mdn-ie7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="all" href="{{ MEDIA_URL }}css/mdn-ie6.css"><![endif]-->
<link rel="stylesheet" type="text/css" media="print" href="{{ MEDIA_URL }}css/mdn-print.css">
- <link rel="stylesheet" href="//www.mozilla.org/tabzilla/media/css/tabzilla.css" />
+ <link rel="stylesheet" href="//www.mozilla.org/tabzilla/media/css/tabzilla.css">
{% endblock %}
<!--[if IE]>
@@ -43,7 +43,6 @@
<p><strong>Warning:</strong> The Mozilla Developer Network website employs emerging web standards that may not be fully supported in some versions of MicroSoft Internet Explorer. You can improve your experience of this website by enabling JavaScript.</p>
</div></noscript>
<![endif]-->
- <a href="http://www.mozilla.org/" id="tabzilla">mozilla</a>
<header id="masthead" class="{% block headerclass %}minor{% endblock %}">
<div class="wrap">
<ul id="nav-access">
@@ -145,6 +144,7 @@ <h1 id="logo"><a href="{{ url('home') }}"><img src="{{ MEDIA_URL }}img/mdn-logo-
<div id="site-search-gg"></div>
</form>
+ <a href="http://www.mozilla.org/" id="tabzilla">mozilla</a>
</div>
</header>
{# end head #}

0 comments on commit fc4c407

Please sign in to comment.