New design for the widgets section in the docs (#866)

* Initial commit for the new widgets section

* Placing all the widgets and refining the CSS and Hugo logic

* Initial commit for the new widgets section

* Placing all the widgets and refining the CSS and Hugo logic

* Rebased and updated the info according to @verythorough contribution

* Fixing the yaml codes for the relation and select widget sections

* Merging with widgets.md and app.j

* Fixing some silly mistakes (sorry!)

* Following @verythorough contributions :)

* Adding the markdown widget and fixing the widgets container background

* Adding the URL functionality and myself as a contributor :)

* Adding myself as a contributor :)

website/src/css/imports/widgets.css

@@ -0,0 +1,71 @@
+.widgets {
+    margin: 2rem 0;
+}
+
+.widgets__cloud {
+    margin: $micro calc(-$micro / 2);
+}
+
+.widgets__item {
+    color: $darkGrey;
+    border: 2px solid $darkGreen;
+    border-radius: $borderRadius;
+    padding: calc($micro /2) $micro;
+    margin: calc($micro / 2);
+    cursor: pointer;
+    transition: color .2s ease, background .2s ease;
+    display: inline-block;
+    font-weight: normal;
+}
+
+.widgets__item:hover, .widgets__item_active {
+    background: $darkGreen;
+    color: white !important;
+}
+
+.widgets__container {
+    margin: 1em 0;
+    background: $lightGrey;
+    border-radius: $borderRadius;
+    transition: height .15s ease;
+}
+
+.widget {
+    padding: .5em 1em;
+    display: none;
+}
+
+.widget_open {
+    display: block;
+}
+
+.widget_closing {
+    display: block;
+    animation: widgetOpacity .15s ease forwards reverse;
+}
+
+.widget_opening {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    animation: widgetOpacity .15s .05s ease forwards;
+}
+
+@keyframes widgetOpacity {
+    from {
+        opacity: 0
+    }
+    to {
+        opacity: 1
+    }
+}
+
+.widget pre {
+    background: #eee !important; /* making sure the pre has proper background contrast */
+}
+
+.widget h3 {
+    margin-top: 0 !important;
+}

website/src/css/main.css

@@ -7,4 +7,5 @@
 @import "imports/community.css";
 @import "imports/collab.css";
 @import "imports/docs.css";
+@import "imports/widgets.css";
 @import "imports/footer.css";

website/src/js/app.js

@@ -121,4 +121,4 @@ var eventInfoLoad = function() {
   }
 }
 
-eventInfoLoad();
+eventInfoLoad();