Issue 5634 - Replaced logo and refactored navbar width and colors

static/css/main.css

 *
 {
   font-family: Arial, sans;
   font-size: 16px;
 }
 
 body
 {
   margin: 0;
   line-height: 1.5;
@@ skipping 227 matching lines @@
   height: 4em;
   background-color: #c70d2c;
 }
 
 #navbar li
 {
   list-style-type: none;
 }
 
 /* padding provided by navbar contents */
-#navbar .container
-{
-  padding: 0em;
+.navbar-container
+{
+  width: 1170px;
+  margin: 0 auto;
 }
 
 /* full-width under .container max-width */
 @media(max-width: 1199px)
 {
-  #navbar .container
+  .navbar-container
   {
     width: 100%;
   }
 }
 
 /* #navbar #navbar-logo
  ******************************************************************************/
 
 #navbar-logo
 {
   /* padding is visible in hover background-color change */
-  padding-left: 1em;
-  padding-right: 1em;
+  padding: 0em 1em;
   color: #fff;
 }
 
 #navbar-logo:hover,
 #navbar-logo:active,
 #navbar-logo:focus
 {
   background-color: #AE0013;
   text-decoration: none;
 }
 
 #navbar-logo,
 #navbar-logo > *
 {
-  display: block;

[ire, 2017/10/11 08:09:08]

The display doesn't do anything since you are floating

[juliandoucette, 2017/10/11 11:59:37]

I didn't know that :D - Thank you.

   float: left;
 }
 
 [dir="rtl"] #navbar-logo,
 [dir="rtl"] #navbar-logo > *
 {
   float: right;
 }
 
 #navbar-logo img
 {
   height: 4em;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  margin-right: 1em;

[ire, 2017/10/11 08:09:09]

This margin-right still applies when direction is rtl

[juliandoucette, 2017/10/11 11:59:36]

Good catch!

+  padding: 0.5em 0em;
+  margin: 0em 1em 0em 0em;
 }
 
 [dir="rtl"] #navbar-logo > img
 {
-  margin-left: 1em;
+  margin: 0em  0em 0em 1em;
 }
 
 #navbar-logo > span
 {
   /* full-height: 2.91 * 1.375 = ~4em */

[ire, 2017/10/11 08:09:07]

Helpful comments, thanks :)

[juliandoucette, 2017/10/11 11:59:35]

You're welcome. 

   line-height: 2.91em;
   font-size: 1.375em;
 }
 
 /* #navbar #navbar-menu-toggle
  ******************************************************************************/
 
 #navbar-menu-toggle
 {
   float: right;
@@ skipping 41 matching lines @@
 {
   display: block;
   color: #fff;
   text-decoration: none;
 }
 
 /* #navbar #navbar-menu #navbar-locale-menu
  ******************************************************************************/
 
 /* caret */
-#navbar-locale-selected::after

[ire, 2017/10/11 08:09:07]

Single colon for :after

[juliandoucette, 2017/10/11 11:59:35]

Done.

+#navbar-locale-selected:after
 {
   display: inline-block;
   width: 0;
   height: 0;
-  margin-left: .255em;

[ire, 2017/10/11 08:09:09]

"Don't omit the optional leading 0 for decimal numbers."

[juliandoucette, 2017/10/11 11:59:35]

Good catch. Looks like I neglected rtl too.

+  margin: 0em 0em 0em 0.255em;
   vertical-align: .255em;
   content: "";
   border-top: .3em solid;
   border-right: .3em solid transparent;
   border-left: .3em solid transparent;
 }
 
+[dir="rtl"] #navbar-locale-selected:after
+{
+  margin: 0em 0.255em 0em 0em;
+}
+
 #navbar-locale-menu
 {
   display: none;
 }
 
 #navbar-locale-menu.visible
 {
   display: block;
 }
 
@@ skipping 25 matching lines @@
   }
 
   #navbar-menu > li,
   #navbar-menu > li > a
   {
     display: inline-block;
   }
 
   #navbar-menu > li > a
   {
-    padding-right: 1em;
-    padding-left: 1em;
+    padding: 0em 1em;
     line-height: 4em;
   }
 
   #navbar-menu > li > a:hover,
   #navbar-menu > li > a:active,
   #navbar-menu > li > a:focus
   {
     background-color: #AE0013;
   }
 
   /* #navbar #navbar-menu #navbar-locale-menu
    ****************************************************************************/
 
   #navbar-locale-menubar
   {
     position: relative;
   }
 
   #navbar-locale-menu
   {
     position: absolute;
     min-width: 16em;
     max-height: 20em;
     max-height: 50vh;
     top: 100%;
     right: 0px;
     overflow: auto;
-    z-index: 1000;

[ire, 2017/10/11 08:09:09]

NIT: A lower z-index (e.g. even 1 or 2) would suffice here

[juliandoucette, 2017/10/11 11:59:36]

pfft

+    z-index: 9001;
     background-color: #292929;
   }
 
   [dir="rtl"] #navbar-locale-menu
   {
     right: auto;
     left: 0px;
   }
 }
 
@@ skipping 21 matching lines @@
     padding: 0.75em 1em;
   }
 
   #navbar-menu li a:hover,
   #navbar-menu li a:active,
   #navbar-menu li a:focus
   {
     background-color: #434343;
   }
 }