Update sspbc-adapter branch

.gitignore

@@ -7,3 +7,5 @@ Gemfile.lock
 /vendor
 /.bundle
 .jekyll-metadata
+*ads.txt.bkp*
+

README.md

@@ -6,6 +6,7 @@ Please see the sections below for more information.
 + [License](#license)
 + [Prerequisites](#prerequisites)
 + [Running Jekyll Locally](#running-jekyll-locally)
++ [Building Assets](#building-assets)
 + [The Downloads Page](#the-downloads-page)
 + [Thanks](#thanks)
 
@@ -38,6 +39,12 @@ The site uses [Jekyll](https://jekyllrb.com/), which is written in the [Ruby](ht
 1. gem install github-pages
 1. start Jekyll as described below
 
+For CSS, the site uses Laravel Mix to build CSS from Sass (scss-flavored) source files. Under the hood Laravel Mix uses Webpack.
+
+1. follow the instructions at https://nodejs.dev to install Node.js for your OS
+1. `npm install` to install packages for building assets
+1. build assets as described below
+
 <a name="running-jekyll-locally" />
 
 ## Running Jekyll Locally
@@ -68,6 +75,14 @@ Configuration file: /Users/rloveland/Dropbox/Code/prebid.github.io/_config.yml
 
 Open the `Server address` URL in your browser, and you should see a locally running copy of the site.
 
+<a name="building-assets"/>
+
+## Building Assets
+
+- `npm run dev` to build unminified CSS for development
+- `npm run prod` to build minified CSS for production
+- `npm run watch` to use [Browsersync](https://browsersync.io) to rebuild CSS on demand and reload the browser
+
 ## The Downloads Page
 
 Please don't submit PRs to the Prebid.org downloads page. That page gets updated in tandem with the Prebid.js release process.

_assets/sass/abstracts/_bootstrap-variables.scss

@@ -0,0 +1,37 @@
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1200px
+);
+
+$spacer: 1rem;
+$spacers: (
+  6: ($spacer * 3.75),
+  7: ($spacer * 4.5),
+  8: ($spacer * 5),
+);
+
+$grid-gutter-width: 20px;
+$body-bg: #eceeef;
+
+$card-border-radius: 0;
+$card-spacer-x: 30px;
+
+$table-accent-bg: $t-code-bg;
+$table-border-color: $t-divider-color;
+$table-color: $t-text-color;
+
+$navbar-padding-y: 0;
+$nav-link-padding-y: 0;
+$navbar-nav-link-padding-x: 0;
+$navbar-nav-link-padding-y: 0;
+$navbar-dark-color: adjust-color($t-text-color--reverse, $alpha: -0.3);
+
+$dropdown-border-radius: 0;
+$dropdown-border-width: 0;
+$dropdown-link-color: $t-text-color;
+$dropdown-link-hover-bg: transparent;
+$dropdown-link-hover-color: $t-anchor-color;
+$dropdown-spacer: 0;
+$dropdown-padding-y: 24px;

_assets/sass/abstracts/_breakpoints.scss

@@ -0,0 +1,50 @@
+//  Breakpoint Declarations
+//
+//  Responsive breakpoint declarations
+// 	Breakpoints are matched in Responsive VC Design Options Plugin
+//	http://actian/wp-admin/admin.php?page=bb_edo_all_devices
+//
+//	Markup:
+//	'phone-xs': 320px,
+//	'phone-sm': 480px,
+//	'phone': 767px, // Page Builder Default
+//	'tablet': 960px, // Page Builder Default
+//	'desktop-sm': 1200px,
+//	'desktop': 1980px,
+//
+// Styleguide Layout.Breakpoints
+
+// Site width
+$t-site-width-pixels: 1180;
+$t-site-width: 1180px;
+$t-site-width--padded: 1210px;
+
+$t-phone-xs: 320px;
+$t-phone-sm: 480px;
+$t-phone-md: 640px;
+$t-phone: 767px; // Page Builder Default
+$t-tablet: 992px; // Page Builder Default
+$t-ipad-landscape: 1024px;
+$t-desktop-aio: 1257px; // Site width + scrollbar (17px) + margins (60px). *** This is where the content starts to shrink. ***
+$t-desktop: 1200px; // Page Builder Default
+$t-fullscreen: 1903px; // 1920 - 17px scrollbar
+
+$t-screen-sm-min: $t-phone;
+$t-screen-md-min: $t-tablet;
+$t-screen-lg-min: $t-desktop;
+
+$t-screen-xs-max: $t-screen-sm-min - 1;
+$t-screen-sm-max: $t-screen-md-min - 1;
+$t-screen-md-max: $t-screen-lg-min - 1;
+
+$breakpoints: (
+  'phone-xs': $t-phone-xs,
+  'phone-sm': $t-phone-sm,
+  'phone-md': $t-phone-md,
+  'phone': $t-phone, 
+  'tablet': $t-tablet, 
+  'ipad-landscape': $t-ipad-landscape, 
+  'site-width': $t-site-width,
+  'desktop': $t-desktop,
+  'fullscreen': $t-fullscreen,
+) !default;

_assets/sass/abstracts/_colors.scss

@@ -0,0 +1,27 @@
+// Colors
+//
+// These are named colors that are a part of the color palette or tint stack
+// for the design. Colors should be named by how they look, not by where they
+// are used.
+//
+// Markup: color-swatches.hbs
+//
+// Weight: -100
+//
+// Styleguide Colors
+
+$color--black: #000;
+$color--white: #fff;
+$color--carbon: #333;
+$color--blue: #1BA9E1;
+$color--grey: #797F90;
+$color--orange: #FF6F00;
+$color--dark-grey: #505050;
+$color--dove-cry-gray: #707070;
+$color--aqua: #ECF3F5;
+$color--light-iron: #dddfe3;
+$color--cornflower-blue: #28AEE2;
+
+$sg-colors: (
+
+);

_assets/sass/abstracts/_functions.scss

@@ -0,0 +1,52 @@
+@function convert-angle($value, $unit) {
+  $convertable-units: deg grad turn rad;
+  $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);
+  @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
+    @return $value
+      / nth($conversion-factors, index($convertable-units, unit($value)))
+      * nth($conversion-factors, index($convertable-units, $unit));
+  }
+
+  @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";
+}
+
+/// Test if `$value` is an angle
+/// @param {*} $value - Value to test
+/// @return {Bool}
+@function is-direction($value) {
+  $is-direction: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
+  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
+
+  @return $is-direction or $is-angle;
+}
+
+/// Convert a direction to legacy syntax
+/// @param {Keyword | Angle} $value - Value to convert
+/// @require {function} is-direction
+/// @require {function} convert-angle
+@function legacy-direction($value) {
+  @if is-direction($value) == false {
+    @warn "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be an angle or a direction";
+  }
+
+  $conversion-map: (
+    to top          : bottom,
+    to top right    : bottom left,
+    to right top    : left bottom,
+    to right        : left,
+    to bottom right : top left,
+    to right bottom : left top,
+    to bottom       : top,
+    to bottom left  : top right,
+    to left bottom  : right top,
+    to left         : right,
+    to left top     : right bottom,
+    to top left     : bottom right
+  );
+
+  @if map-has-key($conversion-map, $value) {
+    @return map-get($conversion-map, $value);
+  }
+
+  @return 90deg - convert-angle($value, 'deg');
+}