Issue 5634 - Replaced logo and refactored navbar width and colors

static/css/main.css

Index: static/css/main.css
===================================================================
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,11 +1,125 @@
-*
+
+/* cyrillic-ext */

[juliandoucette, 2017/09/28 01:00:28]

Note: This is temporary for this review only because I couldn't find a download
link for this web font in these formats online.

[ire, 2017/09/28 08:38:43]

Acknowledged.

+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlIXYUqYVJeq1_JtQruA3_e8.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlExulUiGX8tUMVYeuJmbj48.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlBA0E65p__AYvizJB6RduYY.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlC7-kXQoo3swP0nQ6K7J6xc.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlCxe5Tewm2_XWfbGchcXw4g.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlIa1YDtoarzwSXxTHggEXMw.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlJbPFduIYtoLzwST68uhz_Y.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: bold;
+  font-weight: 600;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGGWGG8n76xaP_JUl9houU473rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: bold;
+  font-weight: 600;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGMP5gXq4cN8pjVji5g2q9Mf3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: bold;
+  font-weight: 600;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGIwxT-R1rCKQkeTtsDWzfjL3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: bold;
+  font-weight: 600;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGFCUBMgATkHAQY-Bv-74xcn3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: bold;
+  font-weight: 600;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGMZXFz2iDKd7GJNSaxRYiSj3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: bold;
+  font-weight: 600;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGKyGJhAh-RE0BxGcd_izyev3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: bold;
+  font-weight: 600;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGMzFoXZ-Kj537nB_-9jJhlA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+html
 {
-  font-family: Arial, sans;
+  font-family: 'Source Sans Pro', sans-serif;

[ire, 2017/09/28 08:38:43]

Note (for another issue probably): I think we should use `font-display: swap` on
the @font-faces and provide a system font fallback for our font-families.

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

Even though support is low, it's doesn't interfere with non-supporting browsers
and is a good performance improvement for those that do.

[ire, 2017/09/28 08:38:43]

NIT: Double quotation marks (also elsewhere in the file)

   font-size: 16px;
 }
 
 body
 {
   margin: 0;
   line-height: 1.5;
 }
@@ -48,205 +162,290 @@
 
 nav ul
 {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-nav a:link, nav a:visited
+nav a:link,
+nav a:visited
 {
   color: #7d7d7d;
   text-decoration: none;
 }
 
 nav a:hover
 {
   text-decoration: underline;
 }
 
-header
+.container
 {
-  display: block;
-  position: relative;
-  background: white;
-  border: 1px solid #d9d9d9;
-  border-top: none;
-  box-shadow: 1px 1px 0 0 #d9d9d9;
-  z-index: 1;
+  max-width: 1170px;
 }
 
-header nav li
+@media (min-width: 1200px)

[juliandoucette, 2017/09/28 01:00:27]

Done.

[juliandoucette, 2017/09/28 01:00:28]

Note: 1200 = 1170 + 30... This is an artifact left-over from when I applied
margin/padding differently. It should be 1170.

[ire, 2017/09/28 08:38:42]

Acknowledged.

 {
-  padding: 0px 5px;
+  .container
+  {
+    margin: 0 auto;
+  }
 }
 
-header nav li.selected
+#navbar-primary
 {
-  color: #db1313;
-  text-shadow: 1px 1px 1px #eee;
-  cursor: default;
-}
-
-header nav li.install-link a
-{
-  color: #048e48;
+  background-color: #c70d2c;
 }
 
-header nav li.install-link .install-link-icon
+#navbar-logo
 {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  background-position: -167px -13px;
+  padding: 0px 15px;
+  color: #fff;
 }
 
-.language-entry a
+#navbar-logo:hover,
+#navbar-logo:active,
+#navbar-logo:focus
 {
-  display: block;
+  background-color: #AE0013;
+  text-decoration: none;
 }
 
-#flag-ar

[juliandoucette, 2017/09/28 01:00:27]

Note: I probably didn't need to remove these in this issue. I may have forgotten
artifacts of these flags elsewhere.

[ire, 2017/09/28 08:38:43]

Ack. Do you want to keep them and remove the flags completely in a separate
issue? I don't mind either way

+#navbar-logo,
+#navbar-logo > *
 {
-  background-position: 0px 0px;
+  display: block;
+  float: left;
 }
 
-#flag-bg
+[dir="rtl"] #navbar-logo,
+[dir="rtl"] #navbar-logo > *
 {
-  background-position: -17px 0px;
+  float: right;
 }
 
-#flag-de
+#navbar-logo > img
 {
-  background-position: -34px 0px;
-}
-
-#flag-en
-{
-  background-position: -51px 0px;
+  height: 48px;
+  padding: 11px 0px;
+  margin: 0px 15px 0px 0px;
 }
 
-#flag-es
+[dir="rtl"] #navbar-logo > img
 {
-  background-position: -68px 0px;
-}
-
-#flag-sk
-{
-  background-position: -85px 0px;
+  margin: 0px 0px 0px 15px;
 }
 
-#flag-fr
+#navbar-logo > span
 {
-  background-position: 0px -12px;
+  line-height: 70px;
+  font-size: 22px;
 }
 
-#flag-el
+#navbar-nav li
 {
-  background-position: -85px -12px;
+  list-style-type: none;
 }
 
-#flag-he
+#navbar-nav a
 {
-  background-position: -17px -12px;
+  color: #fff;
+  text-decoration: none;
 }
 
-#flag-it
-{
-  background-position: -85px -24px;
-}
-
-#flag-hu
-{
-  background-position: -34px -12px;
-}
-
-#flag-ko
-{
-  background-position: -51px -12px;
-}
-
-#flag-ja
-{
-  background-position: -102px 0px;
-}
-
-#flag-lt
+@media(max-width: 999px)
 {
-  background-position: -68px -12px;
-}
+  #navbar-primary
+  {
+    min-height: 70px;
+  }
+
+  #navbar-menu
+  {
+    display: block;
+  }
+
+  #navbar-menu,
+  #navbar-menu > img
+  {
+    float: right;
+  }
 
-#flag-nl
-{
-  background-position: 0px -24px;
-}
+  [dir="rtl"] #navbar-menu,
+  [dir="rtl"] #navbar-menu > img
+  {
+    float: left;
+  }
+
+  #navbar-menu > img
+  {
+    display: inline-block;
+    height: 25px;
+    padding: 22.5px 15px;
+  }
+
+  #navbar-menu:hover,
+  #navbar-menu:active,
+  #navbar-menu:focus
+  {
+    background-color: #AE0013;
+  }
 
-#flag-pl
-{
-  background-position: -102px -12px;
-}
+  #navbar-nav
+  {
+    display: none;
+    float: left;
+    background-color: #292929;
+  }
+
+  #navbar-nav.visible
+  {
+    display: block;
+  }
+
+  #navbar-nav li,
+  #navbar-nav li a
+  {
+    display: block;
+  }
 
-#flag-pt_BR
-{
-  background-position: -17px -24px;
-}
+  #navbar-nav li a
+  {
+    font-size: 20px;
+    line-height: 60px;
+    padding: 0px 20px;
+  }
 
-#flag-pt_PT
-{
-  background-position: -102px -24px;
+  #navbar-nav li a:hover,
+  #navbar-nav li a:active,
+  #navbar-nav li a:focus
+  {
+    background-color: #434343;
+  }
+
+  #locales li,
+  #locales  a
+  {
+    display: inline-block;
+  }
+
+  #navbar-nav #selected-locale
+  {
+    display: none;
+  }
 }
 
-#flag-ru
-{
-  background-position: -34px -24px;
-}
-
-#flag-zh_CN
-{
-  background-position: -51px -24px;
-}
-
-#flag-zh_TW
-{
-  background-position: -68px -24px;
-}
-
-a[hreflang="de"]:not(:lang(de)):after,
-a[hreflang="en"]:not(:lang(en)):after
+@media(min-width: 1000px)
 {
-  display: inline-block;
-  width: 16px;
-  height: 11px;
-  background-image: url(../img/sprite-flags.png);
-  content: "";
-  margin-left: 2px;
-}
+  #navbar-primary
+  {
+    height: 70px;
+  }
+
+  #navbar-nav
+  {
+    float: right;
+  }
+
+  [dir="rtl"] #navbar-nav
+  {
+    float: left;
+  }
 
-a[hreflang="de"]:not(:lang(de)):after
-{
-  background-position: -34px 0px;
-}
+  #navbar-nav > li,
+  #navbar-nav > li > a
+  {
+    display: inline-block;
+  }
+
+  #navbar-nav > li > a
+  {
+    padding: 0px 15px;
+    font-size: 18px;
+    line-height: 70px;
+  }
+
+  #navbar-nav > li > a:hover,
+  #navbar-nav > li > a:active,
+  #navbar-nav > li > a:focus
+  {
+    background-color: #AE0013;
+  }
+
+  #locale
+  {
+    position: relative;
+  }
 
-a[hreflang="en"]:not(:lang(en)):after
-{
-  background-position: -51px 0px;
-}
+  #locales
+  {
+    position: absolute;
+    display: none;
+    min-width: 160px;
+    max-height: 384px;
+    max-height: 50vh;
+    top: 100%;
+    right: 0px;
+    overflow: auto;
+    z-index: 1000;
+  }
+
+  [dir="rtl"] #locales
+  {
+    right: auto;
+    left: 0px;
+  }
+
+  #locales.visible
+  {
+    display: block;
+  }
+
+  #locales > li,
+  #locales > li > a
+  {
+    display: block;
+    white-space: nowrap;
+  }
 
-#language-selector a:after
-{
-  display: none;
-}
+  #locales > li > a
+  {
+    padding: 0px 15px;
+    font-size: 16px;
+    line-height: 50px;
+    background-color: #292929;
+    text-decoration: none;
+  }
+
+  #locales > li > a:hover,
+  #locales > li > a:active,
+  #locales > li > a:focus
+  {
+    background-color: #434343;
+  }
 
-#logo
-{
-  position: absolute;
-  width: 128px;
-  height: 128px;
-  background-position: -83px -83px;
+  #selected-locale::after

[ire, 2017/09/28 08:38:43]

:after instead of ::after for IE8

+  {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: .255em;

[ire, 2017/09/28 08:38:42]

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

+    vertical-align: .255em;
+    content: "";
+    border-top: .3em solid;
+    border-right: .3em solid transparent;
+    border-left: .3em solid transparent;
+  }
+
+  #navbar-menu
+  {
+    display: none;
+  }
 }
 
 #content h1
 {
   font-size: 30px;
 }
 
 #content h2