refactor(background): export background as component closes #235

example/src/index.css

@@ -5,11 +5,14 @@ body {
   color: #111;
 }
 
-html, body {
+html,
+body {
   margin: 0;
 }
 
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
 }
 
@@ -32,7 +35,10 @@ header {
   line-height: 1;
 }
 
-header a, header a:focus, header a:active, header a:visited {
+header a,
+header a:focus,
+header a:active,
+header a:visited {
   color: #111;
 }
 
@@ -58,7 +64,7 @@ nav {
   z-index: 10;
   left: 0;
   padding: 3%;
-  background: rgba(255,255,255,0.9);
+  background: rgba(255, 255, 255, 0.9);
 }
 
 nav.is-open {
@@ -77,7 +83,10 @@ nav a {
   margin-bottom: 5px;
 }
 
-nav a, nav a:focus, nav a:active, nav a:visited {
+nav a,
+nav a:focus,
+nav a:active,
+nav a:visited {
   color: #fff;
 }
 
@@ -93,8 +102,8 @@ nav a.active:before {
   height: 6px;
   background: white;
   opacity: 0.5;
-  left:0;
-  top:50%;
+  left: 0;
+  top: 50%;
   transform: translateY(-50%);
 }
 
@@ -107,7 +116,10 @@ nav a.active:before {
   font-size: 12px;
 }
 
-.sourcedisplay, .sourcedisplay:focus, .sourcedisplay:active, .sourcedisplay:visited {
+.sourcedisplay,
+.sourcedisplay:focus,
+.sourcedisplay:active,
+.sourcedisplay:visited {
   color: #777;
 }
 
@@ -115,12 +127,12 @@ nav a.active:before {
   color: #111;
 }
 
-.richexample__add {
+.overview-example__add {
   display: none;
 }
 
 .react-flow__node a {
-  font-weight :700;
+  font-weight: 700;
   color: #111;
 }
 
@@ -146,7 +158,7 @@ nav a.active:before {
     display: none;
   }
 
-  .richexample__add {
+  .overview-example__add {
     display: block;
   }
-}
+}