Noissue - Update font-family to Source Sans Pro on abp.org

static/css/main.css

-@font-face

[saroyanm, 2018/02/14 16:49:29]

Question: How much effort it would be to include Fonts implementation in the
Websites default ?
Is there a such plan ?

(I assume we use same fonts across all websites)

[ire, 2018/02/15 17:21:47]

I think we would ideally want to have this font in website-defaults and share it
across websites, but it loading a file directly from website-defaults would
require that we add a build step (since the website-defaults repository would be
managed via npm). 

We don't currently have website-defaults in this project (currently Julian has
been manually adding the CSS to defaults.css), so I don't think doing this would
work until we decide to add it. 

[juliandoucette, 2018/02/19 11:32:48]

Acknowledged.

-{
-  font-family: "Source Sans Pro";

[saroyanm, 2018/02/14 16:49:30]

Suggestion/Note: Doesn't necessarily need to be included in the current
review/release.

I assume current fonts doesn't cover all supported languages ?
For example I assume they do not contain ex. cyrillic, greek characters, but
rather only Latin.

With: https://codereview.adblockplus.org/29654555/ we are trying to fix that for
the UI, but I think it's also relevant to the websites.

[ire, 2018/02/15 17:21:46]

From my tests (viewing the homepage in all the different languages) there didn't
seem to be any issue with any of the languages. But from looking though the
review you mentioned, it seems like you did come across issues in certain
languages. If that is the case, we could follow your methodology here of loading
different fonts for the different subsets.

I would prefer to start with just this and have a tester see if there is an
issue to begin with though, just to make sure it's actually necessary in our
case. What do you think?

[juliandoucette, 2018/02/19 11:32:48]

I think that we can start with Latin only in main.css and include variants
as-needed via template (separately, assuming that including this latin font will
not have a negative impact on existing translations). We should ask Tamara
though. Will you do that Ire?

-  font-weight: 400;
-  font-style: normal;
-  src: local("Source Sans Pro"),
-       local("Source-Sans-Pro-400"),
-       url("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.woff2") format("woff2"),
-       url("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.woff") format("woff");
-}
-
-@font-face
-{
-  font-family: "Source Sans Pro";
-  font-weight: 600;
-  font-style: normal;
-  src: local("Source Sans Pro Semibold"),
-       local("Source-Sans-Pro-600"),
-       url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff2") format("woff2"),
-       url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff") format("woff");
-}
-
 body
 {
   font-family: "Source Sans Pro", Arial, sans-serif;
   margin: 0;
-}
-
-#content
+  /* Start below fixed navbar */
+  padding-top: 4em;
+  line-height: 1.5;
+}
+
+#content,
+#blog
 {
   padding-bottom: 2em;
 }
 
 a img
 {
   border: none;
 }
 
 a:link, a:visited
@@ skipping 17 matching lines @@
   padding: 1em;
   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;
-}
-
-#adblock-browser-notification
-{
-  text-align: center;
-}
-
-#adblock-browser-notification a
-{
-  font-weight: bold;
-}
-
-#adblock-browser-notification img
-{
-  vertical-align: bottom;
-  width: 25px;
-  height: 25px;
-}
-
-#adblock-browser-notification span
-{
-  white-space: nowrap;
-  margin-left: 1em;
-}
-
-[dir="rtl"] #adblock-browser-notification span
-{
-  margin-left: 0;
-  margin-right: 1em;
 }
 
 .toc
 {
   display: inline-block;
   border: 1px solid #aaa;
   background: #fff;
   padding: 16px 20px;
 }
 
@@ skipping 76 matching lines @@
 .section
 {
   padding: 2em 0;
 }
 
 /******************************************************************************
  * .content
  *****************************************************************************/
 
 .content h1,
+.content .h1,
 .content h2,
 .content h3,
 .content h4,
 .content h5
 {
   font-weight: bold;
   margin: 32px 0 16px 0;
   margin: 2rem 0 1rem 0;
-}
-
-.content h1 { font-size: 1.8em; }
-.content h2 { font-size: 1.4em; }
-.content h3 { font-size: 1.3em; }
-.content h4 { font-size: 1.2em; }
-.content h5 { font-size: 1.1em; }
+  line-height: 1.4;
+}
+
+.content h1,
+.content .h1 { font-size: 1.4em; }
+.content h2 { font-size: 1.3em; }
+.content h3 { font-size: 1.2em; }
+.content h4 { font-size: 1.1em; }
+.content h5 { font-size: 1em; }
+
+@media(min-width: 576px)
+{
+  .content h1,
+  .content .h1 { font-size: 1.6em; }
+  .content h2 { font-size: 1.4em; }
+  .content h3 { font-size: 1.3em; }
+  .content h4 { font-size: 1.2em; }
+  .content h5 { font-size: 1.1em; }
+}
 
 @media(min-width: 768px)
 {
-  .content h1 { font-size: 2.4em; }
+  .content h1,
+  .content .h1
+  {
+    font-size: 2.4em;
+    line-height: 1.3;
+  }
+
   .content h2 { font-size: 1.6em; }
 }
 
 .content a,
 .content a:visited
 {
   color: #c70d2c;
 }
 
 /* Buttons
@@ skipping 32 matching lines @@
 .button.primary:hover
 {
   background-color: #E00F32;
 }
 
 .button.primary:active
 {
   background-color: #AD102A;
 }
 
-.button.inverse,
-a.button.inverse
-{
-  background: none;
+.button.accent,
+.button.accent:visited
+{
+  background: #077CA6;
   color: #fff;
   margin-left: 2px;
   margin-right: 2px;
-  border: 1px solid #fff;
-}
-
-.button.inverse:hover,
-.button.inverse:focus
-{
-  box-shadow: inset 0 0 0 2px #fff;
-}
-
-.button.inverse:active
-{
-  background-color: #fff;
-}
-
-.bg-accent .button.inverse:active
+}
+
+.button.accent:hover,
+.button.accent:active,
+.button.accent:focus
+{
+  box-shadow: inset 0 0 0 3px #005D80;
+}
+
+/*******************************************************************************
+ * .fg-* utilities
+ ******************************************************************************/
+
+.fg-accent
 {
   color: #077CA6;
 }
 
-/*******************************************************************************
- * .bg-* utilities
- ******************************************************************************/
-
-.bg-accent
-{
-  color: #fff;
-  background-color: #077CA6;
+.bg-secondary
+{
+  color: #000;
+  background-color: #F4F4F4;
 }
 
 /*******************************************************************************
  * #navbar
  ******************************************************************************/
 
-#navbar
+ #navbar
 {
   min-height: 4em;
   background-color: #c70d2c;
+  position: fixed;
+  z-index: 2;
+  width: 100%;
+  top: 0;
+  transition: top 0.2s ease-in-out;
 }
 
 @media(max-width: 991px)
 {
   #navbar
   {
     overflow: auto;
   }
 }
 
@@ skipping 221 matching lines @@
 
 @media(max-width: 991px)
 {
   #navbar-menu
   {
     display: none;
     float: left;
     clear: both;
     width: 100%;
     background-color: #292929;
+    overflow-y: scroll;
+    max-height: 416px;
+    max-height: 80vh;
   }
 
   #navbar-menu.visible
   {
     display: block;
   }
 
   #navbar-menu li a
   {
     padding: 0.75em 1em;
@@ skipping 167 matching lines @@
   {
     display: none;
   }
 
   /* overriding display:none above */
   #footer #social-list
   {
     display: block;
   }
 }
+
+/* Video
+ ****************************************************************************/
+
+.video-parent
+{
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 1px solid #c9c9c9;
+  box-shadow: 1px 1px 0 0 #dbdbdb;
+  overflow: hidden;
+}
+
+.video-parent.has-iframe::before
+{
+  display: block;
+  content: "";
+  padding-top: 56.25%;
+}
+
+.video-parent iframe
+{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.video-link
+{
+  display: block;
+  position: relative;
+}
+
+.video-thumbnail
+{
+  width: 100%;
+  transition: opacity 0.8s;
+  opacity: 0.2;
+}
+
+.hide-disclaimer .video-thumbnail
+{
+  opacity: 1;
+}
+
+.video-disclaimer
+{
+  visibility: visible;
+  opacity: 1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 1em;
+  background-color: #fff;
+  font-size: 0.9em;
+  text-align: center;
+  transition: opacity 0.8s;
+}
+
+.hide-disclaimer .video-disclaimer
+{
+  visibility: hidden;
+  opacity: 0;
+}
+
+.video-play
+{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80px;
+  margin-top: -60px;
+  margin-left: -40px;
+}
+
+.hide-disclaimer .video-play
+{
+  margin-top: -40px;
+}