Add Droplet & contribution callouts (#216)

* Add the initial Droplet callout

* Add the initial Contribute callout

* Show contribute callout on scroll

* Add close button to contribute callout

* Add/update styling copyright header

* Add analytics events for the callouts

* Tweak how we send analytics events

* Add some z-index to the floating callout

* Fix all the failing tests

src/nginxconfig/scss/_callout.scss

@@ -0,0 +1,98 @@
+/*
+Copyright 2021 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.callout {
+  background: $callout;
+  border-radius: $border-radius;
+  margin: 2rem .5rem 1rem;
+  padding: 1.875rem 1.875rem 1.5rem;
+  transition: opacity $transition;
+
+  &.floating {
+    bottom: 0;
+    box-shadow: inset 0 0 0 $border-size $border-color;
+    max-width: calc(100% - 1rem);
+    position: fixed;
+    right: 0;
+    width: 22rem;
+    z-index: 100;
+
+    .close {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      margin: 0 0 1.25rem;
+
+      p {
+        flex-grow: 1;
+        margin: 0 .5rem 0 0;
+      }
+
+      a {
+        color: $muted;
+        margin: 0 .5rem;
+        text-decoration: none;
+        transition: color $transition;
+
+        &:hover {
+          color: $text;
+        }
+      }
+    }
+
+    p {
+      @include sailec-regular;
+    }
+
+    .button {
+      display: block;
+      height: 3rem;
+      line-height: 3rem;
+    }
+  }
+
+  p {
+    @include sailec-medium;
+
+    font-size: 15px;
+    margin: 0;
+    text-align: left;
+
+    a {
+      border-bottom: $border-size dotted $primary;
+      padding: 0 0 $border-size;
+      text-decoration: none;
+
+      &:hover {
+        border-bottom-color: $primary-hover;
+      }
+
+      + i {
+        margin: 0 0 0 .25rem;
+      }
+    }
+  }
+}

src/nginxconfig/scss/style.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2021 DigitalOcean
 
 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@@ -26,6 +26,7 @@ THE SOFTWARE.
 
 $header: #0071fe;
 $highlight: #f2c94c;
+$callout: #f3f5f9;
 @import "~do-bulma/src/style";
 
 .do-bulma {
@@ -47,6 +48,7 @@ $highlight: #f2c94c;
   @import "fields";
   @import "vue-select";
   @import "modals";
+  @import "callout";
   @import "setup";
   @import "code";
   @import "files";