Improved gitter integration

content/community/contents.lr

@@ -15,14 +15,8 @@ Here is where you can find other Lektor users:
 
 * [Find us on Stack Overflow](http://stackoverflow.com/questions/tagged/lektor)
 * [Ask us a question on Stack Overflow](http://stackoverflow.com/questions/ask?tags=lektor)
-* [Chat with us on Gitter](gitter/)
+* [Chat with us on Gitter :js-gitter-toggle-chat-button](gitter.im/lektor/lektor)
 
 Want to get in contact with us otherwise?
 
 * [Reach us via Twitter at @getlektor](https://twitter.com/getlektor)
-
-## Chat with Us
-
-<iframe src="https://gitter.im/lektor/lektor/~embed" style="width: 100%; height: 500px; border: 1px solid #eee"></iframe>
-----
-class: default

templates/layout.html

@@ -75,6 +75,11 @@
 
   <script type=text/javascript src="{{ '/static/app.js'|asseturl }}" charset="utf-8"></script>
   <script>
+    ((window.gitter = {}).chat = {}).options = {
+      room: 'lektor/lektor',
+      activationElement: null
+    };
+    document.write('<button class="js-gitter-toggle-chat-button">Toggle Chat</button>');
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -84,4 +89,5 @@
   </script>
   <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
   <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+  <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
 </body>

webpack/scss/main.scss

@@ -875,3 +875,29 @@ div.doc-styling div.gsc-control-cse {
   font-size: 13px;
   padding-top: 5px;
 }
+
+/* gitter */
+aside.gitter-chat-embed {
+  z-index: 10000;
+}
+
+button.js-gitter-toggle-chat-button {
+  color: white;
+  border: none;
+  cursor: pointer;
+  position: fixed;
+  right: 10px;
+  bottom: 0;
+  background-color: $brand-primary;
+  font-family: $font-family-base;
+  font-weight: bold;
+  padding: 7px 20px;
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 15px;
+
+  &:hover {
+    background-color: darken($brand-primary, 15);
+    text-decoration: none;
+  }
+}