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

static/css/main.css

-@font-face
-{
-  font-family: "Source Sans Pro";
-  font-weight: 400;
-  font-style: normal;
-  src: url("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.eot");

[juliandoucette, 2018/02/13 18:32:06]

I don't think this isn't necessary unless we want to load this font in IE
compatibility modes (which I don't think we do).

[ire, 2018/02/14 08:43:42]

Done.

-  src: url("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.eot?#iefix") format("embedded-opentype"),

[juliandoucette, 2018/02/13 18:32:05]

I don't think that this isn't necessary unless we want to load this font on IE
6-8 (which I don't think we do).

[ire, 2018/02/14 08:43:42]

Done.

-       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"),
-       url("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.ttf") format("truetype"),

[juliandoucette, 2018/02/13 18:32:06]

I don't think this is necessary unless we want to load this font on old versions
of mobile browsers (which I don't think we do).

Detail: This would be necessary to support Android >= 4.0.3 in our
browserlistrc. However, older versions of Android also imply older (less
capable) phones and slower network connection?

[ire, 2018/02/14 08:43:42]

Done.

-       url("../fonts/Source-Sans-Pro-400/Source-Sans-Pro-400.svg#SourceSansPro") format("svg");

[juliandoucette, 2018/02/13 18:32:06]

I don't think that this is necessary unless we want to support old versions of
iOS (which I don't think we do).

[ire, 2018/02/14 08:43:42]

Done.

-}
-
-@font-face
-{
-  font-family: "Source Sans Pro";
-  font-weight: 600;
-  font-style: normal;
-  src: url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.eot");
-  src: url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.eot?#iefix") format("embedded-opentype"),
-       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"),
-       url("../fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.ttf") format("truetype");
-}
-
 body
 {
   font-family: "Source Sans Pro", Arial, sans-serif;
-  font-size: 16px;

[juliandoucette, 2018/02/13 18:32:06]

I think we can rely on website-defaults to set (or intentionally not set) the
body font-size and weight.

[ire, 2018/02/14 08:43:42]

Done.

-  font-weight: 400;
   margin: 0;
+  /* Start below fixed navbar */
+  padding-top: 4em;
   line-height: 1.5;
 }
 
-#content
+#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;
+}