fix: add back padding to lists in callouts (#126)

[<img height=20 src=https://readme.com/static/favicon.ico align=center>][demo] | Fixes CX-16
:---:|:---:

## 🧰 Changes

* reverts removing left padding from lists in callouts

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].

[demo]: https://markdown-pr-126.herokuapp.com/#callouts
[prod]: https://kjp.readme.io/docs/content

components/Callout/style.scss

@@ -41,8 +41,8 @@
     margin-left: $l-offset;
     position: relative;
   }
-  > ul, > ol {
-    padding-left: 0;
+  ul, ol {
+    padding-left: 1.3em;
   }
 
   a {

example/Demo.jsx

@@ -17,24 +17,24 @@ const terms = [
   },
 ];
 
-function DemoContent({ ci, children, fixture, name, onChange, opts }) {
-  const DevOnly = props => !ci && props.children;
+const Maybe = ({ when, children }) => when && children;
 
+function DemoContent({ ci, children, fixture, name, onChange, opts }) {
   return (
     <React.Fragment>
-      <DevOnly>
+      <Maybe when={!ci}>
         <div className="rdmd-demo--editor">
           <div className="rdmd-demo--editor-container">
             {children}
             <textarea name="demo-editor" onChange={onChange} value={fixture} />
           </div>
         </div>
-      </DevOnly>
+      </Maybe>
       <div className="rdmd-demo--display">
         <section id="hub-content">
-          <DevOnly>
+          <Maybe when={!ci}>
             <h2 className="rdmd-demo--markdown-header">{name}</h2>
-          </DevOnly>
+          </Maybe>
           <div id="content-container">
             <div className="markdown-body">{markdown(fixture, opts)}</div>
             <section className="content-toc">{reactTOC(reactProcessor().parse(fixture), opts)}</section>

example/demo.scss

@@ -1,3 +1,5 @@
+@import '../styles/main.scss';
+
 #rdmd-demo {
   --rdmd-demo-container: 1400px;
   --rdmd-demo-content-width: 600px;