Cute Editor Tools menu for every language (fixes #3171)

src/olympia/editors/templates/editors/base.html

@@ -5,6 +5,7 @@
 {% block bodyclass %}editor-tools {% endblock %}
 
 {% block site_header_title %}
+<div class="editor-menu">
   <h1 class="site-title amo">
     <a href="{{ url('editors.home') }}" title="{{ _('Return to the Editor Tools homepage') }}">
       <strong>{{ _('Editor Tools') }}</strong>
@@ -27,6 +28,7 @@
         {% endif %}
       </nav>
     {% endif %}
+</div>
   {% endblock %}
 {% endblock %}
 

static/css/restyle/restyle.less

@@ -1232,6 +1232,14 @@ body:not(.developer-hub) section.secondary {
 
 #masthead h1 {
   margin-top: -5px;
+
+  &.site-title.amo {
+    margin: -29px 20px 0 0;
+
+    .html-rtl & {
+      margin: -29px 0 0 20px;
+    }
+  }
 }
 
 .addon-vitals .widgets .widget {
@@ -2097,6 +2105,11 @@ body.editor-tools {
     color: @link-on-color-bg;
   }
 
+  .editor-menu {
+    margin-top: 30px;
+    width: 660px;
+  }
+
   .pill-nav-amo {
     border-radius: 0;
     background-color: transparent;
@@ -2120,8 +2133,8 @@ body.editor-tools {
   }
 
   #navbar ul li.top {
-    width: 20%;
     border-right: 0;
+    padding: 0 30px 0;
     text-align: center;
   }
 

static/css/zamboni/editors.styl

@@ -1001,8 +1001,8 @@ h2.addon {
     text-align: right;
 }
 
-.html-trl #reviewers-score-bar .number,
-.html-trl #leaderboard .number {
+.html-rtl #reviewers-score-bar .number,
+.html-rtl #leaderboard .number {
     text-align: left;
 }
 #leaderboard .name {
@@ -1023,6 +1023,10 @@ h2.addon {
 
 .site-title.amo {
     float: left;
+
+    .html-rtl & {
+        float: right;
+    }
 }
 #navbar {
     clear: left;
@@ -1037,8 +1041,6 @@ gradient-two-color($color1, $color2) {
     gradient-two-color(darken(#563C4B, 50%), darken(#563C4B, 30%));
     border-radius: 16px;
     display: inline-block;
-    left: 20px;
-    margin-top: 22px;
     padding: 8px 1px;
     position: relative;
     top: 9px;