Issue 5634 - Replaced logo and refactored navbar width and colors

static/css/main.css

-*
+
+/* cyrillic-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/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;
   font-size: 16px;
 }
 
 body
 {
   margin: 0;
   line-height: 1.5;
 }
 
 a img
@@ skipping 32 matching lines @@
   background-repeat: no-repeat;
 }
 
 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
+{
+  max-width: 1170px;
+}
+
+@media (min-width: 1170px)

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

I assume the plan is to move to one CSS file instead of breaking them down by
device size?

[juliandoucette, 2017/10/04 15:33:28]

Yes. Unless there is a good reason to separate them that I don't know about yet.

[ire, 2017/10/04 21:44:25]

I think there are performance reasons (because only the CSS file matching the
media query will be loaded initially. The others won't block page render). But
I'm not sure if the improvement will be significant enough. Anyway, I'm for us
moving to one CSS file, was just asking to make sure we're on the same page.

+{
+  .container
+  {
+    margin: 0 auto;
+  }
+}
+
+#navbar-primary
+{
+  background-color: #c70d2c;
+}
+
+#navbar-logo
+{
+  padding: 0px 15px;
+  color: #fff;
+}
+
+#navbar-logo:hover,
+#navbar-logo:active,
+#navbar-logo:focus
+{
+  background-color: #AE0013;
+  text-decoration: none;
+}
+
+#navbar-logo,
+#navbar-logo > *
 {
   display: block;
-  position: relative;
-  background: white;
-  border: 1px solid #d9d9d9;
-  border-top: none;
-  box-shadow: 1px 1px 0 0 #d9d9d9;
-  z-index: 1;
-}
-
-header nav li
-{
-  padding: 0px 5px;
-}
-
-header nav li.selected
-{
-  color: #db1313;
-  text-shadow: 1px 1px 1px #eee;
-  cursor: default;
-}
-
-header nav li.install-link a
-{
-  color: #048e48;
-}
-
-header nav li.install-link .install-link-icon
-{
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  background-position: -167px -13px;
-}
-
-.language-entry a
-{
-  display: block;
-}
-
-#flag-ar
-{
-  background-position: 0px 0px;
-}
-
-#flag-bg
-{
-  background-position: -17px 0px;
-}
-
-#flag-de
-{
-  background-position: -34px 0px;
-}
-
-#flag-en
-{
-  background-position: -51px 0px;
-}
-
-#flag-es
-{
-  background-position: -68px 0px;
-}
-
-#flag-sk
-{
-  background-position: -85px 0px;
-}
-
-#flag-fr
-{
-  background-position: 0px -12px;
-}
-
-#flag-el
-{
-  background-position: -85px -12px;
-}
-
-#flag-he
-{
-  background-position: -17px -12px;
-}
-
-#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
-{
-  background-position: -68px -12px;
-}
-
-#flag-nl
-{
-  background-position: 0px -24px;
-}
-
-#flag-pl
-{
-  background-position: -102px -12px;
-}
-
-#flag-pt_BR
-{
-  background-position: -17px -24px;
-}
-
-#flag-pt_PT
-{
-  background-position: -102px -24px;
-}
-
-#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
-{
-  display: inline-block;
-  width: 16px;
-  height: 11px;
-  background-image: url(../img/sprite-flags.png);
-  content: "";
-  margin-left: 2px;
-}
-
-a[hreflang="de"]:not(:lang(de)):after
-{
-  background-position: -34px 0px;
-}
-
-a[hreflang="en"]:not(:lang(en)):after
-{
-  background-position: -51px 0px;
-}
-
-#language-selector a:after
-{
-  display: none;
-}
-
-#logo
-{
-  position: absolute;
-  width: 128px;
-  height: 128px;
-  background-position: -83px -83px;
+  float: left;
+}
+
+[dir="rtl"] #navbar-logo,
+[dir="rtl"] #navbar-logo > *
+{
+  float: right;
+}
+
+#navbar-logo > img
+{
+  height: 48px;
+  padding: 11px 0px;
+  margin: 0px 15px 0px 0px;
+}
+
+[dir="rtl"] #navbar-logo > img
+{
+  margin: 0px 0px 0px 15px;
+}
+
+#navbar-logo > span
+{
+  line-height: 70px;
+  font-size: 22px;
+}
+
+#navbar-nav li
+{
+  list-style-type: none;
+}
+
+#navbar-nav a
+{
+  color: #fff;
+  text-decoration: none;
+}
+
+@media(max-width: 999px)
+{
+  #navbar-primary
+  {
+    min-height: 70px;
+  }
+
+  #navbar-menu
+  {
+    display: block;
+  }
+
+  #navbar-menu,
+  #navbar-menu > img
+  {
+    float: right;
+  }
+
+  [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;
+  }
+
+  #navbar-nav
+  {
+    display: none;
+    float: left;
+    background-color: #292929;
+  }
+
+  #navbar-nav.visible
+  {
+    display: block;
+  }
+
+  #navbar-nav li,
+  #navbar-nav li a
+  {
+    display: block;
+  }
+
+  #navbar-nav li a
+  {
+    font-size: 20px;
+    line-height: 60px;
+    padding: 0px 20px;
+  }
+
+  #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;
+  }
+}
+
+@media(min-width: 1000px)
+{
+  #navbar-primary
+  {
+    height: 70px;
+  }
+
+  #navbar-nav
+  {
+    float: right;
+  }
+
+  [dir="rtl"] #navbar-nav
+  {
+    float: left;
+  }
+
+  #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;
+  }
+
+  #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;
+  }
+
+  #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;
+  }
+
+  #selected-locale::after
+  {
+    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-menu
+  {
+    display: none;
+  }
 }
 
 #content h1
 {
   font-size: 30px;
 }
 
 #content h2
 {
   font-weight: bold;
@@ skipping 159 matching lines @@
 
 [dir="ltr"] .alert
 {
   border-left: 5px solid #d14841;
 }
 
 [dir="rtl"] .alert
 {
   border-right: 5px solid #d14841;
 }