Issue 5634 - Replaced logo and refactored navbar width and colors

static/css/main.css

 *
 {
-  font-family: sans-serif;

[juliandoucette, 2017/10/10 17:35:04]

Removed from PatchSet

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

Acknowledged.

+  font-family: Arial, sans;
   font-size: 16px;
 }
 
 body
 {
   margin: 0;
   line-height: 1.5;
 }
 
 a img
@@ skipping 23 matching lines @@
   border: 1px solid black;
   overflow: auto;
 }
 
 .sprite
 {
   display: inline-block;
   font-size: 0px; /* fix for IE6 height bug */
   background-image: url(../img/sprite-main.png);
   background-repeat: no-repeat;
-}
-
-/*******************************************************************************
- * #navbar

[juliandoucette, 2017/10/10 17:35:08]

Moved this below .content

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

Acknowledged.

- ******************************************************************************/
-
-#navbar
-{

[juliandoucette, 2017/10/10 17:35:06]

It's necessary to set height here because overflow:auto would hide the dropdown.

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

Acknowledged.

-  height: 4em;
-  background-color: #c70d2c;
-}
-
-#navbar ul

[juliandoucette, 2017/10/10 17:35:08]

This isn't necessary anymore because of website-defaults reset.css

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

Acknowledged.

-{
-  margin: 0em;
-  padding: 0em;
-}
-
-#navbar li

[juliandoucette, 2017/10/10 17:35:05]

This isn't necessary anymore because of website-defaults reset.css

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

Acknowledged.

-{
-  list-style-type: none;
-}
-
-#navbar .container

[juliandoucette, 2017/10/10 17:35:08]

I'm torn between changing #navbar .container or creating a .navbar-container
like you did.

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

I think I prefer creating a new class because it is obvious from looking at the
markup that this is different to the regular .container 

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

Agreed. I'll change it.

-{
-  padding: 0em;
-}
-
-@media(max-width: 1199px)
-{
-  #navbar .container
-  {
-    width: 100%;
-  }
-}
-
-/* #navbar #logo
- ******************************************************************************/
-
-#logo
-{
-  padding-left: 1em;
-  padding-right: 1em;
-  color: #fff;
-}
-
-#logo:hover,
-#logo:active,
-#logo:focus
-{
-  background-color: #AE0013;
-  text-decoration: none;

[juliandoucette, 2017/10/10 17:35:07]

Removed unnecessary text-decoration nullification.

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

Acknowledged.

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

[juliandoucette, 2017/10/10 17:35:05]

IDK if this looks different on different platforms.

-{
-  line-height: 2.91em;
-  font-size: 1.375em;
-}
-
-/* #navbar #menu-toggle
- ******************************************************************************/
-
-#menu-toggle
-{
-  float: right;
-  padding: 1em;
-}
-
-[dir="rtl"] #menu-toggle
-{
-  float: left;
-}
-
-/* show on mobile */
-#menu-toggle,
-#menu-toggle > img
-{
-  display: block;
-}
-
-/* hide on desktop */
-@media(min-width: 992px)
-{
-  #menu-toggle
-  {
-    display: none;
-  }
-}
-
-#menu-toggle > img
-{
-  height: 2em;
-}
-
-#menu-toggle:hover,
-#menu-toggle:active,
-#menu-toggle:focus
-{
-  background-color: #AE0013;
-}
-
-/* #navbar #navbar-menu
- ******************************************************************************/
-
-#navbar-menu a
-{
-  color: #fff;
-  text-decoration: none;
-}
-
-/* #navbar #navbar-menu (desktop)
- ******************************************************************************/
-
-@media(min-width: 992px)
-{
-  #navbar-menu
-  {
-    float: right;
-  }
-
-  [dir="rtl"] #navbar-menu
-  {
-    float: left;
-  }
-
-  #navbar-menu > li,
-  #navbar-menu > li > a
-  {
-    display: inline-block;
-  }
-
-  #navbar-menu > li > a
-  {
-    padding-right: 1em;
-    padding-left: 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 #locale-menu
-   ****************************************************************************/
-
-  #locale-menubar
-  {
-    position: relative;
-  }
-
-  #locale-menu
-  {
-    position: absolute;
-    display: none;
-    min-width: 16em;
-    max-height: 20em;
-    max-height: 50vh;
-    top: 100%;
-    right: 0px;
-    overflow: auto;
-    z-index: 1000;
-    background-color: #292929;
-  }
-
-  [dir="rtl"] #locale-menu
-  {
-    right: auto;
-    left: 0px;
-  }
-
-  #locale-menu.visible

[juliandoucette, 2017/10/10 17:35:06]

Moved this logic above as it now applies to both desktop and mobile.

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

Acknowledged.

-  {
-    display: block;
-  }
-
-  #locale-menu > li,
-  #locale-menu > li > a
-  {
-    display: block;
-    white-space: nowrap;
-  }
-
-  #locale-menu > li > a
-  {
-    padding-left: 1em;
-    padding-right: 1em;
-    line-height: 3em;

[juliandoucette, 2017/10/10 17:35:05]

Changed to default line-height and padding: 0.75em 1em instead of nowrapping.
Now items could wrap comfortably (but they won't because there is enough width).

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

Acknowledged.

-    text-decoration: none;

[juliandoucette, 2017/10/10 17:35:09]

Removed unnecessary text-decoration nullification.

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

Acknowledged.

-  }
-
-  #locale-menu > li > a:hover,
-  #locale-menu > li > a:active,
-  #locale-menu > li > a:focus
-  {
-    background-color: #434343;
-  }
-
-  /* caret */
-  #locale-selected::after

[juliandoucette, 2017/10/10 17:35:05]

I think I'll flip this caret on select separately.

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

Acknowledged.

-  {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-left: .255em;
-    vertical-align: .255em;
-    content: "";
-    border-top: .3em solid;
-    border-right: .3em solid transparent;
-    border-left: .3em solid transparent;
-  }
-}
-
-/* #navbar #navbar-menu (mobile)
- ******************************************************************************/
-
-@media(max-width: 991px)
-{
-  #navbar-menu
-  {
-    display: none;
-    float: left;
-    background-color: #292929;
-  }
-
-  #navbar-menu.visible,
-  #navbar-menu li,
-  #navbar-menu li a
-  {
-    display: block;
-  }
-
-  #navbar-menu li a
-  {
-    line-height: 3em;
-    padding-left: 1em;
-    padding-right: 1em;
-  }
-
-  #navbar-menu li a:hover,
-  #navbar-menu li a:active,
-  #navbar-menu li a:focus
-  {
-    background-color: #434343;
-  }
-
-  /* locales appear inline in mobile menu */
-  #locale-menu li,
-  #locale-menu  a
-  {
-    display: inline-block;
-  }
-
-  /* selected locale does not appear in mobile menu */
-  #navbar-menu #locale-selected
-  {
-    display: none;
-  }
 }
 
 #adblock-browser-notification
 {
   text-align: center;
 }
 
 #adblock-browser-notification a
 {
   font-weight: bold;
@@ skipping 164 matching lines @@
   font-weight: bold;
   margin: 32px 0px;
   margin: 2rem 0rem;
 }
 
 .content h1 { font-size: 2.4em; }
 .content h2 { font-size: 1.6em; }
 .content h3 { font-size: 1.3em; }
 .content h4 { font-size: 1.2em; }
 .content h5 { font-size: 1.1em; }
+
+/*******************************************************************************
+ * #navbar
+ ******************************************************************************/
+
+#navbar
+{
+  height: 4em;
+  background-color: #c70d2c;
+}
+
+#navbar li
+{
+  list-style-type: none;
+}
+
+/* padding provided by navbar contents */
+.navbar-container
+{
+  width: 1170px;
+  margin: 0 auto;
+}
+
+/* full-width under .container max-width */
+@media(max-width: 1199px)
+{
+  .navbar-container
+  {
+    width: 100%;
+  }
+}
+
+/* #navbar #navbar-logo
+ ******************************************************************************/
+
+#navbar-logo
+{
+  /* padding is visible in hover background-color change */
+  padding: 0em 1em;
+  color: #fff;
+}
+
+#navbar-logo:hover,
+#navbar-logo:active,
+#navbar-logo:focus
+{
+  background-color: #AE0013;
+  text-decoration: none;
+}
+
+#navbar-logo,
+#navbar-logo > *
+{
+  float: left;
+}
+
+[dir="rtl"] #navbar-logo,
+[dir="rtl"] #navbar-logo > *
+{
+  float: right;
+}
+
+#navbar-logo img
+{
+  height: 4em;
+  padding: 0.5em 0em;
+  margin: 0em 1em 0em 0em;
+}
+
+[dir="rtl"] #navbar-logo > img
+{
+  margin: 0em  0em 0em 1em;
+}
+
+#navbar-logo > span
+{
+  /* full-height: 2.91 * 1.375 = ~4em */
+  line-height: 2.91em;
+  font-size: 1.375em;
+}
+
+/* #navbar #navbar-menu-toggle
+ ******************************************************************************/
+
+#navbar-menu-toggle
+{
+  float: right;
+  padding: 1em;
+}
+
+[dir="rtl"] #navbar-menu-toggle
+{
+  float: left;
+}
+
+/* show on mobile */
+#navbar-menu-toggle,
+#navbar-menu-toggle > img
+{
+  display: block;
+}
+
+/* hide on desktop */
+@media(min-width: 992px)
+{
+  #navbar-menu-toggle
+  {
+    display: none;
+  }
+}
+
+#navbar-menu-toggle > img
+{
+  /* plus 2em padding = 4em */
+  height: 2em;
+}
+
+#navbar-menu-toggle:hover,
+#navbar-menu-toggle:active,
+#navbar-menu-toggle:focus
+{
+  background-color: #AE0013;
+}
+
+/* #navbar #navbar-menu
+ ******************************************************************************/
+
+#navbar-menu a
+{
+  display: block;
+  color: #fff;
+  text-decoration: none;
+}
+
+/* #navbar #navbar-menu #navbar-locale-menu
+ ******************************************************************************/
+
+/* caret */
+#navbar-locale-selected:after
+{
+  display: inline-block;
+  width: 0;
+  height: 0;
+  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;
+}
+
+#navbar-locale-menu > li > a
+{
+  padding: 0.75em 1em;
+}
+
+#navbar-locale-menu > li > a:hover,
+#navbar-locale-menu > li > a:active,
+#navbar-locale-menu > li > a:focus
+{
+  background-color: #434343;
+}
+
+/* #navbar #navbar-menu (desktop)
+ ******************************************************************************/
+
+@media(min-width: 992px)
+{
+  #navbar-menu
+  {
+    float: right;
+  }
+
+  [dir="rtl"] #navbar-menu
+  {
+    float: left;
+  }
+
+  #navbar-menu > li,
+  #navbar-menu > li > a
+  {
+    display: inline-block;
+  }
+
+  #navbar-menu > li > a
+  {
+    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: 9001;
+    background-color: #292929;
+  }
+
+  [dir="rtl"] #navbar-locale-menu
+  {
+    right: auto;
+    left: 0px;
+  }
+}
+
+/* #navbar #navbar-menu (mobile)
+ ******************************************************************************/
+
+@media(max-width: 991px)
+{
+  #navbar-menu
+  {
+    display: none;
+    float: left;
+    clear: both;
+    width: 100%;
+    background-color: #292929;
+  }
+
+  #navbar-menu.visible
+  {
+    display: block;
+  }
+
+  #navbar-menu li a
+  {
+    padding: 0.75em 1em;
+  }
+
+  #navbar-menu li a:hover,
+  #navbar-menu li a:active,
+  #navbar-menu li a:focus
+  {
+    background-color: #434343;
+  }
+}