Add Gitter Sidecar widget to docs site (#1332)

* Add Gitter Sidecar to Docs & Community pages.

* Add styles to match Gitter Sidecar button to site theme.

* Fix Gitter button outline when focused.

* Style Gitter button :active state.

website/site/layouts/partials/footer.html

@@ -34,5 +34,13 @@ debug: false // Set debug to true if you want to inspect the dropdown
   <script src="/widgets.js"></script>
 {{- end -}}
 <script async defer src="https://buttons.github.io/buttons.js"></script>
+{{ if or (eq .Section "docs") (eq .Title "Docs") (eq .Title "Community") }}
+<script>
+  ((window.gitter = {}).chat = {}).options = {
+    room: 'netlify/NetlifyCMS'
+  };
+</script>
+<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
+{{ end }}
 </body>
 </html>

website/src/css/imports/gitter.css

@@ -0,0 +1,26 @@
+.gitter-open-chat-button {
+  &,
+  &:visited {
+    padding: $tiny $small;
+    font-family: $roboto;
+    font-size: $tiny;
+    letter-spacing: 0.5px;
+    color: $grey;
+    background-color: $green;
+    box-shadow: 0 2px 16px 0 rgba(68,74,87,0.15), 0 1px 4px 0 rgba(68,74,87,0.30);
+  }
+
+  &:hover {
+    background-color: $lightGreen;
+    box-shadow: 0 2px 16px 0 rgba(68,74,87,0.25), 0 1px 4px 0 rgba(68,74,87,0.50);
+  }
+
+  &:focus {
+    box-shadow: 0 0 6px 3px rgba(62,160,127,.6);
+    transition: none;
+  }
+
+  &:active {
+    color: $lightGrey;
+  }
+}

website/src/css/main.css

@@ -10,3 +10,4 @@
 @import "imports/docs.css";
 @import "imports/widgets.css";
 @import "imports/footer.css";
+@import "imports/gitter.css";