convert website from hugo to gatsby (#1369)

website/src/css/imports/base.css

@@ -145,6 +145,12 @@ pre {
   line-height: 1 !important;
 }
 
+/* fixes overflowing code example in widgets */
+.widget pre {
+  box-sizing: border-box;
+  width: 100%;
+}
+
 .code,
 code {
   font-family: 'Roboto Mono', monospace !important;

website/src/css/imports/docs.css

@@ -202,7 +202,6 @@
   h2:not(:first-child) {
     margin-top: $medium;
   }
-  
   p {
     line-height: 1.7;
   }
@@ -226,18 +225,13 @@
     border-radius: $borderRadius;
   }
 
-  code {
+  :not(pre) > code {
+    color: inherit;
     background: $lightestGrey;
     border-radius: 2px;
     padding: 2px 6px;
     white-space: nowrap;
   }
-
-  pre > code {
-    background: initial;
-    padding: initial;
-    white-space: inherit;
-  }
 }
 
 .blog-content h1 {

website/src/css/imports/header.css

@@ -15,7 +15,7 @@
 
   em {
     font-style: normal;
-    color: #8B8B8B;
+    color: #8b8b8b;
     padding: 0 8px;
   }
 
@@ -71,7 +71,7 @@ header {
   position: absolute;
   padding: $medium 0;
   text-align: center;
-  transition: background .2s ease, padding .2s ease, box-shadow .2s ease;
+  transition: background 0.2s ease, padding 0.2s ease, box-shadow 0.2s ease;
   width: 100%;
   z-index: 100;
 
@@ -102,14 +102,12 @@ header {
       }
     }*/
 
-
     /*.utility-input {
       @media screen and (max-width: 767px) {
         display: block;
         height: $small;
         margin: $tiny 0 0 0;
       }
-
       @media screen and (min-width: 487px) and (max-width: 767px) {
         margin-top: 32px;
       }
@@ -131,7 +129,8 @@ header {
       }
     }
 
-    .nav-link + iframe  {
+    .gh-button {
+      display: inline-block;
       margin-left: $small;
       vertical-align: middle;
       @media screen and (max-width: $mobile) {
@@ -184,7 +183,6 @@ header {
         margin-top: -35px;
       }
     }
-
   }
 
   .utility-input {
@@ -194,7 +192,7 @@ header {
     top: -4px;
     width: auto;
     border-radius: 4px;
-    background-color: rgba(255,255,255,0.1);
+    background-color: rgba(255, 255, 255, 0.1);
     color: white;
     margin: 0 0 0 $tiny;
     padding-top: -5px;
@@ -204,7 +202,7 @@ header {
     font-weight: 600;
     font-size: 16px;
     line-height: 24px;
-    transition: all .2s ease-in-out;
+    transition: all 0.2s ease-in-out;
 
     @media screen and (min-width: 1024px) {
       display: inline;
@@ -218,13 +216,17 @@ header {
     &::-webkit-input-placeholder,
     &:-moz-placeholder,
     &::-moz-placeholder,
-    &:-ms-input-placeholder  {
+    &:-ms-input-placeholder {
       font-size: $tiny;
       font-weight: $semibold;
       text-align: left;
       text-decoration: none;
       line-height: $small;
     }
+
+    img {
+      margin-right: 4px;
+    }
   }
 
   .logo-container {

website/src/css/imports/widgets.css

@@ -1,65 +1,71 @@
 .widgets {
-    margin: 2rem 0;
+  margin: 2rem 0;
 }
 
 .widgets__cloud {
-    margin: $micro calc(-$micro / 2);
+  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;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background: transparent;
+  border: 0;
+  color: $darkGrey;
+  border: 2px solid $darkGreen;
+  border-radius: $borderRadius;
+  padding: calc($micro / 2) $micro;
+  margin: calc($micro / 2);
+  cursor: pointer;
+  transition: color 0.2s ease, background 0.2s ease;
+  display: inline-block;
+  font-weight: normal;
 }
 
-.widgets__item:hover, .widgets__item_active {
-    background: $darkGreen;
-    color: white !important;
+.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;
+  margin: 1em 0;
+  background: $lightGrey;
+  border-radius: $borderRadius;
+  transition: height 0.15s ease;
 }
 
 .widget {
-    padding: .5em 1em;
-    display: none;
+  padding: 0.5em 1em;
+  display: none;
 }
 
 .widget_open {
-    display: block;
+  display: block;
 }
 
 .widget_closing {
-    display: block;
-    animation: widgetOpacity .15s ease forwards reverse;
+  display: block;
+  animation: widgetOpacity 0.15s ease forwards reverse;
 }
 
 .widget_opening {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    animation: widgetOpacity .15s .05s ease forwards;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  animation: widgetOpacity 0.15s 0.05s ease forwards;
 }
 
 @keyframes widgetOpacity {
-    from {
-        opacity: 0
-    }
-    to {
-        opacity: 1
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .widget pre {
@@ -68,5 +74,5 @@
 }
 
 .widget h3 {
-    margin-top: 0 !important;
-}
+  margin-top: 0 !important;
+}

website/src/css/main.css

@@ -1,13 +0,0 @@
-@import "imports/base.css";
-@import "imports/utilities.css";
-@import "imports/header.css";
-@import "imports/hero.css";
-@import "imports/cta.css";
-@import "imports/whatsnew.css";
-@import "imports/editors.css";
-@import "imports/community.css";
-@import "imports/collab.css";
-@import "imports/docs.css";
-@import "imports/widgets.css";
-@import "imports/footer.css";
-@import "imports/gitter.css";