Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/css/main.css

Issue 29551738: Issue 5634 - Replaced logo and refactored navbar width and colors (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Major refactoring & mobile styles Created Sept. 28, 2017, 12:45 a.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | static/css/main-desktop.css » ('j') | templates/default.tmpl » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 becau
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 shou
ire 2017/09/28 08:38:43 NIT: Double quotation marks (also elsewhere in the
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
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 th
ire 2017/09/28 08:38:43 Ack. Do you want to keep them and remove the flags
+#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 decima
+ 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
« no previous file with comments | « no previous file | static/css/main-desktop.css » ('j') | templates/default.tmpl » ('J')

Powered by Google App Engine
This is Rietveld